API tools faq
paste
Advertisement
hermionemessi

Theme 01 (revamped)

hermionemessi
Jul 23rd, 2015
2,120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 69.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="no-js">
  5.  
  6. <!--THEME 01 Sparks Fly (Revamp) by hermionegrangcr (hermionejean.co.vu)
  7.  
  8. THEME BLOG: grangersdesigns (granger.cf)
  9.  
  10.  
  11. ♛ ♛ ♛
  12. ♛♛♛ ♛♛♛ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  16. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr (hermionejean.co.vu)
  17.  
  18.  
  19. TERMS OF USE:
  20.  
  21. ♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
  22.  
  23. ♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
  24.  
  25. ♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
  26.  
  27. ♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
  28.  
  29. THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
  30.  
  31. -->
  32.  
  33. <head>
  34. <title>{Title}</title>
  35.  
  36. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  37. <meta name="keywords" content=""/>
  38. <link rel="shortcut icon" href="{Favicon}"/>
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  40.  
  41. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  42. <link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
  43.  
  44. {block:Description}
  45. <meta name="description" content="{MetaDescription}"/>
  46. {/block:Description}
  47.  
  48. <meta name="if:400px" content="0">
  49. <meta name="if:show likes" content="0">
  50. <meta name="if:transparent permalink" content="1">
  51. <meta name="if:caption" content="1">
  52. <meta name="if:gradient lightbox" content="1">
  53. <meta name="if:update tabs" content="1">
  54.  
  55. <meta name="image:sidebar" content="http://static.tumblr.com/048d750c85c78fabef2568f232dd64df/xbvpdcx/FyVniqi34/tumblr_static_a63s16mbywgss4wc4s8ss044k.jpg">
  56. <meta name="image:blogger" content="http://tympanus.net/Development/HoverEffectIdeas/img/15.jpg">
  57.  
  58.  
  59. <meta name="color:lightbox" content="#fff">
  60. <meta name="color:grad1" content="#fefefe">
  61. <meta name="color:grad2" content="#ababab">
  62. <meta name="color:links" content="#bcbcbc">
  63. <meta name="color:hover" content="#fafafa">
  64. <meta name="color:tags" content="#cdcdcd">
  65. <meta name="color:blockquote" content="#fafafa">
  66.  
  67.  
  68. <meta name="color:accent1" content="#000">
  69. <meta name="color:accent2" content="#fff">
  70.  
  71. <meta name="text:nom" content="Name">
  72. <meta name="text:info" content="Age, MBTI, etc">
  73. <meta name="text:bio" content="optional; write more about yourself">
  74.  
  75. <meta name="text:Link1" content="Link1">
  76. <meta name="text:link1 URL" content="/">
  77. <meta name="text:Link2" content="Link2">
  78. <meta name="text:link2 URL" content="/">
  79. <meta name="text:Link3" content="Link3">
  80. <meta name="text:link3 URL" content="/">
  81. <meta name="text:Link4" content="Link4">
  82. <meta name="text:link4 URL" content="/">
  83. <meta name="text:Link5" content="Link5">
  84. <meta name="text:link5 URL" content="/">
  85. <meta name="text:Link6" content="Link6">
  86. <meta name="text:link6 URL" content="/">
  87. <meta name="text:Link7" content="Link7">
  88. <meta name="text:link7 URL" content="/">
  89. <meta name="text:Link8" content="Link8">
  90. <meta name="text:link8 URL" content="/">
  91. <meta name="text:Link9" content="Link9">
  92. <meta name="text:link9 URL" content="/">
  93.  
  94. <meta name="text:Link10" content="Extra Link">
  95. <meta name="text:link10 URL" content="/">
  96.  
  97.  
  98. <meta name="text:updates" content="Updates here">
  99. <meta name="text:reading" content="books">
  100. <meta name="text:watching" content="movies">
  101. <meta name="text:listening" content="music">
  102. <meta name="text:working on" content="stuff">
  103.  
  104.  
  105. <script src="http://tympanus.net/Development/CreativeLinkEffects/js/modernizr.custom.js"></script>
  106.  
  107. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  108.  
  109. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  110.  
  111. <!--Tooltip-->
  112.  
  113. <script>
  114.  
  115. (function($){
  116.  
  117. $(document).ready(function(){
  118.  
  119. $("a[title]").style_my_tooltips({
  120.  
  121. tip_follows_cursor:true,
  122.  
  123. tip_delay_time:30,
  124.  
  125. tip_fade_speed:300,
  126.  
  127. attribute:"title"
  128.  
  129. });
  130.  
  131. });
  132.  
  133. })(jQuery);
  134.  
  135. </script>
  136.  
  137. <!--sidebar on scroll script-->
  138. <script>
  139. $(window).scroll(function() {
  140. var scrollTopVal = $(this).scrollTop();
  141. if ( scrollTopVal > 200 ) {
  142. $('#sidebar').css({'opacity':'1'});
  143.  
  144. } else {
  145. $('#sidebar').css({'opacity':'0'});
  146. }
  147. });
  148. </script>
  149.  
  150. <script>
  151. $(window).scroll(function() {
  152. var scrollTopVal = $(this).scrollTop();
  153. if ( scrollTopVal > 200 ) {
  154. $('#sidebar2').css({'opacity':'1'});
  155.  
  156. } else {
  157. $('#sidebar2').css({'opacity':'0'});
  158. }
  159. });
  160. </script>
  161.  
  162. <script>
  163. $(document).ready(function() {
  164. //
  165. $('a.poplight[href^=#]').click(function() {
  166. var popID = $(this).attr('rel'); //Get Popup Name
  167. var popURL = $(this).attr('href'); //Get Popup href to define size
  168. var query= popURL.split('?');
  169. var dim= query[1].split('&');
  170. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  171. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  172. var popMargTop = ($('#' + popID).height() + 80) / 2;
  173. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  174. //Apply Margin to Popup
  175. $('#' + popID).css({
  176. 'margin-top' : -popMargTop,
  177. 'margin-left' : -popMargLeft
  178. });
  179. $('body').append('<div id="fade"></div>');
  180. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  181. return false;
  182. });
  183. $('a.close, #fade').live('click', function() {
  184. $('#fade , .popup_block').fadeOut(function() {
  185. $('#fade, a.close').remove(); //fade them both out
  186. });
  187. return false;
  188. });
  189. });
  190. </script>
  191.  
  192. <style type="text/css">
  193.  
  194. ::selection {background:#fff; color:#000000;}
  195. ::-moz-selection {background:#fff;color:#000000;}
  196. ::-webkit-selection {background:#fff;color:#000000;}
  197.  
  198.  
  199. ::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
  200.  
  201. ::-webkit-scrollbar-thumb { background-color: {color:accent1}; }
  202.  
  203. /*Tooltip*/
  204. #s-m-t-tooltip{
  205. position:absolute;
  206. margin-top: 10px;
  207. z-index:9999999999;
  208. padding:5px;
  209. color:#fff;
  210. background: {color:accent1};
  211. font-size:12px;
  212.  
  213. }
  214.  
  215. /*Basics*/
  216.  
  217. body {
  218. font-family:'Lato',Arial, sans-serif;
  219. font-weight:400;
  220. font-size:12px;
  221. line-height:140%;
  222. letter-spacing:1.5px;
  223. margin:0;
  224.  
  225. }
  226.  
  227. a {
  228. text-decoration: none;
  229. color: {color:links};
  230. transition: all 0.3s ease-in-out;
  231. -webkit-transition: all 0.3s ease-in-out;
  232. -moz-transition: all 0.3s ease-in-out;
  233. -o-transition: all 0.3s ease-in-out;
  234. }
  235.  
  236. a:hover {
  237. color: {color:hover};
  238. transition: all 0.3s ease-in-out;
  239. -webkit-transition: all 0.3s ease-in-out;
  240. -moz-transition: all 0.3s ease-in-out;
  241. -o-transition: all 0.3s ease-in-out;
  242.  
  243. }
  244.  
  245. b, strong {
  246. font-weight:700;
  247. }
  248.  
  249. strike {
  250. text-decoration: line-through;
  251. }
  252.  
  253. em, i {
  254. text-decoration:italic;
  255. }
  256. u {
  257. text-decoration:underline;
  258. }
  259.  
  260. pre {
  261. white-space: pre-wrap;
  262. white-space: -moz-pre-wrap;
  263. white-space: -pre-wrap;
  264. white-space: -o-pre-wrap;
  265. word-wrap: break-word;
  266. }
  267.  
  268. blockquote {
  269. border-left: 1px {color:blockquote} solid;
  270. padding-left: 20px;
  271. margin-left: 15px;
  272. max-width: 100%;
  273.  
  274. }
  275.  
  276. blockquote blockquote {
  277. padding: 0 0 0 20px;
  278. margin: 0 0 0 15px;
  279.  
  280. }
  281.  
  282. blockquote ul {
  283. padding-left:0;
  284. }
  285.  
  286. blockquote li {
  287. list-style:none;
  288. padding:5px;
  289. }
  290.  
  291. li {
  292. padding:3px;
  293. }
  294.  
  295. /*Important*/
  296.  
  297. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {
  298. max-width: 100% !important;
  299. }
  300.  
  301. #container {
  302. top:30px;
  303. margin:0 auto;
  304. {block:ifnot400px}
  305. width:1000px;
  306. {/block:ifnot400px}
  307.  
  308. {block:if400px}
  309. width:900px;
  310. {/block:if400px}
  311.  
  312. height:100%;
  313. position: relative;
  314.  
  315. }
  316.  
  317.  
  318.  
  319.  
  320. /*Sidebar*/
  321.  
  322. #sb1 {
  323. height:100%;
  324. width:200px;
  325. position:fixed;
  326. border-right:1px solid {color:blockquote};
  327. transition: all 0.3s ease-in-out;
  328. -webkit-transition: all 0.3s ease-in-out;
  329. -moz-transition: all 0.3s ease-in-out;
  330. -o-transition: all 0.3s ease-in-out;
  331. }
  332.  
  333. #sb2 {
  334. height:100%;
  335. width:200px;
  336. {block:ifnot400px}
  337. margin-left:800px;
  338. {/block:ifnot400px}
  339.  
  340. {block:if400px}
  341. margin-left:700px;
  342. {/block:if400px}
  343. position:fixed;
  344. border-left:1px solid {color:blockquote};
  345. transition: all 0.3s ease-in-out;
  346. -webkit-transition: all 0.3s ease-in-out;
  347. -moz-transition: all 0.3s ease-in-out;
  348. -o-transition: all 0.3s ease-in-out;
  349. display:flex;
  350. display:-webkit-flex;
  351. display:-moz-flex;
  352. display:-ms-flex;
  353. align-items:center;
  354. -webkit-align-itens:center;
  355. -moz-align-items:center;
  356. -ms-align-items:center;
  357. justify-content:center;
  358. -webkit-justify-content:center;
  359. -moz-justify-content:center;
  360. -ms-justify-content:center;
  361. display: -webkit-box;
  362. -webkit-box-align: center;
  363. -webkit-box-pack: center;
  364. }
  365.  
  366. @media screen and (max-width: 900px) {
  367. #container {
  368. {block:ifnot400px}
  369. width:600px;
  370. {/block:ifnot400px}
  371.  
  372. {block:if400px}
  373. width:500px;
  374. {/block:if400px}
  375.  
  376. }
  377.  
  378. #sb1, #sb2 {display:none;}
  379.  
  380.  
  381. }
  382.  
  383. /*Left Sidebar*/
  384.  
  385. #sidebar {
  386. text-align:center;
  387. position:relative;
  388. width: 200px;
  389. opacity:0;
  390. top:25%;
  391. transition: all .5s ease-in-out;
  392. -webkit-transition: all .5s ease-in-out;
  393. -moz-transition: all .5s ease-in-out;
  394. -o-transition: all .5s ease-in-out;
  395. -ms-transition: all .5s ease-in-out;
  396. }
  397.  
  398. .lside {
  399. width:180px;
  400. position:relative;
  401. top:0;
  402. left:0;
  403. margin:0;
  404. padding:0;
  405. transition: all .5s ease-in-out;
  406. -webkit-transition: all .5s ease-in-out;
  407. -moz-transition: all .5s ease-in-out;
  408. -o-transition: all .5s ease-in-out;
  409. -ms-transition: all .5s ease-in-out;
  410. }
  411.  
  412. .lside img {
  413. height:auto;
  414. border-radius:100%;
  415. -moz-border-radius:100%;
  416. -webkit-border-radius:100%;
  417. border: 3px solid {color:accent1};
  418. }
  419.  
  420. .circle {
  421.  
  422. z-index:100;
  423. width:186px;
  424. opacity:0;
  425. top:0;
  426. position:absolute;
  427. left:0;
  428. margin:0;
  429. padding:0;
  430. transition: all .5s ease-in-out;
  431. -webkit-transition: all .5s ease-in-out;
  432. -moz-transition: all .5s ease-in-out;
  433. -o-transition: all .5s ease-in-out;
  434. -ms-transition: all .5s ease-in-out;
  435.  
  436.  
  437. }
  438.  
  439. #sidebar:hover .circle {
  440. opacity:1;
  441. transition: all .5s ease-in-out;
  442. -webkit-transition: all .5s ease-in-out;
  443. -moz-transition: all .5s ease-in-out;
  444. -o-transition: all .5s ease-in-out;
  445. -ms-transition: all .5s ease-in-out;
  446. }
  447.  
  448. @media screen and (max-width: 1080px) {
  449.  
  450.  
  451. #sidebar {
  452. width:170px;
  453. left:20px;
  454. transition: all .5s ease-in-out;
  455. -webkit-transition: all .5s ease-in-out;
  456. -moz-transition: all .5s ease-in-out;
  457. -o-transition: all .5s ease-in-out;
  458. -ms-transition: all .5s ease-in-out;
  459. }
  460. .lside {
  461. width:150px;
  462. transition: all .5s ease-in-out;
  463. -webkit-transition: all .5s ease-in-out;
  464. -moz-transition: all .5s ease-in-out;
  465. -o-transition: all .5s ease-in-out;
  466. -ms-transition: all .5s ease-in-out;
  467. }
  468.  
  469. .circle {
  470. width:156px;
  471. transition: all .5s ease-in-out;
  472. -webkit-transition: all .5s ease-in-out;
  473. -moz-transition: all .5s ease-in-out;
  474. -o-transition: all .5s ease-in-out;
  475. -ms-transition: all .5s ease-in-out;
  476. }
  477. }
  478.  
  479. /*Right Sidebar*/
  480.  
  481. #sidebar2 {
  482. width: 200px;
  483. text-align:center;
  484. opacity:0;
  485. margin-left:15px;
  486. transition: all .5s ease-in-out;
  487. -webkit-transition: all .5s ease-in-out;
  488. -moz-transition: all .5s ease-in-out;
  489. -o-transition: all .5s ease-in-out;
  490. -ms-transition: all .5s ease-in-out;
  491. padding:0;
  492. }
  493.  
  494. #sidebar2 > h2 {
  495. color: {color:accent1};
  496. font-weight:300;
  497. text-align:center;
  498. text-transform:uppercase;
  499. font-family:'Raleway',Arial, sans-serif;
  500. }
  501.  
  502. #sidebar2 > a {
  503. width:100%;
  504. padding:8px;
  505. letter-spacing:2px;
  506. color:#000;
  507. background:#fafafa;
  508. margin:10px auto;
  509. display:block;
  510. text-align:center;
  511. font-weight:normal;
  512. text-transform:uppercase;
  513. transition: all 0.3s ease-in-out;
  514. -webkit-transition: all 0.3s ease-in-out;
  515. -moz-transition: all 0.3s ease-in-out;
  516. -o-transition: all 0.3s ease-in-out;
  517.  
  518. }
  519.  
  520. #sidebar2 > a:hover {
  521. background:#000;
  522. color:#fff;
  523. transition: all 0.3s ease-in-out;
  524. -webkit-transition: all 0.3s ease-in-out;
  525. -moz-transition: all 0.3s ease-in-out;
  526. -o-transition: all 0.3s ease-in-out;
  527. }
  528.  
  529.  
  530. /*Likes*/
  531. #likes_container {
  532. margin:10px auto 15px auto;
  533. padding:5px;
  534. width:100%;
  535. font-size:90%;
  536. max-height:50vh;
  537. overflow:auto;
  538. position:relative;
  539. text-align:left;
  540. transition: all 0.3s ease-in-out;
  541. -webkit-transition: all 0.3s ease-in-out;
  542. -moz-transition: all 0.3s ease-in-out;
  543. -o-transition: all 0.3s ease-in-out;
  544.  
  545. }
  546.  
  547. #likes_container::-webkit-scrollbar {display:none; }
  548.  
  549. #likes_container::-webkit-scrollbar-thumb { display:none; }
  550.  
  551.  
  552.  
  553. #likes_container ul {
  554. list-style:none;
  555. padding:0;
  556. }
  557.  
  558. #likes_container li {
  559. padding:10px 0 10px 0;
  560. min-height:25px;
  561. }
  562.  
  563. li.like_post {
  564. width:100% !important;
  565. position:relative;
  566. }
  567.  
  568. li.like_post p {
  569. display:none !important;
  570. }
  571.  
  572. li.like_post blockquote {
  573. margin: 0;
  574. padding: 0 0 0 10px;
  575. border-left: 1px solid {color:blockquote};
  576. }
  577.  
  578. .like_title {
  579. text-align:center;
  580. text-transform:uppercase !important;
  581. font-size:12px !important;
  582. line-height:160%;
  583. letter-spacing:1.5px;
  584. }
  585.  
  586.  
  587.  
  588. li.like_post *, li.like_post *:after, li.like_post *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  589.  
  590.  
  591. li.like_post .post_info_bottom {
  592.  
  593. text-align:center;
  594. position:absolute;
  595. top:0;
  596. left:0;
  597. height:100%;
  598. width:100%;
  599. opacity:0;
  600. z-index:10;
  601. background:#fff;
  602. padding-top:20px;
  603. display: block !important;
  604. transition: all 0.3s ease-in-out;
  605. -webkit-transition: all 0.3s ease-in-out;
  606. -moz-transition: all 0.3s ease-in-out;
  607. -o-transition: all 0.3s ease-in-out;
  608. }
  609.  
  610.  
  611.  
  612. li.like_post:hover .post_info_bottom {
  613. opacity:0.8;
  614. transition: all 0.3s ease-in-out;
  615. -webkit-transition: all 0.3s ease-in-out;
  616. -moz-transition: all 0.3s ease-in-out;
  617. -o-transition: all 0.3s ease-in-out;
  618. }
  619.  
  620. li.like_post .post_info_bottom a{
  621.  
  622. font-weight:bold;
  623. text-transform:uppercase;
  624. color:{color:accent1};
  625. transition: all 0.3s ease-in-out;
  626. -webkit-transition: all 0.3s ease-in-out;
  627. -moz-transition: all 0.3s ease-in-out;
  628. -o-transition: all 0.3s ease-in-out;
  629.  
  630. }
  631.  
  632. li.like_post .post_info_bottom a:hover {
  633. color:{color:hover};
  634. transition: all 0.3s ease-in-out;
  635. -webkit-transition: all 0.3s ease-in-out;
  636. -moz-transition: all 0.3s ease-in-out;
  637. -o-transition: all 0.3s ease-in-out;
  638. }
  639.  
  640. @media screen and (max-width: 1080px) {
  641.  
  642. #sidebar2 {
  643. width:150px;
  644. margin-left:-10px;
  645. transition: all 0.3s ease-in-out;
  646. -webkit-transition: all 0.3s ease-in-out;
  647. -moz-transition: all 0.3s ease-in-out;
  648. -o-transition: all 0.3s ease-in-out;
  649. }
  650.  
  651. .like_title {
  652.  
  653. font-size:10px !important;
  654.  
  655. }
  656.  
  657.  
  658. li.like_post .post_info_bottom {
  659. padding-top:10px;
  660. }
  661.  
  662. li.like_post .post_info_bottom a {
  663. text-transform:none;
  664. }
  665.  
  666. }
  667.  
  668.  
  669.  
  670.  
  671. /*header*/
  672.  
  673. #header {
  674. {block:ifnot400px}
  675. width:600px;
  676. {/block:ifnot400px}
  677.  
  678. {block:if400px}
  679. width:500px;
  680. {/block:if400px}
  681.  
  682. margin:0 auto;
  683. padding-top:10px;
  684. padding-bottom:5px;
  685. position:static;
  686. width:100%;
  687. text-align: center;
  688. border-bottom: 1px solid {color:blockquote};
  689.  
  690. }
  691.  
  692. /*Title*/
  693.  
  694. .link {
  695. outline: none;
  696. text-decoration: none;
  697. position: relative;
  698. font-size: 3em;
  699. line-height: 1;
  700. color: {color:accent1};
  701. display: inline-block;
  702. }
  703.  
  704. .siriusblack {
  705.  
  706. font-weight:800;
  707. color: {color:accent1};
  708. text-transform:uppercase;
  709. -webkit-transition: color 0.5s 0.25s;
  710. transition: color 0.5s 0.25s;
  711. overflow: hidden;
  712. }
  713.  
  714. .siriusblack:hover {
  715. -webkit-transition: none;
  716. transition: none;
  717. color: transparent;
  718. }
  719.  
  720. .siriusblack::before {
  721. content: '';
  722. width: 100%;
  723. height: 6px;
  724. margin: -3px 0 0 0;
  725. background: {color:hover};
  726. position: absolute;
  727. left: 0;
  728. top: 50%;
  729. -webkit-transform: translate3d(-100%,0,0);
  730. transform: translate3d(-100%,0,0);
  731. -webkit-transition: -webkit-transform 0.4s;
  732. transition: transform 0.4s;
  733. -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  734. transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  735. }
  736.  
  737. .siriusblack:hover::before {
  738. -webkit-transform: translate3d(100%,0,0);
  739. transform: translate3d(100%,0,0);
  740. }
  741.  
  742. .siriusblack span {
  743. position: absolute;
  744. height: 50%;
  745. width: 100%;
  746. left: 0;
  747. top: 0;
  748. overflow: hidden;
  749. }
  750.  
  751. .siriusblack span::before {
  752. content: attr(data-letters);
  753. color: {color:accent1};
  754. position: absolute;
  755. left: 0;
  756. width: 100%;
  757. color: {color:hover};
  758. -webkit-transition: -webkit-transform 0.5s;
  759. transition: transform 0.5s;
  760. }
  761.  
  762. .siriusblack span:nth-child(2) {
  763. top: 50%;
  764. }
  765.  
  766. .siriusblack span:first-child::before {
  767. top: 0;
  768. -webkit-transform: translate3d(0,100%,0);
  769. transform: translate3d(0,100%,0);
  770. }
  771.  
  772. .siriusblack span:nth-child(2)::before {
  773. bottom: 0;
  774. -webkit-transform: translate3d(0,-100%,0);
  775. transform: translate3d(0,-100%,0);
  776. }
  777.  
  778. .siriusblack:hover span::before {
  779. -webkit-transition-delay: 0.3s;
  780. transition-delay: 0.3s;
  781. -webkit-transform: translate3d(0,0,0);
  782. transform: translate3d(0,0,0);
  783. -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  784. transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  785. }
  786.  
  787. /*header links*/
  788.  
  789. nav *,
  790. nav *:after,
  791. nav *::before {
  792. -webkit-box-sizing: border-box;
  793. -moz-box-sizing: border-box;
  794. box-sizing: border-box;
  795. }
  796.  
  797. nav a {
  798. position: relative;
  799. display: inline-block;
  800. margin: 15px auto 15px auto;
  801. outline: none;
  802. color: {color:accent1};
  803. text-decoration: none;
  804. text-transform: uppercase;
  805. letter-spacing: 1.5px;
  806. font-weight: 400;
  807. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  808. font-size: 1.2em;
  809. }
  810.  
  811. nav a:hover,
  812. nav a:focus {
  813. outline: none;
  814. }
  815.  
  816. .prongs {
  817. margin-top:20px;
  818. }
  819.  
  820. .prongs a {
  821.  
  822. font-size:1.2em;
  823. text-align:center;
  824. line-height: 1em;
  825. height:1em;
  826. -webkit-perspective: 800px;
  827. -moz-perspective: 800px;
  828. perspective: 800px;
  829. letter-spacing:1px;
  830.  
  831. }
  832.  
  833. .prongs a span {
  834.  
  835. height:1em;
  836. text-align:center;
  837. position: relative;
  838. display: inline-block;
  839. padding: 3px 15px 0;
  840. background: #fff;
  841. box-shadow: inset 0 3px #fff;
  842. -webkit-transition: background 0.6s;
  843. -moz-transition: background 0.6s;
  844. transition: background 0.6s;
  845. -webkit-transform-origin: 50% 0;
  846. -moz-transform-origin: 50% 0;
  847. transform-origin: 50% 0;
  848. -webkit-transform-style: preserve-3d;
  849. -moz-transform-style: preserve-3d;
  850. transform-style: preserve-3d;
  851. -webkit-transform-origin: 0% 50%;
  852. -moz-transform-origin: 0% 50%;
  853. transform-origin: 0% 50%;
  854.  
  855. }
  856.  
  857. .prongs a span::before {
  858. position: absolute;
  859. top: 0;
  860. left: 0;
  861. width: 100%;
  862. height: 100%;
  863. padding: 3px 15px 0;
  864. background: #fff;
  865. color: {color:accent1};
  866. content: attr(data-hover);
  867. -webkit-transform: rotateX(270deg);
  868. -moz-transform: rotateX(270deg);
  869. transform: rotateX(270deg);
  870. -webkit-transition: -webkit-transform 0.6s;
  871. -moz-transition: -moz-transform 0.6s;
  872. transition: transform 0.6s;
  873. -webkit-transform-origin: 0 0;
  874. -moz-transform-origin: 0 0;
  875. transform-origin: 0 0;
  876. pointer-events: none;
  877.  
  878. }
  879.  
  880. .prongs a:hover span,
  881. .prongs a:focus span {
  882. background: #fff;
  883. }
  884.  
  885. .prongs a:hover span::before,
  886. .prongs a:focus span::before {
  887. -webkit-transform: rotateX(10deg);
  888. -moz-transform: rotateX(10deg);
  889. transform: rotateX(10deg);
  890. }
  891.  
  892. /*Pop-Ups*/
  893.  
  894.  
  895. .popup_block{
  896. display:none;
  897. padding:20px;
  898. float:left;
  899. position:fixed;
  900. top:50%;
  901. left:51.5%;
  902. z-index: 99999;
  903. background:transparent;
  904. text-align:center;
  905.  
  906. }
  907.  
  908. @media screen and (max-width: 1100px) {
  909.  
  910. .popup_block {
  911. left:52%;
  912. top:53%;
  913.  
  914. }
  915.  
  916.  
  917. }
  918.  
  919. .popup_block h1 {
  920.  
  921. color:{color:accent2};
  922. padding:5px 0 5px 0;
  923. width:100%;
  924. white-space:nowrap;
  925. text-overflow:ellipsis;
  926. overflow:hidden;
  927. font-family:'Raleway',Arial,Sans-serif;
  928. font-weight:300;
  929. text-transform:uppercase;
  930. }
  931.  
  932.  
  933.  
  934. *html #fade {position: absolute;}
  935. *html .popup_block {position: absolute;}
  936. #fade {
  937. display:none;
  938. position:fixed;
  939. left:0px;
  940. top:0px;
  941. width:100%;
  942. height:100%;
  943. z-index:19999;
  944. {block:ifnotgradientlightbox}
  945. background:rgba({RGBcolor:lightbox}, 0.9);
  946. {/block:ifnotgradientlightbox}
  947.  
  948. {block:ifgradientlightbox}
  949. background: -webkit-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* Chrome 10+, Saf5.1+ */
  950. background: -moz-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* FF3.6+ */
  951. background: -ms-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* IE10 */
  952. background: -o-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* Opera 11.10+ */
  953. background: linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* W3C */
  954. {/block:ifgradientlightbox}
  955. opacity:1; /* change to opacity:1; */
  956. }
  957.  
  958. /*info*/
  959. figure *,figure *:after,figure *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
  960.  
  961. .grid {
  962. position: relative;
  963. margin: 0 auto;
  964. padding: 0;
  965. max-width: 450px;
  966. list-style: none;
  967. text-align: center;
  968. }
  969.  
  970. /* Common style */
  971. .grid figure {
  972. position: relative;
  973. overflow: hidden;
  974. margin: 10px auto;
  975. width:400px;
  976. height:350px;
  977. background: #000;
  978. text-align: center;
  979.  
  980. }
  981.  
  982. .grid figure img {
  983. position: relative;
  984. display: block;
  985. min-height: 100%;
  986. max-width: 100%;
  987. opacity: 0.95;
  988. }
  989.  
  990. .grid figure figcaption {
  991. padding: 2em;
  992. color: #fff;
  993. text-transform: uppercase;
  994. font-size: 1.25em;
  995. -webkit-backface-visibility: hidden;
  996. backface-visibility: hidden;
  997. }
  998.  
  999. .grid figure figcaption::before,
  1000. .grid figure figcaption::after {
  1001. pointer-events: none;
  1002. }
  1003.  
  1004. .grid figure figcaption {
  1005. position: absolute;
  1006. top: 0;
  1007. left: 0;
  1008. width: 100%;
  1009. height: 100%;
  1010. }
  1011.  
  1012.  
  1013. .grid figure h2 {
  1014. font-size: 1.2em;
  1015. word-spacing: -0.15em;
  1016. font-weight: 300;
  1017. }
  1018.  
  1019. .grid figure h2 span {
  1020. font-weight: 800;
  1021. }
  1022.  
  1023. .grid figure h2,
  1024. .grid figure p {
  1025. margin: 0;
  1026. }
  1027.  
  1028. .grid figure p {
  1029. letter-spacing: 1px;
  1030. font-size: 80%;
  1031. text-transform:none;
  1032. }
  1033.  
  1034. .grid figure a {
  1035. color:{color:links};
  1036. }
  1037.  
  1038. .grid figure a:hover {
  1039. text-decoration: line-through;
  1040. }
  1041.  
  1042. figure.anto img {
  1043. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1044. transition: opacity 0.35s, transform 0.35s;
  1045. -webkit-transform: scale(1.12);
  1046. transform: scale(1.12);
  1047. }
  1048.  
  1049. figure.anto:hover img {
  1050. opacity: 0.4;
  1051. -webkit-transform: scale(1);
  1052. transform: scale(1);
  1053. }
  1054.  
  1055. figure.anto figcaption {
  1056. padding: 3em;
  1057. }
  1058.  
  1059. figure.anto figcaption::before {
  1060. position: absolute;
  1061. top: 30px;
  1062. right: 30px;
  1063. bottom: 30px;
  1064. left: 30px;
  1065. border: 1px solid #fff;
  1066. content: '';
  1067. -webkit-transform: scale(1.1);
  1068. transform: scale(1.1);
  1069. }
  1070.  
  1071. figure.anto figcaption::before,
  1072. figure.anto p, figure.anto h2 {
  1073. opacity: 0;
  1074. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1075. transition: opacity 0.35s, transform 0.35s;
  1076. }
  1077.  
  1078. figure.anto h2 {
  1079. padding: 20px 0 20px 0;
  1080. }
  1081.  
  1082. figure.anto p {
  1083. margin: 0 auto 1.2em auto;
  1084. max-width: 350px;
  1085. -webkit-transform: scale(1.5);
  1086. transform: scale(1.5);
  1087. }
  1088.  
  1089. figure.anto:hover figcaption::before,
  1090. figure.anto:hover p, figure.anto:hover h2 {
  1091. opacity: 1;
  1092. -webkit-transform: scale(1);
  1093. transform: scale(1);
  1094. }
  1095.  
  1096. /*navi*/
  1097.  
  1098. .popup_block nav a {
  1099. position: relative;
  1100. display: inline-block;
  1101. margin: 10px;
  1102. outline: none;
  1103. color: #fff;
  1104. text-decoration: none;
  1105. text-transform: uppercase;
  1106. letter-spacing: 1px;
  1107. font-weight: 400;
  1108. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1109. font-size: 1.35em;
  1110. }
  1111.  
  1112. .popup_block nav a:hover,
  1113. .popup_block nav a:focus {
  1114. outline: none;
  1115. }
  1116.  
  1117. .iniesta {
  1118. margin:30px auto;
  1119. letter-spacing:2px;
  1120. }
  1121.  
  1122. .iniesta a {
  1123. line-height: 2.8em;
  1124. margin: 15px;
  1125. -webkit-perspective: 800px;
  1126. -moz-perspective: 800px;
  1127. perspective: 800px;
  1128. width: 200px;
  1129. text-align:center;
  1130. white-space: nowrap;
  1131. overflow:hidden;
  1132. text-overflow: ellipsis;
  1133. }
  1134.  
  1135. .iniesta a:empty {
  1136. visibility:hidden;
  1137. }
  1138.  
  1139. .iniesta a span {
  1140. position: relative;
  1141. display: inline-block;
  1142. width: 100%;
  1143. padding: 0 14px;
  1144. background: {color:accent1};
  1145. -webkit-transition: -webkit-transform 0.4s, background 0.4s;
  1146. -moz-transition: -moz-transform 0.4s, background 0.4s;
  1147. transition: transform 0.4s, background 0.4s;
  1148. -webkit-transform-style: preserve-3d;
  1149. -moz-transform-style: preserve-3d;
  1150. transform-style: preserve-3d;
  1151. -webkit-transform-origin: 50% 50% -100px;
  1152. -moz-transform-origin: 50% 50% -100px;
  1153. transform-origin: 50% 50% -100px;
  1154. }
  1155.  
  1156. .csstransforms3d .iniesta a span::before {
  1157. position: absolute;
  1158. top: 0;
  1159. left: 100%;
  1160. width: 100%;
  1161. height: 100%;
  1162. text-align:center;
  1163. white-space: nowrap;
  1164. overflow:hidden;
  1165. text-overflow: ellipsis;
  1166. visibility:visible;
  1167. background: {color:grad2};
  1168. content: attr(data-hover);
  1169. -webkit-transition: background 0.4s;
  1170. -moz-transition: background 0.4s;
  1171. transition: background 0.4s;
  1172. -webkit-transform: rotateY(90deg);
  1173. -moz-transform: rotateY(90deg);
  1174. transform: rotateY(90deg);
  1175. -webkit-transform-origin: 0 50%;
  1176. -moz-transform-origin: 0 50%;
  1177. transform-origin: 0 50%;
  1178. pointer-events: none;
  1179. }
  1180.  
  1181. .iniesta a:hover span,
  1182. .iniesta a:focus span {
  1183. background: {color:grad1};
  1184. -webkit-transform: rotateY(-90deg);
  1185. -moz-transform: rotateY(-90deg);
  1186. transform: rotateY(-90deg);
  1187. }
  1188.  
  1189. .csstransforms3d .iniesta a:hover span::before,
  1190. .csstransforms3d .iniesta a:focus span::before {
  1191. background: {color:hover};
  1192. }
  1193.  
  1194. /*updates*/
  1195.  
  1196. #updates {
  1197. margin:20px auto;
  1198. text-align:center;
  1199. font-size:16px;
  1200. line-height:160%;
  1201. color:{color:accent2};
  1202. }
  1203.  
  1204. #updates p {
  1205. padding:1em;
  1206. }
  1207.  
  1208. #tumblr_controls {
  1209. z-index:999 !important;
  1210. }
  1211.  
  1212.  
  1213. /*posts*/
  1214.  
  1215. #entries {
  1216. {block:ifnot400px}
  1217. width:600px;
  1218. {/block:ifnot400px}
  1219.  
  1220. {block:if400px}
  1221. width:500px;
  1222. {/block:if400px}
  1223.  
  1224. margin:0 auto 50px auto;
  1225.  
  1226. }
  1227.  
  1228. .posts {
  1229.  
  1230. {block:ifnot400px}
  1231. width:500px;
  1232. {/block:ifnot400px}
  1233.  
  1234. {block:if400px}
  1235. width:400px;
  1236. {/block:if400px}
  1237.  
  1238. word-wrap: break-word;
  1239. text-transform:none;
  1240. font-size:12px;
  1241. text-align:left;
  1242. {block:ifnottransparentpermalink}
  1243. margin:50px auto 0 auto;
  1244. {/block:ifnottransparentpermalink}
  1245.  
  1246. {block:iftransparentpermalink}
  1247.  
  1248. margin:0px auto;
  1249.  
  1250. {/block:iftransparentpermalink}
  1251. }
  1252.  
  1253. /*Tumblr embed image fix*/
  1254.  
  1255. .posts img {
  1256. max-width:100%;
  1257. height:auto;
  1258. }
  1259.  
  1260. {block:iftransparentpermalink}
  1261. section {
  1262.  
  1263. {block:ifnot400px}
  1264. width:500px;
  1265. {/block:ifnot400px}
  1266.  
  1267. {block:if400px}
  1268. width:400px;
  1269. {/block:if400px}
  1270. position:relative;
  1271. margin:50px auto 30px auto;
  1272. overflow:hidden;
  1273. }
  1274.  
  1275. section:hover .perma_hold {
  1276. opacity:1;
  1277. -webkit-transform: scale(1);
  1278. -moz-transform: scale(1);
  1279. -o-transform: scale(1);
  1280. -ms-transform: scale(1);
  1281. transform: scale(1);
  1282.  
  1283. }
  1284. .perma_hold {
  1285. width:100%;
  1286. height:100%;
  1287. top:0px;
  1288. left:0px;
  1289. position:absolute;
  1290. opacity:0;
  1291. z-index:9999;
  1292. background:rgba(255,255,255,0.9);
  1293. transition:0.6s ease;
  1294. -o-transition:0.6s ease;
  1295. -moz-transition:0.6s ease;
  1296. -webkit-transition:0.6s ease;
  1297. -webkit-transform: scale(10);
  1298. -moz-transform: scale(10);
  1299. -o-transform: scale(10);
  1300. -ms-transform: scale(10);
  1301. transform: scale(10);
  1302.  
  1303. }
  1304.  
  1305. .perma {
  1306. top:40%;
  1307. position:relative;
  1308. font-size:14px;
  1309. text-align:center;
  1310. text-transform:uppercase;
  1311. }
  1312.  
  1313. .perma_hold a {
  1314. font-weight:bold;
  1315. color: {color:accent1};
  1316.  
  1317. }
  1318.  
  1319.  
  1320. .info a{margin:0px 3px;}
  1321. .info {margin-top:10px;font-size:8px;letter-spacing:0.5px;}
  1322. .tags a{margin:0px 3px;}
  1323. .tags {
  1324.  
  1325. font-weight:normal;
  1326. font-family:'lato', arial, sans-serif;
  1327. margin-top:10px;
  1328. text-transform:none;
  1329. font-size:10px;
  1330. font-style:italic;
  1331. white-space: nowrap;
  1332. overflow: hidden;
  1333. text-overflow: ellipsis;
  1334. }
  1335.  
  1336. {/block:iftransparentpermalink}
  1337.  
  1338.  
  1339. /*lightbox*/
  1340. {block:ifnotgradientlightbox}
  1341. #tumblr_lightbox, .tmblr-lightbox {background:rgba({RGBcolor:lightbox}, 0.9)!important;}
  1342. {/block:ifnotgradientlightbox}
  1343.  
  1344. {block:ifgradientlightbox}
  1345. #tumblr_lightbox, .tmblr-lightbox {
  1346. background: -webkit-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* Chrome 10+, Saf5.1+ */
  1347. background: -moz-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* FF3.6+ */
  1348. background: -ms-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* IE10 */
  1349. background: -o-linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* Opera 11.10+ */
  1350. background: linear-gradient(90deg, rgba({RGBcolor:grad1},0.9) 10%, rgba({RGBcolor:grad2},0.8) 90%)!important; /* W3C */
  1351.  
  1352. }
  1353. {/block:ifgradientlightbox}
  1354. #tumblr_lightbox img, .tmblr-lightbox .vignette {
  1355. opacity:0;
  1356. border-radius:0!important;
  1357. -moz-border-radius: 0!important;
  1358. -webkit-border-radius: 0!important;
  1359. -o-border-radius: 0!important;
  1360. -webkit-box-shadow:none!important;
  1361. box-shadow:none!important;
  1362. }
  1363. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  1364. opacity: 1!important;
  1365. box-shadow: 0 0 0 transparent !important;
  1366. border-radius: 0!important;
  1367. -moz-border-radius: 0!important;
  1368. -webkit-border-radius: 0!important;
  1369. -o-border-radius: 0!important;
  1370. padding: 10px!important;
  1371. border: 1px solid #fff!important;
  1372. background-color: #fff!important;
  1373.  
  1374.  
  1375. }
  1376.  
  1377. .tmblr-lightbox .lightbox-caption { visibility: hidden; }
  1378.  
  1379. /*t*/
  1380.  
  1381. .titre {
  1382. text-align:center;
  1383. font-weight:bold;
  1384. font-size:1.5em;
  1385. margin-bottom:15px;
  1386. line-height:160%;
  1387. text-transform:uppercase;
  1388. }
  1389.  
  1390. /*quotes*/
  1391.  
  1392. .quotes {
  1393. font-weight:400;
  1394. font-size:1.5em;
  1395. text-transform:uppercase;
  1396. display:inline;
  1397. line-height:160%;
  1398. }
  1399.  
  1400. .speaker {
  1401. margin-top:25px;
  1402. text-align:right;
  1403. }
  1404.  
  1405. /*chat*/
  1406.  
  1407. .chats {
  1408. line-height:22px;
  1409. padding:5px;
  1410. }
  1411.  
  1412. .chats strong {
  1413. font-family:'century gothic', arial, sans-serif;
  1414. }
  1415.  
  1416. /*links*/
  1417.  
  1418. .remus a {
  1419. color: {color:accent1};
  1420. text-shadow: 0 0 1px rgba(111,134,134,0.3);
  1421. width:100%;
  1422. text-align:center;
  1423. font-size:2em;
  1424. background:#fafafa;
  1425. padding:15px;
  1426. margin-top:0;
  1427. }
  1428.  
  1429. .remus a::before {
  1430. color: {color:accent1};
  1431. content: attr(data-hover);
  1432. position: absolute;
  1433. opacity: 0;
  1434. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1435. -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1436. -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1437. transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1438. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1439. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1440. transition: transform 0.3s, opacity 0.3s;
  1441. pointer-events: none;
  1442. }
  1443.  
  1444. .remus a:hover::before,
  1445. .remus a:focus::before {
  1446. -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1447. -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1448. transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1449. opacity: 1;
  1450. }
  1451.  
  1452. /*ask posts*/
  1453.  
  1454. .ask_cont {
  1455. width:100%;
  1456. padding:10px;
  1457. display:flex;
  1458. display: -webkit-flex;
  1459. display: -moz-flex;
  1460. display: -ms-flex;
  1461. align-items: center;
  1462. -webkit-align-items:center;
  1463. -ms-align-items:center;
  1464. }
  1465.  
  1466. .questions a {
  1467.  
  1468. font-size:16px;
  1469. font-weight:700;
  1470. color:{color:accent1};
  1471. text-decoration:underline;
  1472. transition: all 0.3s ease-in-out;
  1473. -webkit-transition: all 0.3s ease-in-out;
  1474. -moz-transition: all 0.3s ease-in-out;
  1475. -o-transition: all 0.3s ease-in-out;
  1476. }
  1477.  
  1478. .questions a:hover {
  1479. color:{color:hover};
  1480. transition: all 0.3s ease-in-out;
  1481. -webkit-transition: all 0.3s ease-in-out;
  1482. -moz-transition: all 0.3s ease-in-out;
  1483. -o-transition: all 0.3s ease-in-out;
  1484. }
  1485.  
  1486. .questions {
  1487.  
  1488. left:15px;
  1489. position:relative;
  1490. text-align:left;
  1491. {block:if400px}
  1492. width:300px;
  1493. {/block:if400px}
  1494. {block:ifnot400px}
  1495. width:400px;
  1496. {/block:ifnot400px}
  1497. color:#000;
  1498. font-weight:normal;
  1499. padding:10px 15px 20px 15px;
  1500. background: transparent;
  1501. word-wrap:break-word;
  1502. }
  1503.  
  1504.  
  1505. .asker img {
  1506. border-radius:50px;
  1507. -moz-border-radius: 50px;
  1508. -webkit-border-radius: 50px;
  1509. -o-border-radius: 50px;
  1510. transition: all 0.3s ease-in-out;
  1511. -webkit-transition: all 0.3s ease-in-out;
  1512. -moz-transition: all 0.3s ease-in-out;
  1513. -o-transition: all 0.3s ease-in-out;
  1514.  
  1515. }
  1516.  
  1517. .asker img:hover {
  1518.  
  1519. opacity:0.5;
  1520. -moz-transform: rotate(360deg); /* IE 9 */
  1521. -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  1522. transform: rotate(360deg);
  1523.  
  1524. transition: all 0.3s ease-in-out;
  1525. -webkit-transition: all 0.3s ease-in-out;
  1526. -moz-transition: all 0.3s ease-in-out;
  1527. -o-transition: all 0.3s ease-in-out;
  1528. }
  1529.  
  1530. /*audio posts*/
  1531.  
  1532. .flitwick {
  1533. width:100%;
  1534. display:flex;
  1535. display:-webkit-flex;
  1536. display:-moz-flex;
  1537. display:-ms-flex;
  1538. align-items:center;
  1539. -webkit-align-itens:center;
  1540. -moz-align-items:center;
  1541. -ms-align-items:center;
  1542. display: -webkit-box;
  1543. -webkit-box-align: center;
  1544. position:relative;
  1545. }
  1546.  
  1547. .grammy {
  1548. width:100px;
  1549. height:100px;
  1550. position:relative;
  1551. margin-left:0;
  1552. }
  1553.  
  1554.  
  1555. .mariah {
  1556. position:absolute;
  1557. background:#fff;
  1558. z-index:10;
  1559. opacity:0;
  1560. margin-top:10px;
  1561. margin-left:10px;
  1562. width:80px;
  1563. height:80px;
  1564. text-align:center;
  1565. transition: all 0.3s ease-in-out;
  1566. -webkit-transition: all 0.3s ease-in-out;
  1567. -moz-transition: all 0.3s ease-in-out;
  1568. -o-transition: all 0.3s ease-in-out;
  1569. }
  1570.  
  1571. .mariah:hover {
  1572. opacity:0.8;
  1573. transition: all 0.3s ease-in-out;
  1574. -webkit-transition: all 0.3s ease-in-out;
  1575. -moz-transition: all 0.3s ease-in-out;
  1576. -o-transition: all 0.3s ease-in-out;
  1577. }
  1578.  
  1579. .playbox {
  1580. width:40px;
  1581. height:40px;
  1582. margin-top:25px;
  1583. margin-left:20px;
  1584. overflow:hidden;
  1585. }
  1586.  
  1587.  
  1588.  
  1589. .taylor {
  1590. {block:if400px}
  1591. width:300px;
  1592. {/block:if400px}
  1593. {block:ifnot400px}
  1594. width:400px;
  1595. {/block:ifnot400px}
  1596. height:100px;
  1597. padding:0;
  1598. margin-left:0px;
  1599. background:#fafafa;
  1600. display:flex;
  1601. display:-webkit-flex;
  1602. display:-moz-flex;
  1603. display:-ms-flex;
  1604. align-items:center;
  1605. -webkit-align-itens:center;
  1606. -moz-align-items:center;
  1607. -ms-align-items:center;
  1608. justify-content:center;
  1609. -webkit-justify-content:center;
  1610. -moz-justify-content:center;
  1611. -ms-justify-content:center;
  1612. display: -webkit-box;
  1613. -webkit-box-align: center;
  1614. -webkit-box-pack: center;
  1615. }
  1616.  
  1617. .swift {
  1618. {block:if400px}
  1619. max-width:250px;
  1620. {/block:if400px}
  1621. {block:ifnot400px}
  1622. max-width:350px;
  1623. {/block:ifnot400px}
  1624. color:#000;
  1625. font-weight:normal;
  1626. }
  1627.  
  1628. .swift b {
  1629. font-family:'raleway', arial,sans-serif;
  1630. font-weight:bold;
  1631. color:{color:accent1};
  1632. }
  1633.  
  1634. /*post info*/
  1635.  
  1636. .footer {
  1637. position:relative;
  1638. {block:if400px}
  1639. width:400px;
  1640. {/block:if400px}
  1641. {block:ifnot400px}
  1642. width: 500px;
  1643. {/block:ifnot400px}
  1644. margin:0 auto;
  1645. padding:5px 0 5px 0;
  1646. text-align:center;
  1647. }
  1648.  
  1649. .footer a {
  1650. font-weight:bold;
  1651. display:inline-block;
  1652. padding:5px;
  1653. margin-left:10px;
  1654. color:{color:accent1};
  1655. text-transform:uppercase;
  1656. transition: all 0.3s ease-in-out;
  1657. -webkit-transition: all 0.3s ease-in-out;
  1658. -moz-transition: all 0.3s ease-in-out;
  1659. -o-transition: all 0.3s ease-in-out;
  1660. }
  1661.  
  1662. .footer a:hover {
  1663. color:{color:hover};
  1664. transition: all 0.3s ease-in-out;
  1665. -webkit-transition: all 0.3s ease-in-out;
  1666. -moz-transition: all 0.3s ease-in-out;
  1667. -o-transition: all 0.3s ease-in-out;
  1668. }
  1669.  
  1670. .tgs {
  1671. text-align:center;
  1672. {block:if400px}
  1673. width:400px;
  1674. {/block:if400px}
  1675. {block:ifnot400px}
  1676. width: 500px;
  1677. {/block:ifnot400px}
  1678. margin:5px auto;
  1679. word-wrap: break-word;
  1680. color:transparent;
  1681.  
  1682. }
  1683.  
  1684. .tgs a {
  1685. font-weight:normal;
  1686. display:inline-block;
  1687. padding:5px;
  1688. color:{color:tags};
  1689. text-transform:none;
  1690. font-style:italic;
  1691.  
  1692. }
  1693.  
  1694. /*notes*/
  1695. .notes {
  1696. {block:ifnot400px}
  1697. width:500px;
  1698. {/block:ifnot400px}
  1699. {block:if400px}
  1700. width:400px;
  1701. {/block:if400px}
  1702. padding: 10px;
  1703. text-align:left;
  1704. margin-top:30px;
  1705. margin-left:auto;
  1706. margin-right:auto;
  1707. }
  1708.  
  1709. ol.notes {
  1710. padding: 0px;
  1711. margin: 20px 0px;
  1712. list-style-type: none;
  1713. }
  1714.  
  1715. ol.notes li.note {
  1716. padding: 10px;
  1717. }
  1718.  
  1719. ol.notes li.note img.avatar {
  1720. vertical-align: -4px;
  1721. margin-right: 10px;
  1722. width: 16px;
  1723. height: 16px;
  1724. }
  1725.  
  1726. ol.notes li.note span.action {
  1727. font-weight: normal;
  1728. }
  1729.  
  1730. ol.notes li.note .answer_content {
  1731. font-weight: normal;
  1732. }
  1733.  
  1734. ol.notes li.note blockquote {
  1735. border-color: {color:blockquote};
  1736. padding: 4px 10px;
  1737. margin: 10px 0px 0px 25px;
  1738. }
  1739.  
  1740. ol.notes li.note blockquote a {
  1741. text-decoration: none;
  1742. }
  1743.  
  1744.  
  1745.  
  1746.  
  1747. /*pagination*/
  1748.  
  1749. .pg {
  1750. position:fixed;
  1751. bottom:0;
  1752. font-size:16px;
  1753. line-height:25px;
  1754. height:25px;
  1755. width:100%;
  1756. z-index:10000;
  1757. background:#fff;
  1758. text-align:center;
  1759. word-spacing:20px;
  1760. }
  1761.  
  1762. .pg a {
  1763. display:inline-block
  1764. margin-left:15px;
  1765. color:{color:accent1};
  1766. }
  1767.  
  1768. #tumblr_teaser_follow, .tmblr-iframe--follow-teaser {z-index:100000!important;}
  1769.  
  1770.  
  1771. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1772. #leo {
  1773.  
  1774. font-family: Arial, Sans-Serif;
  1775. text-transform:uppercase;
  1776. text-align:center;
  1777. z-index:99999;
  1778. box-sizing:content-box;
  1779. -webkit-box-sizing:content-box;
  1780.  
  1781. }
  1782.  
  1783. #leo a {
  1784. z-index:99999;
  1785. position:fixed;
  1786. font-size:12px;
  1787. line-height:16px;
  1788. width:18px;
  1789. height:18px;
  1790. font-weight:300;
  1791. bottom:10px;
  1792. right:10px;
  1793. color:#000;
  1794. background:rgba(255,255,255,0.4);
  1795. padding:5px;
  1796. transition: all 1s ease-in-out;
  1797. -webkit-transition: all 1s ease-in-out;
  1798. -o-transition: all 1s ease-in-out;
  1799. -moz-transition: all 1s ease-in-out;
  1800. box-sizing:content-box;
  1801. -webkit-box-sizing:content-box;
  1802. }
  1803.  
  1804. #leo a:hover {
  1805. background-color:rgba(0,0,0,1);
  1806. color:#fff;
  1807. border-radius:50%;
  1808. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1809. -moz-animation: hermione 1s;
  1810. -o-animation: hermione 1s;
  1811. animation: hermione 1s;
  1812. animation-timing-function: ease-in-out;
  1813. -webkit-animation-timing-function: ease-in-out;
  1814. -moz-animation-timing-function: ease-in-out;
  1815. -o-animation-timing-function: ease-in-out;
  1816.  
  1817. -moz-transform: rotate(720deg); /* IE 9 */
  1818. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1819. transform: rotate(720deg);
  1820.  
  1821. transition: all 1s ease-in-out;
  1822. -webkit-transition: all 1s ease-in-out;
  1823. -o-transition: all 1s ease-in-out;
  1824. -moz-transition: all 1s ease-in-out;
  1825.  
  1826.  
  1827. }
  1828.  
  1829. @-webkit-keyframes hermione {
  1830. 0% {color:#000;}
  1831. 25% {color:#ACE4EA;}
  1832. 50% {color:#FFFBDD;}
  1833. 75% {color:#ACE4EA;}
  1834. 100% {color:#fff;}
  1835. }
  1836. @-moz-keyframes hermione {
  1837. 0% {color:#000;}
  1838. 25% {color:#ACE4EA;}
  1839. 50% {color:#FFFBDD;}
  1840. 75% {color:#ACE4EA;}
  1841. 100% {color:#fff;}
  1842. }
  1843. @-o-keyframes hermione {
  1844. 0% {color:#000;}
  1845. 25% {color:#ACE4EA;}
  1846. 50% {color:#FFFBDD;}
  1847. 75% {color:#ACE4EA;}
  1848. 100% {color:#fff;}
  1849. }
  1850.  
  1851. @keyframes hermione {
  1852. 0% {color:#000;}
  1853. 25% {color:#ACE4EA;}
  1854. 50% {color:#FFFBDD;}
  1855. 75% {color:#ACE4EA;}
  1856. 100% {color:#fff;}
  1857. }
  1858. /*END OF CREDIT*/
  1859.  
  1860. </style>
  1861. </head>
  1862. <body>
  1863.  
  1864.  
  1865.  
  1866.  
  1867. <div id="container">
  1868.  
  1869. <div id="sb1">
  1870.  
  1871. <div id="sidebar">
  1872. <div class="lside">
  1873. <img src="{image:sidebar}">
  1874. </div>
  1875.  
  1876. <div class="circle">
  1877. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu" style="transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px); touch-action: none; -webkit-user-select: none;">
  1878. <style>
  1879. #menu {
  1880. display: block;
  1881. margin: 0 auto;
  1882. overflow: visible;
  1883. }
  1884.  
  1885. .item .sector {
  1886. fill: #fff;
  1887. stroke: #eee;
  1888. stroke-width: 1;
  1889. transition: all 0.3s ease-in-out;
  1890. -webkit-transition: all 0.3s ease-in-out;
  1891. -moz-transition: all 0.3s ease-in-out;
  1892. -o-transition: all 0.3s ease-in-out;
  1893. }
  1894.  
  1895. .item:hover .sector {
  1896. fill: #fafafa;
  1897. transition: all 0.3s ease-in-out;
  1898. -webkit-transition: all 0.3s ease-in-out;
  1899. -moz-transition: all 0.3s ease-in-out;
  1900. -o-transition: all 0.3s ease-in-out;
  1901. }
  1902.  
  1903. .item:focus, .item:active {
  1904. outline:none;
  1905. }
  1906.  
  1907. .menu-trigger {
  1908. fill: {color:accent1};
  1909. pointer-events: auto;
  1910. }
  1911.  
  1912. .menu-trigger:hover {
  1913. cursor: pointer;
  1914. }
  1915. use { fill: {color:accent1}; }
  1916. .item:hover use { fill: #fff; }
  1917. </style>
  1918.  
  1919. <g id="symbolsContainer"> <symbol class="icon icon-" id="icon-1" viewBox="0 0 39 39"><path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#000"></path></symbol>
  1920.  
  1921. <symbol class="icon icon-" id="icon-2" viewBox="0 0 39 39"><!--Replace the contents of this symbol with the content of your icon--><path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#000"></path></symbol>
  1922.  
  1923. <symbol class="icon icon-" id="icon-3" viewBox="0 0 39 39"><!--Replace the contents of this symbol with the content of your icon--><path d="M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8s4.029-8 9-8c4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM16 0c8.702 0 15.781 5.644 15.995 12.672-1.537-0.685-3.237-1.047-4.995-1.047-2.986 0-5.807 1.045-7.942 2.943-2.214 1.968-3.433 4.607-3.433 7.432 0 1.396 0.298 2.747 0.867 3.993-0.163 0.004-0.327 0.007-0.492 0.007-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z" fill="#000"></path></symbol>
  1924.  
  1925. <symbol class="icon icon-" id="icon-4" viewBox="0 0 39 39"><!--Replace the contents of this symbol with the content of your icon--><path d="M8 4v28l10-10 10 10v-28zM24 0h-20v28l2-2v-24h18z" fill="#000"></path></symbol>
  1926.  
  1927. <symbol class="icon icon-" id="icon-5" viewBox="0 0 39 39"><!--Replace the contents of this symbol with the content of your icon--><path d="M28 0h-28v32h32v-28l-4-4zM16 4h4v8h-4v-8zM28 28h-24v-24h2v10h18v-10h2.343l1.657 1.657v22.343z" fill="#000"></path></symbol>
  1928.  
  1929. <symbol class="icon icon-" id="icon-6" viewBox="0 0 39 39"><!--Replace the contents of this symbol with the content of your icon--><path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13 5.82-13 13-13zM16 18.711c3.623 0 7.070-0.963 10-2.654-0.455 5.576-4.785 9.942-10 9.942s-9.544-4.371-10-9.947c2.93 1.691 6.377 2.658 10 2.658zM8 11c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM20 11c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#000"></path></symbol>
  1930.  
  1931. </g>
  1932. <g id="itemsContainer">
  1933. <a class="item poplight" id="item-1" role="link" tabindex="0" href="#?w=700" rel="navi" xlink:title="Navi" xlink:target="_parent" transform="matrix(1,0,0,1,0,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-1" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1934.  
  1935. <a class="item" id="item-2" role="link" tabindex="0" xlink:href="/" xlink:title="Home" xlink:target="_parent" transform="matrix(0.5,-0.86602,0.86602,0.5,-91.5063509461097,341.5063509461096)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-2" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1936.  
  1937.  
  1938. <a class="item poplight" id="item-3" role="link" tabindex="0" href="#?w=500" rel="owl" xlink:title="Message" xlink:target="_parent" transform="matrix(-0.49999,-0.86602,0.86602,-0.49999,158.49364905389024,591.5063509461097)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z" style="cursor:pointer;"></path><use xlink:href="#icon-3" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1939.  
  1940. {block:ifnotupdatetabs}
  1941. <a class="item" id="item-4" role="link" tabindex="0" xlink:href="{text:link10 URL}" xlink:title="{text:link10}" xlink:target="_parent" transform="matrix(-1,0,0,-1,500,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-4" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1942. {/block:ifnotupdatetabs}
  1943.  
  1944. {block:ifupdatetabs}
  1945. <a class="item poplight" id="item-4" role="link" tabindex="0" href="#?w=400" rel="upd" xlink:title="Updates" xlink:target="_parent" transform="matrix(-1,0,0,-1,500,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-4" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1946. {/block:ifupdatetabs}
  1947.  
  1948.  
  1949. <a class="item poplight" id="item-5" role="link" tabindex="0" href="#?w=800" rel="arch" xlink:title="Archive" xlink:target="_parent" transform="matrix(-0.5,0.86602,-0.86602,-0.5,591.5063509461097,158.4936490538905)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-5" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1950.  
  1951.  
  1952. <a class="item poplight" id="item-6" role="link" tabindex="0" href="#?w=500" rel="ab" xlink:title="Info" xlink:target="_parent" transform="matrix(0.5,0.86602,-0.86602,0.5,341.5063509461096,-91.5063509461097)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path><use xlink:href="#icon-6" width="39" height="39" x="374.2602233886719" y="147.5" transform="rotate(60 393.7602233886719 167)"></use></a>
  1953.  
  1954. </g>
  1955. <g id="trigger" class="trigger menu-trigger">
  1956. <circle cx="250" cy="250" r="60"></circle>
  1957. <text id="label" text-anchor="middle" x="250" y="260" fill="#fff" font-size="3.5em">+</text>
  1958. </g>
  1959. </svg>
  1960. </div>
  1961. </div>
  1962.  
  1963. </div>
  1964.  
  1965. <div id="sb2">
  1966.  
  1967. {block:Likes}
  1968. {block:ifshowlikes}
  1969. <div id="sidebar2">
  1970.  
  1971.  
  1972.  
  1973. <h2>Liked Posts</h2>
  1974.  
  1975. <div id="likes_container">
  1976. {Likes limit=10 summarize="25" width="200"}<br>
  1977.  
  1978. </div>
  1979.  
  1980. <a href="http://www.tumblr.com/liked/by/{Name}" style="width:100%;">More</a>
  1981.  
  1982.  
  1983.  
  1984.  
  1985.  
  1986. </div>
  1987. {/block:ifshowlikes}
  1988. {/block:Likes}
  1989.  
  1990. </div>
  1991.  
  1992. <div id="header">
  1993. <a class="link siriusblack" href="/">{Title}<span data-letters="{Title}"></span><span data-letters="{Title}"></span></a>
  1994.  
  1995. <nav class="prongs" id="prongs">
  1996. <a href="/"><span data-hover="Home">Home</span></a>
  1997. <a href="#?w=500" rel="owl" class="poplight"><span data-hover="Ask">Ask</span></a>
  1998. <a href="#?w=500" rel="ab" class="poplight"><span data-hover="Info">Info</span></a>
  1999. <a href="#?w=700" rel="navi" class="poplight"><span data-hover="Links">Links</span></a>
  2000.  
  2001. {block:ifupdatetabs}
  2002. <a href="#?w=400" rel="upd" class="poplight"><span data-hover="Updates">Updates</span></a>
  2003. {/block:ifupdatetabs}
  2004.  
  2005.  
  2006. </nav>
  2007.  
  2008. </div>
  2009.  
  2010. <div id="entries">
  2011.  
  2012. {block:Posts}
  2013.  
  2014.  
  2015. {block:IndexPage}
  2016. {block:iftransparentpermalink}
  2017.  
  2018.  
  2019. {block:Photo}
  2020. <section>
  2021. {block:Date}
  2022. <div class="perma_hold">
  2023. <div class="perma">
  2024. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  2025. {block:NoteCount}
  2026. / <a href="{Permalink}">{NoteCountWithLabel}</a>
  2027. {/block:NoteCount}
  2028. <div class="info">
  2029. <a href="{ReblogURL}">reblog</a>
  2030. {block:RebloggedFrom}
  2031. <a href="{ReblogParentURL}">via</a>
  2032. {block:ContentSource}
  2033. <a href="{SourceURL}">source</a>
  2034. {/block:ContentSource}
  2035. {/block:RebloggedFrom}
  2036. </div>
  2037. {block:HasTags}<div class="tags">{block:Tags}
  2038. <a href="{TagURL}">#{Tag}</a>
  2039. {/block:Tags}</div>{/block:HasTags}
  2040. </div>
  2041. </div>
  2042. {/block:Date}
  2043.  
  2044. <div class="posts">
  2045. {LinkOpenTag}
  2046. <img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  2047.  
  2048. {block:ifcaption}
  2049. {block:Caption}{Caption}{/block:Caption}
  2050. {/block:ifcaption}
  2051. </div>
  2052.  
  2053. </section>
  2054.  
  2055. {/block:Photo}
  2056.  
  2057. {block:Photoset}
  2058. <section>
  2059. {block:Date}
  2060. <div class="perma_hold">
  2061. <div class="perma">
  2062. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  2063. {block:NoteCount}
  2064. / <a href="{Permalink}">{NoteCountWithLabel}</a>
  2065. {/block:NoteCount}
  2066. <div class="info">
  2067. <a href="{ReblogURL}">reblog</a>
  2068. {block:RebloggedFrom}
  2069. <a href="{ReblogParentURL}">via</a>
  2070. {block:ContentSource}
  2071. <a href="{SourceURL}">source</a>
  2072. {/block:ContentSource}
  2073. {/block:RebloggedFrom}
  2074. </div>
  2075. {block:HasTags}<div class="tags">{block:Tags}
  2076. <a href="{TagURL}">#{Tag}</a>
  2077. {/block:Tags}</div>{/block:HasTags}
  2078. </div>
  2079. </div>
  2080. {/block:Date}
  2081.  
  2082. <div class="posts">
  2083. {Photoset}
  2084.  
  2085. {block:ifcaption}
  2086. {block:Caption}{Caption}{/block:Caption}
  2087. {/block:ifcaption}
  2088. </div>
  2089.  
  2090. </section>
  2091.  
  2092. {/block:Photoset}
  2093.  
  2094. {block:Video}
  2095.  
  2096. <section>
  2097. {block:Date}
  2098. <div class="perma_hold">
  2099. <div class="perma">
  2100. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  2101. {block:NoteCount}
  2102. / <a href="{Permalink}">{NoteCountWithLabel}</a>
  2103. {/block:NoteCount}
  2104. <div class="info">
  2105. <a href="{ReblogURL}">reblog</a>
  2106. {block:RebloggedFrom}
  2107. <a href="{ReblogParentURL}">via</a>
  2108. {block:ContentSource}
  2109. <a href="{SourceURL}">source</a>
  2110. {/block:ContentSource}
  2111. {/block:RebloggedFrom}
  2112. </div>
  2113. {block:HasTags}<div class="tags">{block:Tags}
  2114. <a href="{TagURL}">#{Tag}</a>
  2115. {/block:Tags}</div>{/block:HasTags}
  2116. </div>
  2117. </div>
  2118. {/block:Date}
  2119.  
  2120. <div class="posts">
  2121. {block:if400px}
  2122. {Video-400}
  2123. {/block:if400px}
  2124. {block:ifnot400px}
  2125. {Video-500}
  2126. {/block:ifnot400px}
  2127.  
  2128. {block:ifcaption}
  2129. {block:Caption}{Caption}{/block:Caption}
  2130. {/block:ifcaption}
  2131. </div>
  2132.  
  2133. </section>
  2134.  
  2135. {/block:Video}
  2136.  
  2137.  
  2138. {block:Quote}
  2139. <section>
  2140. {block:Date}
  2141. <div class="perma_hold">
  2142. <div class="perma">
  2143. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  2144. {block:NoteCount}
  2145. / <a href="{Permalink}">{NoteCountWithLabel}</a>
  2146. {/block:NoteCount}
  2147. <div class="info">
  2148. <a href="{ReblogURL}">reblog</a>
  2149. {block:RebloggedFrom}
  2150. <a href="{ReblogParentURL}">via</a>
  2151. {block:ContentSource}
  2152. <a href="{SourceURL}">source</a>
  2153. {/block:ContentSource}
  2154. {/block:RebloggedFrom}
  2155. </div>
  2156. {block:HasTags}<div class="tags">{block:Tags}
  2157. <a href="{TagURL}">#{Tag}</a>
  2158. {/block:Tags}</div>{/block:HasTags}
  2159. </div>
  2160. </div>
  2161. {/block:Date}
  2162.  
  2163. <div class="posts">
  2164. “
  2165. <div class="quotes">{Quote}</div>
  2166. ”
  2167. {block:Source}
  2168. <div class="speaker">
  2169. {Source}
  2170. </div>
  2171. {/block:Source}
  2172. {/block:ifcaption}
  2173. </div>
  2174.  
  2175. </section>
  2176.  
  2177. {/block:Quote}
  2178.  
  2179. {block:Chat}
  2180.  
  2181. <section>
  2182. {block:Date}
  2183. <div class="perma_hold">
  2184. <div class="perma">
  2185. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  2186. {block:NoteCount}
  2187. / <a href="{Permalink}">{NoteCountWithLabel}</a>
  2188. {/block:NoteCount}
  2189. <div class="info">
  2190. <a href="{ReblogURL}">reblog</a>
  2191. {block:RebloggedFrom}
  2192. <a href="{ReblogParentURL}">via</a>
  2193. {block:ContentSource}
  2194. <a href="{SourceURL}">source</a>
  2195. {/block:ContentSource}
  2196. {/block:RebloggedFrom}
  2197. </div>
  2198. {block:HasTags}<div class="tags">{block:Tags}
  2199. <a href="{TagURL}">#{Tag}</a>
  2200. {/block:Tags}</div>{/block:HasTags}
  2201. </div>
  2202. </div>
  2203. {/block:Date}
  2204.  
  2205. <div class="posts">
  2206.  
  2207. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2208. {block:Lines}
  2209. <div class="chats">
  2210. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  2211. </div>
  2212. {/block:Lines}
  2213. </div>
  2214.  
  2215. </section>
  2216.  
  2217. {/block:Chat}
  2218.  
  2219. {block:Answer}
  2220. <div class="posts" style="margin-top:50px;">
  2221.  
  2222. <div class="ask_cont">
  2223. <div class="asker">
  2224. <a href="{AskerURL}">
  2225. <img src="{AskerPortraitURL-48}" align="left">
  2226. </a>
  2227. </div>
  2228. <div class="questions">
  2229. <p>{Asker}: {Question}</p>
  2230.  
  2231. </div>
  2232. </div>
  2233.  
  2234. {Answer}
  2235.  
  2236. </div>
  2237.  
  2238. {block:date}
  2239.  
  2240. <div class="footer">
  2241. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2242.  
  2243. {block:NoteCount}
  2244. <a href="{Permalink}">{NoteCount}+</a>
  2245. {/block:NoteCount}
  2246.  
  2247. {block:RebloggedFrom}
  2248. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2249.  
  2250. {block:ContentSource}
  2251. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2252. {/block:ContentSource}
  2253. {/block:RebloggedFrom}
  2254.  
  2255. <a href="{ReblogURL}">reblog</a>
  2256.  
  2257. </div>
  2258.  
  2259. {block:HasTags}
  2260. <div class="tgs">
  2261. {block:Tags}
  2262. <a href="{TagURL}">{Tag}</a>
  2263. {/block:Tags}
  2264. </div>
  2265. {/block:HasTags}
  2266.  
  2267. {/block:date}
  2268.  
  2269. {/block:Answer}
  2270.  
  2271. {block:Link}
  2272. <div class="posts" style="margin-top:50px;">
  2273. <nav class="remus" id="remus">
  2274. <a href="{URL}" data-hover="{Name}">{Name}</a>
  2275.  
  2276. </nav>
  2277. {block:Description}{Description}{/block:Description}
  2278. </div>
  2279.  
  2280. {block:date}
  2281.  
  2282. <div class="footer">
  2283. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2284.  
  2285. {block:NoteCount}
  2286. <a href="{Permalink}">{NoteCount}+</a>
  2287. {/block:NoteCount}
  2288.  
  2289. {block:RebloggedFrom}
  2290. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2291.  
  2292. {block:ContentSource}
  2293. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2294. {/block:ContentSource}
  2295. {/block:RebloggedFrom}
  2296.  
  2297. <a href="{ReblogURL}">reblog</a>
  2298.  
  2299. </div>
  2300.  
  2301. {block:HasTags}
  2302. <div class="tgs">
  2303. {block:Tags}
  2304. <a href="{TagURL}">{Tag}</a>
  2305. {/block:Tags}
  2306. </div>
  2307. {/block:HasTags}
  2308.  
  2309. {/block:date}
  2310.  
  2311. {/block:Link}
  2312.  
  2313. {block:Text}
  2314. <div class="posts" style="margin-top:50px;">
  2315. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2316. {Body}
  2317. </div>
  2318.  
  2319. {block:date}
  2320.  
  2321. <div class="footer">
  2322. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2323.  
  2324. {block:NoteCount}
  2325. <a href="{Permalink}">{NoteCount}+</a>
  2326. {/block:NoteCount}
  2327.  
  2328. {block:RebloggedFrom}
  2329. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2330.  
  2331. {block:ContentSource}
  2332. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2333. {/block:ContentSource}
  2334. {/block:RebloggedFrom}
  2335.  
  2336. <a href="{ReblogURL}">reblog</a>
  2337.  
  2338. </div>
  2339.  
  2340. {block:HasTags}
  2341. <div class="tgs">
  2342. {block:Tags}
  2343. <a href="{TagURL}">{Tag}</a>
  2344. {/block:Tags}
  2345. </div>
  2346. {/block:HasTags}
  2347.  
  2348. {/block:date}
  2349.  
  2350. {/block:Text}
  2351.  
  2352. {block:Audio}
  2353. <div class="posts" style="margin-top:50px;">
  2354. <div class="flitwick">
  2355.  
  2356. <div class="mariah">
  2357. <div class="playbox">{AudioPlayerWhite}</div>
  2358. </div>
  2359.  
  2360. <div class="grammy">
  2361. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2362. {block:AlbumArt}
  2363. <img src="{AlbumArtURL}" style="position:absolute;">
  2364. {/block:AlbumArt}
  2365. </div>
  2366.  
  2367.  
  2368. <div class="taylor">
  2369. <div class="swift">
  2370. {block:TrackName}
  2371. <b>Song:</b> {TrackName}
  2372. {/block:TrackName}<br>
  2373.  
  2374. {block:Artist}
  2375. <b>Artist:</b> {Artist}
  2376. {/block:Artist}<br>
  2377.  
  2378. {block:Album}
  2379. <b>Album:</b> {Album}
  2380. {/block:Album}
  2381.  
  2382. </div>
  2383. </div>
  2384.  
  2385. </div>
  2386. {block:ifcaption}
  2387. {block:Caption}<p>{Caption}</p>{/block:Caption}
  2388. {/block:ifcaption}
  2389. </div>
  2390.  
  2391. {block:date}
  2392.  
  2393. <div class="footer">
  2394. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2395.  
  2396. {block:NoteCount}
  2397. <a href="{Permalink}">{NoteCount}+</a>
  2398. {/block:NoteCount}
  2399.  
  2400. {block:RebloggedFrom}
  2401. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2402.  
  2403. {block:ContentSource}
  2404. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2405. {/block:ContentSource}
  2406. {/block:RebloggedFrom}
  2407.  
  2408. <a href="{ReblogURL}">reblog</a>
  2409.  
  2410. </div>
  2411.  
  2412. {block:HasTags}
  2413. <div class="tgs">
  2414. {block:Tags}
  2415. <a href="{TagURL}">{Tag}</a>
  2416. {/block:Tags}
  2417. </div>
  2418. {/block:HasTags}
  2419.  
  2420. {/block:date}
  2421.  
  2422. {/block:Audio}
  2423. {/block:iftransparentpermalink}
  2424.  
  2425. {block:ifnottransparentpermalink}
  2426.  
  2427. <div class="posts">
  2428.  
  2429. {block:Text}
  2430. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2431. {Body}
  2432. {/block:Text}
  2433.  
  2434. {block:Photo}
  2435. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  2436. {block:Caption}{Caption}{/block:Caption}
  2437. {/block:Photo}
  2438.  
  2439. {block:Video}
  2440. {block:if400px}
  2441. {Video-400}
  2442. {/block:if400px}
  2443. {block:ifnot400px}
  2444. {Video-500}
  2445. {/block:ifnot400px}
  2446. {block:Caption}{Caption}{/block:Caption}
  2447. {/block:Video}
  2448.  
  2449. {block:Photoset}
  2450.  
  2451. {Photoset}
  2452.  
  2453. {block:Caption}{Caption}{/block:Caption}
  2454.  
  2455. {/block:Photoset}
  2456.  
  2457. {block:Chat}
  2458. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2459. {block:Lines}
  2460. <div class="chats">
  2461. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  2462. </div>
  2463. {/block:Lines}
  2464. {/block:Chat}
  2465.  
  2466. {block:Quote}
  2467. “
  2468. <div class="quotes">{Quote}</div>
  2469. ”
  2470. {block:Source}
  2471. <div class="speaker">
  2472. {Source}
  2473. </div>
  2474. {/block:Source}
  2475. {/block:Quote}
  2476.  
  2477. {block:Link}
  2478. <nav class="remus" id="remus">
  2479. <a href="{URL}" data-hover="{Name}">{Name}</a>
  2480.  
  2481. </nav>
  2482. {block:Description}{Description}{/block:Description}
  2483.  
  2484. {/block:Link}
  2485.  
  2486. {block:Audio}
  2487. <div class="flitwick">
  2488.  
  2489. <div class="mariah">
  2490. <div class="playbox">{AudioPlayerWhite}</div>
  2491. </div>
  2492.  
  2493. <div class="grammy">
  2494. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2495. {block:AlbumArt}
  2496. <img src="{AlbumArtURL}" style="position:absolute;">
  2497. {/block:AlbumArt}
  2498. </div>
  2499.  
  2500.  
  2501. <div class="taylor">
  2502. <div class="swift">
  2503. {block:TrackName}
  2504. <b>Song:</b> {TrackName}
  2505. {/block:TrackName}<br>
  2506.  
  2507. {block:Artist}
  2508. <b>Artist:</b> {Artist}
  2509. {/block:Artist}<br>
  2510.  
  2511. {block:Album}
  2512. <b>Album:</b> {Album}
  2513. {/block:Album}
  2514.  
  2515. </div>
  2516. </div>
  2517.  
  2518. </div>
  2519. {block:Caption}<p>{Caption}</p>{/block:Caption}
  2520. {/block:Audio}
  2521.  
  2522. {block:Answer}
  2523.  
  2524. <div class="ask_cont">
  2525. <div class="asker">
  2526. <a href="{AskerURL}">
  2527. <img src="{AskerPortraitURL-48}" align="left">
  2528. </a>
  2529. </div>
  2530. <div class="questions">
  2531. <p>{Asker}: {Question}</p>
  2532.  
  2533. </div>
  2534. </div>
  2535.  
  2536. {Answer}
  2537. {/block:Answer}
  2538.  
  2539. </div>
  2540.  
  2541. {block:date}
  2542.  
  2543. <div class="footer">
  2544. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2545.  
  2546. {block:NoteCount}
  2547. <a href="{Permalink}">{NoteCount}+</a>
  2548. {/block:NoteCount}
  2549.  
  2550. {block:RebloggedFrom}
  2551. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2552.  
  2553. {block:ContentSource}
  2554. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2555. {/block:ContentSource}
  2556. {/block:RebloggedFrom}
  2557.  
  2558. <a href="{ReblogURL}">reblog</a>
  2559.  
  2560. </div>
  2561.  
  2562. {block:HasTags}
  2563. <div class="tgs">
  2564. {block:Tags}
  2565. <a href="{TagURL}">{Tag}</a>
  2566. {/block:Tags}
  2567. </div>
  2568. {/block:HasTags}
  2569.  
  2570. {/block:date}
  2571.  
  2572. {/block:ifnottransparentpermalink}
  2573.  
  2574. {/block:IndexPage}
  2575.  
  2576.  
  2577.  
  2578. {block:Permalinkpage}
  2579. <div class="posts" style="margin-top:50px;">
  2580.  
  2581. {block:Text}
  2582. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2583. {Body}
  2584. {/block:Text}
  2585.  
  2586. {block:Photo}
  2587. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  2588. {block:Caption}{Caption}{/block:Caption}
  2589. {/block:Photo}
  2590.  
  2591. {block:Video}
  2592. {block:if400px}
  2593. {Video-400}
  2594. {/block:if400px}
  2595. {block:ifnot400px}
  2596. {Video-500}
  2597. {/block:ifnot400px}
  2598. {block:Caption}{Caption}{/block:Caption}
  2599. {/block:Video}
  2600.  
  2601. {block:Photoset}
  2602.  
  2603. {Photoset}
  2604.  
  2605. {block:Caption}{Caption}{/block:Caption}
  2606.  
  2607. {/block:Photoset}
  2608.  
  2609. {block:Chat}
  2610. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  2611. {block:Lines}
  2612. <div class="chats">
  2613. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  2614. </div>
  2615. {/block:Lines}
  2616. {/block:Chat}
  2617.  
  2618. {block:Quote}
  2619. “
  2620. <div class="quotes">{Quote}</div>
  2621. ”
  2622. {block:Source}
  2623. <div class="speaker">
  2624. {Source}
  2625. </div>
  2626. {/block:Source}
  2627. {/block:Quote}
  2628.  
  2629. {block:Link}
  2630. <nav class="remus" id="remus">
  2631. <a href="{URL}" data-hover="{Name}">{Name}</a>
  2632.  
  2633. </nav>
  2634. {block:Description}{Description}{/block:Description}
  2635.  
  2636. {/block:Link}
  2637.  
  2638. {block:Audio}
  2639. <div class="flitwick">
  2640.  
  2641. <div class="mariah">
  2642. <div class="playbox">{AudioPlayerWhite}</div>
  2643. </div>
  2644.  
  2645. <div class="grammy">
  2646. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2647. {block:AlbumArt}
  2648. <img src="{AlbumArtURL}" style="position:absolute;">
  2649. {/block:AlbumArt}
  2650. </div>
  2651.  
  2652.  
  2653. <div class="taylor">
  2654. <div class="swift">
  2655. {block:TrackName}
  2656. <b>Song:</b> {TrackName}
  2657. {/block:TrackName}<br>
  2658.  
  2659. {block:Artist}
  2660. <b>Artist:</b> {Artist}
  2661. {/block:Artist}<br>
  2662.  
  2663. {block:Album}
  2664. <b>Album:</b> {Album}
  2665. {/block:Album}
  2666.  
  2667. </div>
  2668. </div>
  2669.  
  2670. </div>
  2671. {block:Caption}<p>{Caption}</p>{/block:Caption}
  2672. {/block:Audio}
  2673.  
  2674. {block:Answer}
  2675.  
  2676. <div class="ask_cont">
  2677. <div class="asker">
  2678. <a href="{AskerURL}">
  2679. <img src="{AskerPortraitURL-48}" align="left">
  2680. </a>
  2681. </div>
  2682. <div class="questions">
  2683. <p>{Asker}: {Question}</p>
  2684.  
  2685. </div>
  2686. </div>
  2687.  
  2688. {Answer}
  2689. {/block:Answer}
  2690.  
  2691. </div>
  2692.  
  2693. {block:date}
  2694.  
  2695. <div class="footer">
  2696. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  2697.  
  2698. {block:NoteCount}
  2699. <a href="{Permalink}">{NoteCount}+</a>
  2700. {/block:NoteCount}
  2701.  
  2702. {block:RebloggedFrom}
  2703. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2704.  
  2705. {block:ContentSource}
  2706. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  2707. {/block:ContentSource}
  2708. {/block:RebloggedFrom}
  2709.  
  2710. <a href="{ReblogURL}">reblog</a>
  2711.  
  2712. </div>
  2713.  
  2714. {block:HasTags}
  2715. <div class="tgs">
  2716. {block:Tags}
  2717. <a href="{TagURL}">{Tag}</a>
  2718. {/block:Tags}
  2719. </div>
  2720. {/block:HasTags}
  2721.  
  2722. {/block:date}
  2723.  
  2724. {block:date}
  2725. <div class="posts">
  2726. {block:NoteCount}
  2727. <div class="notes">
  2728. <center><h1>Notes</h1></center>
  2729. {block:PostNotes}
  2730. {PostNotes}
  2731. {/block:PostNotes}
  2732. </div>
  2733. {block:NoteCount}
  2734. </div>
  2735. {/block:date}
  2736.  
  2737. {/block:Permalinkpage}
  2738.  
  2739.  
  2740.  
  2741. {/block:Posts}
  2742.  
  2743.  
  2744. </div>
  2745.  
  2746.  
  2747. </div>
  2748.  
  2749. {block:IndexPage}
  2750. {block:Pagination}
  2751.  
  2752. <div class="pg">
  2753. {block:PreviousPage}
  2754. <a href="{PreviousPage}">&#8592;Back</a>
  2755. {/block:PreviousPage}
  2756. {block:NextPage}
  2757. <a href="{NextPage}">Forth&#8594;</a>
  2758. {/block:NextPage}
  2759. </div>
  2760.  
  2761. {/block:Pagination}
  2762. {/block:IndexPage}
  2763.  
  2764.  
  2765. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  2766. <div id="leo">
  2767. <a href="http://hermionejean.co.vu">♚</a>
  2768. </div>
  2769. <!--END OF CREDIT-->
  2770.  
  2771.  
  2772. <script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
  2773.  
  2774. <script>
  2775. var svg = document.getElementById('menu'),
  2776. itemsContainer = document.getElementById('itemsContainer'),
  2777. trigger = document.getElementById('trigger'),
  2778. label = trigger.querySelectorAll('#label')[0],
  2779. items = Snap(itemsContainer),
  2780. originalTransform = itemsContainer.getAttribute("transform"),
  2781. open = false;
  2782.  
  2783. //close items
  2784. items.animate({
  2785. transform: "s0,0,250,250",
  2786. opacity: 0
  2787. }, .005);
  2788. svg.style.pointerEvents = "none";
  2789. //attach listener
  2790. trigger.addEventListener('click', toggleMenu, false);
  2791.  
  2792. //handle click
  2793. function toggleMenu(event) {
  2794. if (!event) var event = window.event;
  2795. event.stopPropagation();
  2796. open = !open;
  2797.  
  2798. if (!open) {
  2799. items.animate({
  2800. transform: "s0,0,250,250",
  2801. opacity: 0
  2802. }, 400, mina.backin);
  2803. label.innerHTML = "+";
  2804. svg.style.pointerEvents = "none";
  2805. } else {
  2806. items.animate({
  2807. transform: originalTransform,
  2808. opacity: 1
  2809. }, 1000, mina.elastic);
  2810. label.innerHTML = "-";
  2811. svg.style.pointerEvents = "auto";
  2812. }
  2813.  
  2814. }
  2815.  
  2816. svg.onclick = function (e) {
  2817. e.stopPropagation();
  2818. }
  2819.  
  2820. </script>
  2821.  
  2822.  
  2823. </body>
  2824. <div id="owl" class="popup_block" style="top:38%;">
  2825. <p><h1>{AskLabel}</h1></p>
  2826. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  2827. </iframe>
  2828. </div>
  2829. </div></div></div></div></div></div></div></div></div></div>
  2830.  
  2831. <div id="ab" class="popup_block">
  2832. <p><h1>Profile</h1></p>
  2833.  
  2834. <div class="grid">
  2835. <figure class="anto">
  2836. <img src="{image:blogger}"/>
  2837. <figcaption>
  2838. <h2><span>{text:nom}</span> ({text:info})</h2>
  2839. {block:description}<p>{description}</p>{/block:description}
  2840. <p>{text:bio}</p>
  2841. </figcaption>
  2842. </figure>
  2843. </div>
  2844. </div>
  2845. </div></div></div></div></div></div></div></div></div></div>
  2846.  
  2847. <div id="navi" class="popup_block" style="top:42%;">
  2848.  
  2849. <p><h1>Navigation</h1></p>
  2850.  
  2851. <nav class="iniesta" id="iniesta">
  2852. <a href="{text:link1 URL}"><span data-hover="{text:link1}">{text:link1}</span></a>
  2853. <a href="{text:link2 URL}"><span data-hover="{text:link2}">{text:link2}</span></a>
  2854. <a href="{text:link3 URL}"><span data-hover="{text:link3}">{text:link3}</span></a>
  2855. <a href="{text:link4 URL}"><span data-hover="{text:link4}">{text:link4}</span></a>
  2856. <a href="{text:link5 URL}"><span data-hover="{text:link5}">{text:link5}</span></a>
  2857. <a href="{text:link6 URL}"><span data-hover="{text:link6}">{text:link6}</span></a>
  2858. <a href="{text:link7 URL}"><span data-hover="{text:link7}">{text:link7}</span></a>
  2859. <a href="{text:link8 URL}"><span data-hover="{text:link8}">{text:link8}</span></a>
  2860. <a href="{text:link9 URL}"><span data-hover="{text:link9}">{text:link9}</span></a>
  2861.  
  2862. </nav>
  2863. </div>
  2864. </div></div></div></div></div></div></div></div></div></div>
  2865.  
  2866. <div id="upd" class="popup_block" style="top:40%;">
  2867. <p><h1>Updates</h1></p>
  2868. <div id="updates">
  2869. <p><b>Reading:</b> {text:reading}<br>
  2870. <b>Watching:</b> {text:watching}<br>
  2871. <b>Listening:</b> {text:listening}<br>
  2872. <b>Working On:</b> {text:working on}</p>
  2873.  
  2874. <p>{text:updates}</p>
  2875. </div>
  2876.  
  2877. </div>
  2878. </div></div></div></div></div></div></div></div></div></div>
  2879.  
  2880. <div id="arch" class="popup_block" style="height:500px;">
  2881. <iframe src="http://{Name}.tumblr.com/archive" height="500" width="800">
  2882. </iframe>
  2883.  
  2884. </div>
  2885.  
  2886. </div></div></div></div></div></div></div></div></div></div>
  2887.  
  2888. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!