API tools faq
paste
Advertisement
hermionemessi

Theme 06

hermionemessi
Sep 22nd, 2015
1,073
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <!--THEME 06 LA Hallucinations by hermionegrangcr (hermionejean.co.vu)
  5.  
  6. THEME BLOG: grangersdesigns (granger.cf)
  7.  
  8.  
  9. ♛ ♛ ♛
  10. ♛♛♛ ♛♛♛ ♛♛♛
  11. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  12. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr (hermionejean.co.vu)
  15.  
  16.  
  17. TERMS OF USE:
  18.  
  19. ♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
  20.  
  21. ♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
  22.  
  23. ♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
  24.  
  25. ♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
  26.  
  27. THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
  28.  
  29. -->
  30.  
  31.  
  32. <head>
  33.  
  34. <title>{Title}</title>
  35. <meta charset="UTF-8" />
  36. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  37. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  38. <link rel="shortcut icon" href="{Favicon}">
  39.  
  40. {block:Description}
  41. <meta name="description" content="{MetaDescription}"/>
  42. {/block:Description}
  43.  
  44. <meta name="image:profile" content="http://static.tumblr.com/f75d88f0d4ca272362db789619827992/xbvpdcx/0Avnv0mwy/tumblr_static_5z1as02ydikokggow8cg4s8w0.jpg">
  45. <meta name="image:fullscreen bg" content="http://static.tumblr.com/a9986351fcfa95c8483ef6d67bbbdae6/xbvpdcx/Zi2ntp45i/tumblr_static_5e2qtth58jokow4wo8448cwcs.jpg">
  46. <meta name="image:grid bg" content="https://41.media.tumblr.com/bf8dfe2e6ff97f506306344fe021504e/tumblr_ndpupoDTro1rnmh3no2_250.png">
  47.  
  48. <meta name="select:background"content="colour_bg"title="simple">
  49. <meta name="select:background"content="gradient_bg"title="gradient">
  50. <meta name="select:background"content="img_bg"title="fullscreen image">
  51. <meta name="select:background"content="r_bg"title="repeated background">
  52.  
  53. <meta name="select:post width"content="post500"title="500px">
  54. <meta name="select:post width"content="post400"title="400px">
  55. <meta name="select:post width"content="post250"title="250px">
  56.  
  57. <meta name="if:gradient border" content="0">
  58. <meta name="if:crosshair hover" content="1">
  59. <meta name="if:scroll to top button" content="0">
  60.  
  61. <meta name="color:links" content="#cdcdcd">
  62. <meta name="color:tags" content="#cdcdcd">
  63. <meta name="color:hover" content="#fafafa">
  64. <meta name="color:accent" content="#000">
  65. <meta name="color:lightbox" content="#fff">
  66. <meta name="color:grad1" content="#fefefe">
  67. <meta name="color:grad2" content="#ababab">
  68. <meta name="color:title" content="#000">
  69. <meta name="color:title hover" content="#fff">
  70.  
  71.  
  72. <meta name="text:Link1" content="Link1">
  73. <meta name="text:link1 URL" content="/">
  74. <meta name="text:Link2" content="Link2">
  75. <meta name="text:link2 URL" content="/">
  76. <meta name="text:Link3" content="Link3">
  77. <meta name="text:link3 URL" content="/">
  78. <meta name="text:Link4" content="Link4">
  79. <meta name="text:link4 URL" content="/">
  80. <meta name="text:Link5" content="Link5">
  81. <meta name="text:link5 URL" content="/">
  82.  
  83. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  84. <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,700' rel='stylesheet' type='text/css'>
  85. <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
  86.  
  87. <script src="http://tympanus.net/Development/CreativeLinkEffects/js/modernizr.custom.js"></script>
  88.  
  89. <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  90.  
  91. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  92.  
  93. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  94.  
  95. <!--Tooltip-->
  96.  
  97. <script>
  98.  
  99. (function($){
  100.  
  101. $(document).ready(function(){
  102.  
  103. $("a[title]").style_my_tooltips({
  104.  
  105. tip_follows_cursor:true,
  106.  
  107. tip_delay_time:30,
  108.  
  109. tip_fade_speed:300,
  110.  
  111. attribute:"title"
  112.  
  113. });
  114.  
  115. });
  116.  
  117. })(jQuery);
  118.  
  119. </script>
  120.  
  121.  
  122. <style type="text/css">
  123.  
  124. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  125.  
  126. /* fontawesome */
  127. [class*="fontawesome-"]:before {
  128. font-family: 'FontAwesome', sans-serif;
  129. }
  130.  
  131. ::selection {background:#fff; color:#000000;}
  132. ::-moz-selection {background:#fff;color:#000000;}
  133. ::-webkit-selection {background:#fff;color:#000000;}
  134.  
  135.  
  136. ::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
  137.  
  138. ::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  139.  
  140.  
  141. /*Tooltip*/
  142. #s-m-t-tooltip{
  143. position:absolute;
  144. margin-top: 10px;
  145. z-index:9999999999;
  146. padding:5px;
  147. color:#fff;
  148. background: {color:accent};
  149.  
  150. }
  151.  
  152. .post500 #s-m-t-tooltip {
  153. font-size:12px;
  154. }
  155.  
  156. .post400 #s-m-t-tooltip {
  157. font-size:10px;
  158. }
  159.  
  160. .post250 #s-m-t-tooltip {
  161. font-size:9px;
  162. padding:3px;
  163. }
  164.  
  165. body {
  166. font-family:'Lato',Arial, sans-serif;
  167. font-weight:400;
  168. font-size:12px;
  169. letter-spacing:1.5px;
  170. line-height:140%;
  171. overflow-x:hidden;
  172.  
  173. }
  174.  
  175. .colour_bg {
  176. background:#fafafa;
  177. }
  178.  
  179. .img_bg {
  180. background-image: url('{image:fullscreen bg}');
  181. background-repeat: no-repeat;
  182. background-attachment: fixed;
  183. background-position: center;
  184. background-size:cover;
  185. }
  186.  
  187. .gradient_bg {
  188. background: -webkit-linear-gradient(90deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  189. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  190. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  191. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  192. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  193. }
  194.  
  195. .r_bg {
  196. background:url('{image:grid bg}');
  197. background-attachment: fixed;
  198. }
  199.  
  200. a {
  201. text-decoration: none;
  202. color: {color:links};
  203. {block:ifcrosshairhover}
  204. cursor:crosshair;
  205. {/block:ifcrosshairhover}
  206. transition: all 0.3s ease-in-out;
  207. -webkit-transition: all 0.3s ease-in-out;
  208. -moz-transition: all 0.3s ease-in-out;
  209. -o-transition: all 0.3s ease-in-out;
  210. }
  211.  
  212. a:hover {
  213. color:{color:hover};
  214. transition: all 0.3s ease-in-out;
  215. -webkit-transition: all 0.3s ease-in-out;
  216. -moz-transition: all 0.3s ease-in-out;
  217. -o-transition: all 0.3s ease-in-out;
  218. }
  219.  
  220. blockquote {
  221. border-left: 1px #eaeaea solid;
  222. padding-left: 10px;
  223. margin-left: 10px;
  224. max-width: 100%;
  225. }
  226.  
  227. .post250 blockquote {width:calc(100% - 20px);}
  228.  
  229. .post400 blockquote {width:calc(100% - 30px);}
  230.  
  231. blockquote blockquote {
  232. padding: 0 0 0 10px;
  233. margin: 0 0 0 10px;
  234.  
  235. }
  236.  
  237. blockquote a {
  238. border-bottom:1px solid #dedede;
  239. transition: all 0.3s ease-in-out;
  240. -webkit-transition: all 0.3s ease-in-out;
  241. -moz-transition: all 0.3s ease-in-out;
  242. -o-transition: all 0.3s ease-in-out;
  243. }
  244.  
  245. blockquote a:hover {
  246. border-bottom:1px solid {color:hover};
  247. transition: all 0.3s ease-in-out;
  248. -webkit-transition: all 0.3s ease-in-out;
  249. -moz-transition: all 0.3s ease-in-out;
  250. -o-transition: all 0.3s ease-in-out;
  251. }
  252.  
  253. pre {
  254. white-space: pre-wrap;
  255. white-space: -moz-pre-wrap;
  256. white-space: -pre-wrap;
  257. white-space: -o-pre-wrap;
  258. word-wrap: break-word;
  259. }
  260.  
  261. /*Important*/
  262.  
  263. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  264.  
  265. /*Borders*/
  266.  
  267. #border1 {
  268. {block:ifnotgradientborder}
  269. background:{color:accent};
  270. {/block:ifnotgradientborder}
  271.  
  272. {block:ifgradientborder}
  273. background:{color:grad1};
  274. {/block:ifgradientborder}
  275.  
  276. width:100%;
  277. position:fixed;
  278. z-index:110;
  279. height:30px;
  280. top:0;
  281. left:0;
  282. transition: all 0.3s ease-in-out;
  283. -webkit-transition: all 0.3s ease-in-out;
  284. -moz-transition: all 0.3s ease-in-out;
  285. -o-transition: all 0.3s ease-in-out;
  286. }
  287.  
  288. #border2 {
  289. {block:ifnotgradientborder}
  290. background:{color:accent};
  291. {/block:ifnotgradientborder}
  292.  
  293.  
  294. {block:ifgradientborder}
  295. background: -webkit-linear-gradient(180deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  296. background: -moz-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  297. background: -ms-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  298. background: -o-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  299. background: linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  300. {/block:ifgradientborder}
  301. height:100vh;
  302. position:fixed;
  303. z-index:100;
  304. width:30px;
  305. right:0;
  306. top:0;
  307. transition: all 0.3s ease-in-out;
  308. -webkit-transition: all 0.3s ease-in-out;
  309. -moz-transition: all 0.3s ease-in-out;
  310. -o-transition: all 0.3s ease-in-out;
  311.  
  312. }
  313.  
  314. #border3 {
  315. {block:ifnotgradientborder}
  316. background:{color:accent};
  317. {/block:ifnotgradientborder}
  318.  
  319. {block:ifgradientborder}
  320. background:{color:grad2};
  321. {/block:ifgradientborder}
  322. text-align:center;
  323. word-spacing:20px;
  324. width:100%;
  325. position:fixed;
  326. z-index:100;
  327. height:30px;
  328. bottom:0;
  329. left:0;
  330. transition: all 0.3s ease-in-out;
  331. -webkit-transition: all 0.3s ease-in-out;
  332. -moz-transition: all 0.3s ease-in-out;
  333. -o-transition: all 0.3s ease-in-out;
  334. }
  335.  
  336. #border4 {
  337. {block:ifnotgradientborder}
  338. background:{color:accent};
  339. {/block:ifnotgradientborder}
  340.  
  341. {block:ifgradientborder}
  342. background: -webkit-linear-gradient(180deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  343. background: -moz-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  344. background: -ms-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  345. background: -o-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  346. background: linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  347. {/block:ifgradientborder}
  348.  
  349. height:100vh;
  350. position:fixed;
  351. z-index:100;
  352. width:30px;
  353. left:0;
  354. top:0;
  355. transition: all 0.3s ease-in-out;
  356. -webkit-transition: all 0.3s ease-in-out;
  357. -moz-transition: all 0.3s ease-in-out;
  358. -o-transition: all 0.3s ease-in-out;
  359.  
  360. }
  361.  
  362. /*Burger Menu*/
  363.  
  364. .burger {
  365. position: absolute;
  366. z-index: 120;
  367. left: 8px;
  368. top: 10px;
  369. cursor: pointer;
  370. -webkit-transform: rotateY(0);
  371. transform: rotateY(0);
  372. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  373. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  374. }
  375. .burger__patty {
  376. width: 20px;
  377. height: 2px;
  378. margin: 0 0 4px 0;
  379. background: #fff;
  380. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  381. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  382. }
  383.  
  384. .burger:hover .burger__patty {
  385. background:{color:hover};
  386. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  387. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  388. }
  389.  
  390.  
  391.  
  392. .burger__patty:last-child {
  393. margin-bottom: 0;
  394. }
  395. .burger--close {
  396.  
  397. -webkit-transform: rotate(180deg);
  398. -ms-transform: rotate(180deg);
  399. transform: rotate(180deg);
  400. }
  401.  
  402. .burger--close .burger__patty {
  403. background:{color:accent};
  404. }
  405.  
  406. .burger--close .burger__patty:nth-child(1) {
  407. -webkit-transform: rotate(45deg) translate(4px, 4px);
  408. -ms-transform: rotate(45deg) translate(4px, 4px);
  409. transform: rotate(45deg) translate(4px, 4px);
  410. }
  411. .burger--close .burger__patty:nth-child(2) {
  412. opacity: 0;
  413. }
  414. .burger--close .burger__patty:nth-child(3) {
  415. -webkit-transform: rotate(-45deg) translate(5px, -4px);
  416. -ms-transform: rotate(-45deg) translate(5px, -4px);
  417. transform: rotate(-45deg) translate(5px, -4px);
  418. }
  419.  
  420. /*Fullscreen menu*/
  421.  
  422. .menu {
  423. position: fixed;
  424. top: 0;
  425. width: 100%;
  426. visibility: hidden;
  427. }
  428. .menu--active {
  429. visibility: visible;
  430. }
  431. .menu__brand, .menu__list {
  432. display: -webkit-box;
  433. display: -webkit-flex;
  434. display: -ms-flexbox;
  435. display: flex;
  436. -webkit-flex-flow: column wrap;
  437. -ms-flex-flow: column wrap;
  438. flex-flow: column wrap;
  439. -webkit-box-align: center;
  440. -webkit-align-items: center;
  441. -ms-flex-align: center;
  442. align-items: center;
  443. -webkit-box-pack: center;
  444. -webkit-justify-content: center;
  445. -ms-flex-pack: center;
  446. justify-content: center;
  447. float: left;
  448. width: 50%;
  449. height: 100vh;
  450. overflow: hidden;
  451. }
  452. .menu__list {
  453. margin: 0;
  454. padding: 0;
  455. {block:ifgradientborder}
  456. background:{color:grad1};
  457. {/block:ifgradientborder}
  458.  
  459. {block:ifnotgradientborder}
  460. background: {color:accent};
  461. {/block:ifnotgradientborder}
  462. list-style-type: none;
  463. -webkit-transform: translate3d(0, -100%, 0);
  464. transform: translate3d(0, -100%, 0);
  465. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  466. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  467. }
  468. .menu__list--active {
  469. -webkit-transform: translate3d(0, 0, 0);
  470. transform: translate3d(0, 0, 0);
  471. }
  472. .menu__brand {
  473. background: #fff;
  474. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  475. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  476. -webkit-transform: translate3d(0, 100%, 0);
  477. transform: translate3d(0, 100%, 0);
  478. }
  479. .menu__brand--active {
  480. -webkit-transform: translate3d(0, 0, 0);
  481. transform: translate3d(0, 0, 0);
  482. }
  483. .menu__item {
  484. -webkit-transform: translate3d(500px, 0, 0);
  485. transform: translate3d(500px, 0, 0);
  486. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  487. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  488. }
  489. .menu__item--active {
  490. -webkit-transform: translate3d(0, 0, 0);
  491. transform: translate3d(0, 0, 0);
  492. }
  493. .menu__link {
  494. display: inline-block;
  495. position: relative;
  496. font-size: 30px;
  497. padding: 20px 0;
  498. font-weight: 300;
  499. text-transform:uppercase;
  500. font-family:'roboto', arial, sans-serif;
  501. color: white;
  502. text-decoration: none;
  503. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  504. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  505. }
  506.  
  507. .menu__link:empty {visibility:hidden;}
  508.  
  509. .menu__link:before {
  510. content: "";
  511. position: absolute;
  512. bottom: 0;
  513. left: 50%;
  514. width: 10px;
  515. height: 2px;
  516. background: white;
  517. -webkit-transform: translateX(-50%);
  518. -ms-transform: translateX(-50%);
  519. transform: translateX(-50%);
  520. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  521. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  522. }
  523. .menu__link:hover:before {
  524. width: 100%;
  525. }
  526. .menu .menu__item:nth-child(1) {
  527. -webkit-transition-delay: 0.1s;
  528. transition-delay: 0.1s;
  529. }
  530. .menu .menu__item:nth-child(2) {
  531. -webkit-transition-delay: 0.2s;
  532. transition-delay: 0.2s;
  533. }
  534. .menu .menu__item:nth-child(3) {
  535. -webkit-transition-delay: 0.3s;
  536. transition-delay: 0.3s;
  537. }
  538. .menu .menu__item:nth-child(4) {
  539. -webkit-transition-delay: 0.4s;
  540. transition-delay: 0.4s;
  541. }
  542. .menu .menu__item:nth-child(5) {
  543. -webkit-transition-delay: 0.5s;
  544. transition-delay: 0.5s;
  545. }
  546. .menu .menu__item:nth-child(6) {
  547. -webkit-transition-delay: 0.6s;
  548. transition-delay: 0.6s;
  549. }
  550.  
  551. /* Profile */
  552.  
  553. .menu__brand *, .menu__brand *:after, .menu__brand *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
  554.  
  555. .menu__brand figure {
  556. position: relative;
  557. float: left;
  558. overflow: hidden;
  559. margin: 10px 1%;
  560. width:300px;
  561. height:300px;
  562. height: auto;
  563. background: #000;
  564. text-align: center;
  565. }
  566.  
  567. .menu__brand figure img {
  568. position: relative;
  569. display: block;
  570. min-height: 300px;
  571. max-width: 300px;
  572. opacity: 0.8;
  573. }
  574.  
  575. .menu__brand figure figcaption {
  576. padding: 2em;
  577. color: #fff;
  578. font-size: 1.25em;
  579. -webkit-backface-visibility: hidden;
  580. backface-visibility: hidden;
  581. }
  582.  
  583. .menu__brand figure figcaption::before,
  584. .menu__brand figure figcaption::after {
  585. pointer-events: none;
  586. }
  587.  
  588. .menu__brand figure figcaption {
  589. position: absolute;
  590. top: 0;
  591. left: 0;
  592. width: 100%;
  593. height: 100%;
  594. }
  595.  
  596. /* Anchor will cover the whole item by default */
  597.  
  598.  
  599. .menu__brand figure h2 {
  600. word-spacing: -0.15em;
  601. font-weight: 300;
  602. }
  603.  
  604. .menu__brand figure h2 span {
  605. font-weight: 800;
  606. }
  607.  
  608. .menu__brand figure h2,
  609. .menu__brand figure p {
  610. margin: 0;
  611. }
  612.  
  613. .menu__brand figure p {
  614. letter-spacing: 1px;
  615. font-size: 68.5%;
  616. }
  617.  
  618. figure.effect-ming {
  619. background: #000;
  620. }
  621.  
  622. figure.effect-ming img {
  623. opacity: 0.9;
  624. -webkit-transition: opacity 0.3s;
  625. transition: opacity 0.3s;
  626. }
  627.  
  628. figure.effect-ming figcaption::before {
  629. position: absolute;
  630. top: 30px;
  631. right: 30px;
  632. bottom: 30px;
  633. left: 30px;
  634. border: 2px solid #fff;
  635. box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
  636. content: '';
  637. opacity: 0;
  638. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  639. transition: opacity 0.3s, transform 0.3s;
  640. -webkit-transform: scale3d(1.4,1.4,1);
  641. transform: scale3d(1.4,1.4,1);
  642. }
  643.  
  644. figure.effect-ming h2 {
  645. margin: 20% 0 10px 0;
  646. opacity:0;
  647. transition: all 0.3s;
  648. -webkit-transition: all 0.3s;
  649. -moz-transition: all 0.3s;
  650. -o-transition: all 0.3s;
  651.  
  652. }
  653.  
  654. figure.effect-ming p {
  655. padding: 1em;
  656. opacity: 0;
  657. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  658. transition: opacity 0.3s, transform 0.3s;
  659. -webkit-transform: scale(1.5);
  660. transform: scale(1.5);
  661. }
  662.  
  663. figure.effect-ming:hover h2 {
  664. opacity:1;
  665. -webkit-transform: scale(0.9);
  666. transform: scale(0.9);
  667. }
  668.  
  669. figure.effect-ming:hover figcaption::before,
  670. figure.effect-ming:hover p {
  671. opacity: 1;
  672. -webkit-transform: scale3d(1,1,1);
  673. transform: scale3d(1,1,1);
  674. }
  675.  
  676. figure.effect-ming a {
  677. border-bottom:1px solid {color:links};
  678. transition: all 0.3s ease-in-out;
  679. -webkit-transition: all 0.3s ease-in-out;
  680. -moz-transition: all 0.3s ease-in-out;
  681. -o-transition: all 0.3s ease-in-out;
  682. }
  683.  
  684. figure.effect-ming a:hover {
  685. border-bottom:1px solid {color:hover};
  686. transition: all 0.3s ease-in-out;
  687. -webkit-transition: all 0.3s ease-in-out;
  688. -moz-transition: all 0.3s ease-in-out;
  689. -o-transition: all 0.3s ease-in-out;
  690. }
  691.  
  692. figure.effect-ming:hover figcaption {
  693. background-color: rgba(58,52,42,0);
  694. }
  695.  
  696. figure.effect-ming:hover img {
  697. opacity: 0.4;
  698. }
  699.  
  700. /*Menu media queries*/
  701.  
  702. @media screen and (max-width: 768px) {
  703. ul.menu__list,
  704. div.menu__brand {
  705. float: none;
  706. width: 100%;
  707. min-height: 0;
  708. }
  709. ul.menu__list--active,
  710. div.menu__brand--active {
  711. -webkit-transform: translate3d(0, 0, 0);
  712. transform: translate3d(0, 0, 0);
  713. }
  714.  
  715. .menu__list {
  716. height: 75vh;
  717. -webkit-transform: translate3d(-100%, 0, 0);
  718. transform: translate3d(-100%, 0, 0);
  719. }
  720.  
  721. .menu__link {
  722. font-size: 24px;
  723. }
  724.  
  725. .menu__brand {
  726. height: 25vh;
  727. -webkit-transform: translate3d(100%, 0, 0);
  728. transform: translate3d(100%, 0, 0);
  729. }
  730.  
  731. }
  732.  
  733. /*header*/
  734. #header {
  735. position:relative;
  736. margin:60px auto;
  737. width:500px;
  738. text-align:center;
  739. }
  740.  
  741. .post500 #header {margin-top:70px;}
  742.  
  743. .post250 #header {
  744. width:400px;
  745. margin-top:70px;
  746.  
  747. }
  748.  
  749. .link {
  750. outline: none;
  751. text-decoration: none;
  752. position: relative;
  753. font-size: 3em;
  754. line-height: 1;
  755. text-overflow: ellipsis;
  756. white-space: nowrap;
  757. overflow:hidden;
  758. color: {color:title};
  759. max-width:100%;
  760. display: inline-block;
  761. }
  762.  
  763. .post250 .link {
  764. font-size:2em;
  765. }
  766.  
  767. /* Kukuri */
  768. .link--kukuri {
  769. text-transform: uppercase;
  770. font-weight: 900;
  771. overflow: hidden;
  772. line-height: 1;
  773. color: {color:title};
  774. }
  775.  
  776. .link--kukuri:hover {
  777. color: {color:title hover};
  778. }
  779.  
  780. .link--kukuri::after {
  781. content: '';
  782. position: absolute;
  783. height: 16px;
  784. width: 100%;
  785. top: 50%;
  786. margin-top: -8px;
  787. right: 0;
  788. background: #fff;
  789. -webkit-transform: translate3d(-100%,0,0);
  790. transform: translate3d(-100%,0,0);
  791. -webkit-transition: -webkit-transform 0.4s;
  792. transition: transform 0.4s;
  793. -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  794. transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  795. }
  796.  
  797. .link--kukuri:hover::after {
  798. -webkit-transform: translate3d(100%,0,0);
  799. transform: translate3d(100%,0,0);
  800. }
  801.  
  802. .link--kukuri::before {
  803. content: attr(data-letters);
  804. position: absolute;
  805. z-index: 2;
  806. overflow: hidden;
  807. color: {color:title hover};
  808. white-space: nowrap;
  809. width: 0%;
  810. -webkit-transition: width 0.4s 0.3s;
  811. transition: width 0.4s 0.3s;
  812. }
  813.  
  814. .link--kukuri:hover::before {
  815. width: 100%;
  816. }
  817.  
  818. /*tumblr controls*/
  819.  
  820. #tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop,.tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop {
  821. z-index:200 !important;
  822. transform: scale(1);
  823. -webkit-transform: scale(1);
  824. -moz-transform: scale(1);
  825. -o-transform: scale(1);
  826. -ms-transform: scale(1);
  827. transition: all 0.3s ease-in-out;
  828. -webkit-transition: all 0.3s ease-in-out;
  829. -moz-transition: all 0.3s ease-in-out;
  830. -o-transition: all 0.3s ease-in-out;
  831. }
  832.  
  833. .tmblr-iframe--follow-teaser {z-index:101 !important;}
  834.  
  835. @media screen and (max-width: 1024px) {
  836.  
  837. #tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop,.tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop {
  838. transform: scale(0.75) !important;
  839. -webkit-transform: scale(0.75) !important;
  840. -moz-transform: scale(0.75) !important;
  841. -o-transform: scale(0.75) !important;
  842. -ms-transform: scale(0.75) !important;
  843. right:-45px !important;
  844. top:-3px !important;
  845. position:fixed !important;
  846. transition: all 0.3s ease-in-out;
  847. -webkit-transition: all 0.3s ease-in-out;
  848. -moz-transition: all 0.3s ease-in-out;
  849. -o-transition: all 0.3s ease-in-out;
  850. }
  851.  
  852.  
  853.  
  854. }
  855.  
  856. /*Posts*/
  857.  
  858. #entries {
  859. position:relative;
  860. margin:10px auto 50px auto;
  861. }
  862.  
  863. .posts {
  864. position:relative;
  865. margin:50px auto;
  866. padding:20px;
  867. background:#fff;
  868. overflow-x:hidden;
  869.  
  870. }
  871.  
  872. .posts > p a, .posts ol a, .posts ul a {
  873. border-bottom:1px solid #dedede;
  874. transition: all 0.3s ease-in-out;
  875. -webkit-transition: all 0.3s ease-in-out;
  876. -moz-transition: all 0.3s ease-in-out;
  877. -o-transition: all 0.3s ease-in-out;
  878. }
  879.  
  880. .posts > p a:hover,.posts ol a:hover, .posts ul a:hover {
  881. border-bottom:1px solid {color:hover};
  882. transition: all 0.3s ease-in-out;
  883. -webkit-transition: all 0.3s ease-in-out;
  884. -moz-transition: all 0.3s ease-in-out;
  885. -o-transition: all 0.3s ease-in-out;
  886. }
  887.  
  888. a.tumblr_blog {
  889. border-bottom:1px solid #dedede;
  890. color:#5f5f5f;
  891. transition: all 0.3s ease-in-out;
  892. -webkit-transition: all 0.3s ease-in-out;
  893. -moz-transition: all 0.3s ease-in-out;
  894. -o-transition: all 0.3s ease-in-out;
  895. }
  896.  
  897. a:hover.tumblr_blog {
  898. border-bottom: 1px solid {color:hover};
  899. color:{color:hover};
  900. transition: all 0.3s ease-in-out;
  901. -webkit-transition: all 0.3s ease-in-out;
  902. -moz-transition: all 0.3s ease-in-out;
  903. -o-transition: all 0.3s ease-in-out;
  904. }
  905.  
  906.  
  907. .post400 .posts {
  908. font-size:10px;
  909. }
  910.  
  911.  
  912. .post250 .posts {
  913. margin:40px auto;
  914. font-size:10px;
  915. padding:12px;
  916. }
  917.  
  918. .posts video {
  919. width: 100% !important;
  920. height: auto !important;
  921. }
  922.  
  923. .posts img {
  924. max-width:100%;
  925. height:auto;
  926. }
  927.  
  928. .post500 #entries {
  929. width:500px;
  930.  
  931. }
  932.  
  933. .post400 #entries {
  934. width:400px;
  935.  
  936. }
  937.  
  938. .post250 #entries {
  939. width:250px;
  940.  
  941. }
  942.  
  943. .post400 .posts:first-of-type {
  944. margin-top:-20px;
  945. }
  946.  
  947. .post500 .posts:first-of-type {
  948. margin-top:-10px;
  949. }
  950.  
  951. .post250 .posts:first-of-type {
  952. margin-top:-30px;
  953. }
  954.  
  955.  
  956. /*t*/
  957.  
  958. .titre {
  959. text-align:center;
  960. font-weight:bold;
  961. font-size:1.5em;
  962. color:{color:accent};
  963. margin-bottom:15px;
  964. line-height:160%;
  965. text-transform:uppercase;
  966. }
  967.  
  968. /*lightbox*/
  969. #tumblr_lightbox, .tmblr-lightbox {background:rgba({RGBcolor:lightbox}, 0.8)!important;}
  970. #tumblr_lightbox img, .tmblr-lightbox .vignette {
  971. opacity:0;
  972. border-radius:0!important;
  973. -moz-border-radius: 0!important;
  974. -webkit-border-radius: 0!important;
  975. -o-border-radius: 0!important;
  976. -webkit-box-shadow:none!important;
  977. box-shadow:none!important;
  978. }
  979.  
  980. #tumblr_lightbox_center_image {
  981. opacity: 1!important;
  982. background-color: #fff!important;
  983. }
  984.  
  985. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  986. transition: opacity 0.3s ease-in-out;
  987. -webkit-transition: opacity 0.3s ease-in-out;
  988. -moz-transition: opacity 0.3s ease-in-out;
  989. -o-transition: opacity 0.3s ease-in-out;
  990. }
  991.  
  992. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  993. opacity:1!important;
  994. transition: opacity 0.3s ease-in-out;
  995. -webkit-transition: opacity 0.3s ease-in-out;
  996. -moz-transition: opacity 0.3s ease-in-out;
  997. -o-transition: opacity 0.3s ease-in-out;
  998. }
  999.  
  1000. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  1001. margin-top:-1%!important;
  1002. padding: 2px!important;
  1003. box-shadow: 0 0 0 transparent !important;
  1004. border-radius: 0!important;
  1005. -moz-border-radius: 0!important;
  1006. -webkit-border-radius: 0!important;
  1007. -o-border-radius: 0!important;
  1008.  
  1009.  
  1010. }
  1011.  
  1012.  
  1013. #tumblr_lightbox_caption { visibility: hidden; }
  1014.  
  1015. {block:ifcrosshairhover}
  1016. .tumblr-box, #tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:pointer;}
  1017. {/block:ifcrosshairhover}
  1018.  
  1019.  
  1020. /*chat*/
  1021.  
  1022. .chats {
  1023. line-height:22px;
  1024. padding:5px;
  1025. }
  1026.  
  1027. .chats strong {
  1028. font-family:'raleway', arial, sans-serif;
  1029. text-transform:uppercase;
  1030. color:{color:accent};
  1031. }
  1032.  
  1033. .post250 .chats {
  1034. font-size:10px;
  1035. padding:3px;
  1036. }
  1037.  
  1038. /*audio posts*/
  1039. .flitwick {
  1040. width:100%;
  1041. display:flex;
  1042. display:-webkit-flex;
  1043. display:-moz-flex;
  1044. display:-ms-flex;
  1045. align-items:center;
  1046. -webkit-align-itens:center;
  1047. -moz-align-items:center;
  1048. -ms-align-items:center;
  1049. display: -webkit-box;
  1050. -webkit-box-align: center;
  1051. position:relative;
  1052. }
  1053.  
  1054. .grammy {
  1055. position:relative;
  1056. margin-left:0;
  1057. }
  1058.  
  1059. .post500 .grammy {
  1060. width:100px;
  1061. height:100px;
  1062. }
  1063.  
  1064. .post400 .grammy {
  1065. width:80px;
  1066. height:80px;
  1067. }
  1068.  
  1069. .post250 .grammy {
  1070. width:50px;
  1071. height:50px;
  1072. }
  1073.  
  1074.  
  1075. .mariah {
  1076. position:absolute;
  1077. background:#fff;
  1078. z-index:10;
  1079. opacity:0;
  1080. text-align:center;
  1081. transition: all 0.3s ease-in-out;
  1082. -webkit-transition: all 0.3s ease-in-out;
  1083. -moz-transition: all 0.3s ease-in-out;
  1084. -o-transition: all 0.3s ease-in-out;
  1085. }
  1086.  
  1087. .post500 .mariah {
  1088. width:80px;
  1089. height:80px;
  1090. margin-top:10px;
  1091. margin-left:10px;
  1092. }
  1093.  
  1094. .post400 .mariah {
  1095. width:60px;
  1096. height:60px;
  1097. margin-top:10px;
  1098. margin-left:10px;
  1099. }
  1100.  
  1101. .post250 .mariah {
  1102. width:40px;
  1103. height:40px;
  1104. margin-top:5px;
  1105. margin-left:5px;
  1106. }
  1107.  
  1108. .mariah:hover {
  1109. opacity:0.8;
  1110. transition: all 0.3s ease-in-out;
  1111. -webkit-transition: all 0.3s ease-in-out;
  1112. -moz-transition: all 0.3s ease-in-out;
  1113. -o-transition: all 0.3s ease-in-out;
  1114. }
  1115.  
  1116. .playbox {
  1117. overflow:hidden;
  1118. }
  1119.  
  1120. .post500 .playbox {
  1121. width:40px;
  1122. height:40px;
  1123. margin-top:25px;
  1124. margin-left:20px;
  1125. }
  1126.  
  1127. .post400 .playbox {
  1128. width:40px;
  1129. height:40px;
  1130. margin-top:15px;
  1131. margin-left:12px;
  1132. }
  1133.  
  1134. .post250 .playbox {
  1135. width:25px;
  1136. height:25px;
  1137. margin-top:5px;
  1138. margin-left:8px;
  1139. }
  1140.  
  1141.  
  1142.  
  1143. .taylor {
  1144. padding:0;
  1145. margin-left:0px;
  1146. background:#fafafa;
  1147. display:flex;
  1148. display:-webkit-flex;
  1149. display:-moz-flex;
  1150. display:-ms-flex;
  1151. align-items:center;
  1152. -webkit-align-itens:center;
  1153. -moz-align-items:center;
  1154. -ms-align-items:center;
  1155. justify-content:center;
  1156. -webkit-justify-content:center;
  1157. -moz-justify-content:center;
  1158. -ms-justify-content:center;
  1159. display: -webkit-box;
  1160. -webkit-box-align: center;
  1161. -webkit-box-pack: center;
  1162. }
  1163.  
  1164. .post500 .taylor {
  1165. width:calc(100% - 100px);
  1166. height:100px;
  1167. }
  1168.  
  1169. .post400 .taylor {
  1170. width:calc(100% - 80px);
  1171. height:80px;
  1172. }
  1173.  
  1174. .post250 .taylor {
  1175. width:calc(100% - 50px);
  1176. height:50px;
  1177. }
  1178.  
  1179. .swift {
  1180. color:#000;
  1181. font-weight:normal;
  1182. text-overflow: ellipsis;
  1183. white-space: nowrap;
  1184. overflow:hidden;
  1185. }
  1186.  
  1187. .post500 .swift {
  1188. max-width:calc(100% - 50px);
  1189. }
  1190.  
  1191. .post400 .swift {
  1192. max-width:calc(100% - 50px);
  1193. font-size:10px;
  1194. }
  1195.  
  1196. .post250 .swift {
  1197. max-width:calc(100% - 30px);
  1198. font-size:8px;
  1199. line-height:12px;
  1200. }
  1201.  
  1202. .swift b {
  1203. font-family:'raleway', arial,sans-serif;
  1204. font-weight:bold;
  1205. color:#000;
  1206. }
  1207.  
  1208. /*link*/
  1209.  
  1210. .posts nav a {
  1211. position: relative;
  1212. display: inline-block;
  1213. margin: 0 auto;
  1214. outline: none;
  1215. color: {color:accent};
  1216. text-decoration: none;
  1217. text-transform: uppercase;
  1218. letter-spacing: 1px;
  1219. font-weight: 400;
  1220. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1221. font-size: 2em;
  1222. text-align:center;
  1223. }
  1224.  
  1225. .post250 .posts nav a{
  1226. font-size:1.5em;
  1227. }
  1228.  
  1229. .posts nav a:hover,
  1230. .posts nav a:focus {
  1231. outline: none;
  1232. }
  1233.  
  1234. .linkp a {
  1235. overflow: hidden;
  1236. white-space:nowrap;
  1237. text-overflow:ellipsis;
  1238. height: 2em;
  1239. line-height:2em;
  1240. width:100%;
  1241. }
  1242.  
  1243. .linkp a span {
  1244. position: relative;
  1245. width:100%;
  1246. display: inline-block;
  1247. -webkit-transition: -webkit-transform 0.3s;
  1248. -moz-transition: -moz-transform 0.3s;
  1249. transition: transform 0.3s;
  1250. }
  1251.  
  1252. .linkp a span::before {
  1253. position: absolute;
  1254. top: 100%;
  1255. content: attr(data-hover);
  1256. font-weight: 700;
  1257. -webkit-transform: translate3d(0,0,0);
  1258. -moz-transform: translate3d(0,0,0);
  1259. transform: translate3d(0,0,0);
  1260. }
  1261.  
  1262. .linkp a:hover span,
  1263. .linkp a:focus span {
  1264. -webkit-transform: translateY(-100%);
  1265. -moz-transform: translateY(-100%);
  1266. transform: translateY(-100%);
  1267. }
  1268.  
  1269. /*quotes*/
  1270.  
  1271. .quotes {
  1272. font-style:italic;
  1273. font-size:1.2em;
  1274. display:inline;
  1275. line-height:140%;
  1276. }
  1277.  
  1278. .post400 .quotes, .post500 .quotes {font-size:1.5em;}
  1279.  
  1280. .speaker {
  1281. margin-top:12px;
  1282. margin-bottom:12px;
  1283. text-align:right;
  1284. }
  1285.  
  1286. .post250 .speaker {margin-top:8px;margin-bottom:8px;}
  1287.  
  1288.  
  1289. /*Ask*/
  1290.  
  1291. .ask_cont {
  1292. background:#fafafa;
  1293. padding:10px;
  1294. }
  1295.  
  1296. .post250 .ask_cont {padding:5px 8px;}
  1297.  
  1298. .asker {
  1299. text-transform:uppercase;
  1300. margin-bottom:8px;
  1301. letter-spacing:1px;
  1302. }
  1303.  
  1304. .post250 .asker {margin-bottom:3px;}
  1305.  
  1306.  
  1307. .asker a {
  1308. border-bottom:1px solid #dedede;
  1309. color:#000;
  1310. transition: all 0.3s ease-in-out;
  1311. -webkit-transition: all 0.3s ease-in-out;
  1312. -moz-transition: all 0.3s ease-in-out;
  1313. -o-transition: all 0.3s ease-in-out;
  1314.  
  1315. }
  1316.  
  1317. .asker a:hover {
  1318. border-bottom:1px solid {color:hover};
  1319. color:{color:hover};
  1320. transition: all 0.3s ease-in-out;
  1321. -webkit-transition: all 0.3s ease-in-out;
  1322. -moz-transition: all 0.3s ease-in-out;
  1323. -o-transition: all 0.3s ease-in-out;
  1324. }
  1325.  
  1326. /*post info*/
  1327.  
  1328. .footer {
  1329. position:relative;
  1330. width:100%;
  1331. margin:0 auto;
  1332. padding:10px 0;
  1333. text-align:center;
  1334. }
  1335.  
  1336. .post400 .footer {
  1337. padding:8px 0;
  1338. }
  1339.  
  1340.  
  1341. .post250 .footer {
  1342. padding:5px 0;
  1343. font-size:9px;
  1344. }
  1345.  
  1346. .footer a {
  1347. font-weight:bold;
  1348. display:inline-block;
  1349. color:#000;
  1350. margin-left:10px;
  1351. text-transform:uppercase;
  1352. }
  1353.  
  1354. .post400 .footer a {
  1355. margin-left:8px;
  1356. }
  1357.  
  1358. .post250 .footer a {
  1359. margin-left:6px;
  1360. padding:2px;
  1361. }
  1362.  
  1363. .tags {
  1364. text-align:center;
  1365. width:100%;
  1366. margin:0px auto -5px auto;
  1367. word-wrap: break-word;
  1368. text-transform:none;
  1369. }
  1370.  
  1371. .post250 .tags, .post400 .tags {
  1372. margin:0 auto 0 auto;
  1373. }
  1374.  
  1375. .tags a {
  1376. display:inline-block;
  1377. padding:0 5px 0 5px;
  1378. color:{color:tags};
  1379. font-weight:300;
  1380. transition: all 0.3s ease-in-out;
  1381. -webkit-transition: all 0.3s ease-in-out;
  1382. -moz-transition: all 0.3s ease-in-out;
  1383. -o-transition: all 0.3s ease-in-out;
  1384. }
  1385.  
  1386. .tags a:hover {
  1387. color:{color:hover};
  1388. transition: all 0.3s ease-in-out;
  1389. -webkit-transition: all 0.3s ease-in-out;
  1390. -moz-transition: all 0.3s ease-in-out;
  1391. -o-transition: all 0.3s ease-in-out;
  1392. }
  1393.  
  1394. .post250 .tags a {
  1395. padding:2px;
  1396. font-size:8px;
  1397. }
  1398.  
  1399. /*Pagination*/
  1400. #border3 a{
  1401. color:#fff;
  1402. font-size:14px;
  1403. line-height:30px;
  1404. font-weight:normal;
  1405. text-transform:uppercase;
  1406. transition: all 0.3s ease-in-out;
  1407. -webkit-transition: all 0.3s ease-in-out;
  1408. -moz-transition: all 0.3s ease-in-out;
  1409. -o-transition: all 0.3s ease-in-out;
  1410. }
  1411.  
  1412. #border3 a:hover {color:{color:hover};}
  1413.  
  1414. /*Scroll to top*/
  1415.  
  1416. #scroll-to-top {
  1417. position:fixed;
  1418. bottom:7px;
  1419. right:5px;
  1420. text-transform:uppercase;
  1421. z-index:101;
  1422. transition: all 0.3s ease-in-out;
  1423. -webkit-transition: all 0.3s ease-in-out;
  1424. -moz-transition: all 0.3s ease-in-out;
  1425. -o-transition: all 0.3s ease-in-out;
  1426. }
  1427.  
  1428. #scroll-to-top a {
  1429. color:#fff;
  1430. transition: all 0.3s ease-in-out;
  1431. -webkit-transition: all 0.3s ease-in-out;
  1432. -moz-transition: all 0.3s ease-in-out;
  1433. -o-transition: all 0.3s ease-in-out;
  1434. }
  1435.  
  1436. #scroll-to-top a:hover {
  1437. color:{color:hover};
  1438. transition: all 0.3s ease-in-out;
  1439. -webkit-transition: all 0.3s ease-in-out;
  1440. -moz-transition: all 0.3s ease-in-out;
  1441. -o-transition: all 0.3s ease-in-out;
  1442. }
  1443.  
  1444. /*Notes*/
  1445.  
  1446. div.notes {
  1447.  
  1448. text-align:left;
  1449. margin:0 auto 0 auto;
  1450. font-weight:300;
  1451. overflow-y:auto;
  1452. overflow-x:hidden;
  1453. }
  1454.  
  1455. .post500 div.notes {max-height:500px;}
  1456. .post400 div.notes {max-height:400px;}
  1457. .post250 div.notes {max-height:300px;}
  1458.  
  1459. .notes h1 {font-weight:400;text-transform:uppercase;font-size:1.3em; text-align:center;}
  1460.  
  1461.  
  1462. div.notes::-webkit-scrollbar {width: 2px; height: 3px; background: #FFFFFF; }
  1463.  
  1464. div.notes::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  1465.  
  1466. ol.notes {
  1467. padding: 0px;
  1468. margin: 0px;
  1469. list-style-type: none;
  1470. }
  1471.  
  1472. ol.notes li.note {padding: 8px; text-indent:10px; line-height:150%;}
  1473.  
  1474. .post250 ol.notes li.note {padding: 5px; text-indent:8px; line-height:150%; font-size:9px;letter-spacing:1px;}
  1475.  
  1476. ol.notes li.note .action a {
  1477. border-bottom:1px solid #dedede;
  1478. color:#5f5f5f;
  1479. transition: all 0.3s ease-in-out;
  1480. -webkit-transition: all 0.3s ease-in-out;
  1481. -moz-transition: all 0.3s ease-in-out;
  1482. -o-transition: all 0.3s ease-in-out;
  1483. }
  1484.  
  1485. ol.notes li.note .action a:hover {
  1486. border-bottom: 1px solid {color:hover};
  1487. color:{color:hover};
  1488. transition: all 0.3s ease-in-out;
  1489. -webkit-transition: all 0.3s ease-in-out;
  1490. -moz-transition: all 0.3s ease-in-out;
  1491. -o-transition: all 0.3s ease-in-out;
  1492. }
  1493.  
  1494. ol.notes li.note:before {content:"―"; position:relative; left:-10px;}
  1495.  
  1496. .post250 ol.notes li.note:before {left:-8px;}
  1497.  
  1498. ol.notes li.note img.avatar {display:none;}
  1499.  
  1500. li.more_notes_link_container:before {display:none;}
  1501.  
  1502. li.more_notes_link_container {text-indent:0; text-transform:uppercase; font-size:14px; margin-top:10px; margin-bottom:-5px;}
  1503.  
  1504. .post250 li.more_notes_link_container {font-size:12px;padding:0;}
  1505.  
  1506. li.more_notes_link_container a {
  1507. color:#000;
  1508. transition: all 0.3s ease-in-out;
  1509. -webkit-transition: all 0.3s ease-in-out;
  1510. -moz-transition: all 0.3s ease-in-out;
  1511. -o-transition: all 0.3s ease-in-out;
  1512. }
  1513.  
  1514. li.more_notes_link_container a:hover {
  1515. color:{color:hover};
  1516. transition: all 0.3s ease-in-out;
  1517. -webkit-transition: all 0.3s ease-in-out;
  1518. -moz-transition: all 0.3s ease-in-out;
  1519. -o-transition: all 0.3s ease-in-out;
  1520. }
  1521.  
  1522.  
  1523. ol.notes li.note blockquote {
  1524. border-color: #eaeaea;
  1525. padding: 4px 10px;
  1526. margin: 10px 0px 0px 25px;
  1527. }
  1528. with_commentary.blockquote {max-width:100%;}
  1529.  
  1530. ol.notes li.note blockquote a {
  1531. text-decoration: none;
  1532. border-bottom:none;
  1533. }
  1534.  
  1535.  
  1536.  
  1537. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1538. #leo {
  1539.  
  1540. font-family: Arial, Sans-Serif;
  1541. text-transform:uppercase;
  1542. text-align:center;
  1543. z-index:99;
  1544. box-sizing:content-box;
  1545. -webkit-box-sizing:content-box;
  1546. -moz-box-sizing:content-box;
  1547.  
  1548. }
  1549.  
  1550. #leo a {
  1551. z-index:99;
  1552. position:fixed;
  1553. font-size:12px;
  1554. line-height:16px;
  1555. width:18px;
  1556. height:18px;
  1557. font-weight:300;
  1558. bottom:35px;
  1559. right:35px;
  1560. color:#000;
  1561. background:rgba(255,255,255,0.4);
  1562. padding:5px;
  1563. transition: all 1s ease-in-out;
  1564. -webkit-transition: all 1s ease-in-out;
  1565. -o-transition: all 1s ease-in-out;
  1566. -moz-transition: all 1s ease-in-out;
  1567. box-sizing:content-box;
  1568. -webkit-box-sizing:content-box;
  1569. -moz-box-sizing:content-box;
  1570.  
  1571. }
  1572.  
  1573. #leo a:hover {
  1574. background-color:rgba(0,0,0,1);
  1575. color:#fff;
  1576. border-radius:50%;
  1577. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1578. -moz-animation: hermione 1s;
  1579. -o-animation: hermione 1s;
  1580. animation: hermione 1s;
  1581. animation-timing-function: ease-in-out;
  1582. -webkit-animation-timing-function: ease-in-out;
  1583. -moz-animation-timing-function: ease-in-out;
  1584. -o-animation-timing-function: ease-in-out;
  1585.  
  1586. -moz-transform: rotate(720deg); /* IE 9 */
  1587. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1588. transform: rotate(720deg);
  1589.  
  1590. transition: all 1s ease-in-out;
  1591. -webkit-transition: all 1s ease-in-out;
  1592. -o-transition: all 1s ease-in-out;
  1593. -moz-transition: all 1s ease-in-out;
  1594.  
  1595.  
  1596. }
  1597.  
  1598. @-webkit-keyframes hermione {
  1599. 0% {color:#000;}
  1600. 25% {color:#ACE4EA;}
  1601. 50% {color:#FFFBDD;}
  1602. 75% {color:#ACE4EA;}
  1603. 100% {color:#fff;}
  1604. }
  1605. @-moz-keyframes hermione {
  1606. 0% {color:#000;}
  1607. 25% {color:#ACE4EA;}
  1608. 50% {color:#FFFBDD;}
  1609. 75% {color:#ACE4EA;}
  1610. 100% {color:#fff;}
  1611. }
  1612. @-o-keyframes hermione {
  1613. 0% {color:#000;}
  1614. 25% {color:#ACE4EA;}
  1615. 50% {color:#FFFBDD;}
  1616. 75% {color:#ACE4EA;}
  1617. 100% {color:#fff;}
  1618. }
  1619.  
  1620. @keyframes hermione {
  1621. 0% {color:#000;}
  1622. 25% {color:#ACE4EA;}
  1623. 50% {color:#FFFBDD;}
  1624. 75% {color:#ACE4EA;}
  1625. 100% {color:#fff;}
  1626. }
  1627. /*END OF CREDIT*/
  1628.  
  1629. /*media queries*/
  1630. @media screen and (max-width: 1024px) {
  1631.  
  1632. #border1, #border3 {
  1633. height:20px;
  1634. transition: all 0.3s ease-in-out;
  1635. -webkit-transition: all 0.3s ease-in-out;
  1636. -moz-transition: all 0.3s ease-in-out;
  1637. -o-transition: all 0.3s ease-in-out;
  1638. }
  1639.  
  1640. #border2, #border4 {
  1641. width:20px;
  1642. transition: all 0.3s ease-in-out;
  1643. -webkit-transition: all 0.3s ease-in-out;
  1644. -moz-transition: all 0.3s ease-in-out;
  1645. -o-transition: all 0.3s ease-in-out;
  1646. }
  1647.  
  1648. #border3 a{
  1649. font-size:12px;
  1650. line-height:20px;
  1651. text-transform:uppercase;
  1652. transition: all 0.3s ease-in-out;
  1653. -webkit-transition: all 0.3s ease-in-out;
  1654. -moz-transition: all 0.3s ease-in-out;
  1655. -o-transition: all 0.3s ease-in-out;
  1656. }
  1657.  
  1658. .burger {
  1659. left:3px;
  1660. top:5px;
  1661. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  1662. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  1663. }
  1664.  
  1665. .burger__patty {
  1666. width:15px;
  1667. height:1.5px;
  1668. -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  1669. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  1670. }
  1671.  
  1672. #scroll-to-top {
  1673. bottom:2px;
  1674. transition: all 0.3s ease-in-out;
  1675. -webkit-transition: all 0.3s ease-in-out;
  1676. -moz-transition: all 0.3s ease-in-out;
  1677. -o-transition: all 0.3s ease-in-out;
  1678. }
  1679.  
  1680. #leo a {
  1681. bottom:25px;
  1682. right:25px;
  1683. transition: all 1s ease-in-out;
  1684. -webkit-transition: all 1s ease-in-out;
  1685. -o-transition: all 1s ease-in-out;
  1686. -moz-transition: all 1s ease-in-out;
  1687.  
  1688. }
  1689.  
  1690. }
  1691.  
  1692. </style>
  1693.  
  1694. <script type="text/javascript" src="http://www.jqueryscript.net/demo/Simple-Back-To-Top-Link/js/jquery-1.7.2.min.js"></script>
  1695. <script type="text/javascript">
  1696. $(document).ready(function(){
  1697.  
  1698. $(function () {
  1699.  
  1700. $(".top").click(function(){
  1701. $('body,html').animate({scrollTop:0},1000);
  1702. return false;
  1703.  
  1704. });
  1705. });
  1706. });
  1707. </script>
  1708.  
  1709. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1710. <script>
  1711. // minimal soundcloud player © eoxk.tumblr
  1712. $(document).ready(function(){
  1713. var color = '{color:accent}'; // color of play button (hex)
  1714. $('.soundcloud_audio_player').each(function(){
  1715. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  1716. });
  1717. });
  1718. </script>
  1719.  
  1720. </head>
  1721. <body class="{select:post width} {select:background}">
  1722.  
  1723. <div id="border1">
  1724. <div class="burger">
  1725. <div class="burger__patty"></div>
  1726. <div class="burger__patty"></div>
  1727. <div class="burger__patty"></div>
  1728. </div>
  1729.  
  1730. <nav class="menu">
  1731. <div class="menu__brand">
  1732. <figure class="effect-ming">
  1733. <img src="{image:profile}"/>
  1734. <figcaption>
  1735. <h2>Info</h2>
  1736. <p>{block:description}{description}{/block:description}</p>
  1737.  
  1738. </figcaption>
  1739. </figure>
  1740. </div>
  1741. <ul class="menu__list">
  1742. <li class="menu__item"><a href="{text:Link1 URL}" class="menu__link">{text:Link1}</a></li>
  1743. <li class="menu__item"><a href="{text:Link2 URL}" class="menu__link">{text:Link2}</a></li>
  1744. <li class="menu__item"><a href="{text:Link3 URL}" class="menu__link">{text:Link3}</a></li>
  1745. <li class="menu__item"><a href="{text:Link4 URL}" class="menu__link">{text:Link4}</a></li>
  1746. <li class="menu__item"><a href="{text:Link5 URL}" class="menu__link">{text:Link5}</a></li>
  1747.  
  1748.  
  1749.  
  1750. </ul>
  1751. </nav>
  1752. </div>
  1753.  
  1754. <div id="border2"></div>
  1755. <div id="border3">
  1756. {block:IndexPage}
  1757. {block:Pagination}
  1758.  
  1759. {block:PreviousPage}
  1760. <a href="{PreviousPage}">&#8592;Back</a>
  1761. {/block:PreviousPage}
  1762. {block:NextPage}
  1763. <a href="{NextPage}">Forth&#8594;</a>
  1764. {/block:NextPage}
  1765.  
  1766. {/block:Pagination}
  1767. {/block:IndexPage}
  1768. </div>
  1769. <div id="border4"></div>
  1770.  
  1771. <div id="header">
  1772. <a class="link link--kukuri" href="/" data-letters="{Title}">{Title}</a>
  1773. </div>
  1774.  
  1775. <div id="entries">
  1776. {block:Posts}
  1777. <div class="posts">
  1778.  
  1779. {block:Photo}
  1780. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto">{LinkCloseTag}
  1781. {block:Caption}{Caption}{/block:Caption}
  1782. {/block:Photo}
  1783.  
  1784. {block:Photoset}
  1785. {Photoset}
  1786. {block:Caption}{Caption}{/block:Caption}
  1787. {/block:Photoset}
  1788.  
  1789. {block:Video}
  1790. {Video-500}
  1791. {block:Caption}{Caption}{/block:Caption}
  1792. {/block:Video}
  1793.  
  1794. {block:Audio}
  1795. <div class="flitwick">
  1796.  
  1797. <div class="mariah">
  1798. <div class="playbox">{AudioPlayerWhite}</div>
  1799. </div>
  1800.  
  1801. <div class="grammy">
  1802. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1803. {block:AlbumArt}
  1804. <img src="{AlbumArtURL}" style="position:absolute;">
  1805. {/block:AlbumArt}
  1806. </div>
  1807.  
  1808.  
  1809. <div class="taylor">
  1810. <div class="swift">
  1811. {block:TrackName}
  1812. <b>Song:</b> {TrackName}
  1813. {/block:TrackName}<br>
  1814.  
  1815. {block:Artist}
  1816. <b>Artist:</b> {Artist}
  1817. {/block:Artist}<br>
  1818.  
  1819. {block:Album}
  1820. <b>Album:</b> {Album}
  1821. {/block:Album}
  1822.  
  1823. </div>
  1824. </div>
  1825.  
  1826. </div>
  1827. {block:Caption}<p>{Caption}</p>{/block:Caption}
  1828. {/block:Audio}
  1829.  
  1830. {block:Quote}
  1831. <div class="quotes">"{Quote}"</div>
  1832.  
  1833. {block:Source}
  1834. <div class="speaker">
  1835. ― {Source}
  1836. </div>
  1837. {/block:Source}
  1838. {/block:Quote}
  1839.  
  1840. {block:Text}
  1841. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1842. {Body}
  1843. {/block:Text}
  1844.  
  1845. {block:Answer}
  1846. <div class="ask_cont">
  1847. <div class="asker">{Asker} asked:</div>
  1848. {Question}
  1849. </div>
  1850. {Answer}
  1851. {/block:Answer}
  1852.  
  1853. {block:Chat}
  1854. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1855. {block:Lines}
  1856. <div class="chats">
  1857. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  1858. </div>
  1859. {/block:Lines}
  1860. {/block:Chat}
  1861.  
  1862. {block:Link}
  1863. <nav class="linkp" id="linkp">
  1864. <a href="{URL}"><span data-hover="{Name}">{Name}</span></a>
  1865. </nav>
  1866. {block:Description}{Description}{/block:Description}
  1867. {/block:Link}
  1868.  
  1869. {block:Date}
  1870. <div class="footer">
  1871. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  1872.  
  1873. {block:NoteCount}
  1874. <a href="{Permalink}">{NoteCount}+</a>
  1875. {/block:NoteCount}
  1876.  
  1877. {block:RebloggedFrom}
  1878. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1879.  
  1880. {block:ContentSource}
  1881. <a href="{SourceURL}" title="{ReblogRootName}">src</a>
  1882. {/block:ContentSource}
  1883. {/block:RebloggedFrom}
  1884.  
  1885. <a href="{ReblogURL}"><span class="fontawesome-refresh"></span></a>
  1886.  
  1887. </div>
  1888.  
  1889. {block:HasTags}
  1890. <div class="tags">
  1891. {block:Tags}
  1892. <a href="{TagURL}">{Tag}</a>
  1893. {/block:Tags}
  1894. </div>
  1895. {/block:HasTags}
  1896.  
  1897. {/block:Date}
  1898.  
  1899. </div>
  1900.  
  1901. {block:PermalinkPage}
  1902. {block:date}
  1903. {block:NoteCount}
  1904. <div class="posts">
  1905.  
  1906. <div class="notes">
  1907. <h1>Notes</h1>
  1908. {block:PostNotes}
  1909. {PostNotes}
  1910. {/block:PostNotes}
  1911. </div>
  1912.  
  1913. </div>
  1914. {block:NoteCount}
  1915. {/block:date}
  1916. {/block:PermalinkPage}
  1917. {/block:Posts}
  1918. </div>
  1919.  
  1920. {block:ifscrolltotopbutton}
  1921. <div id="scroll-to-top">
  1922. <a class="top" href="#">Top</a>
  1923. </div>
  1924. {/block:ifscrolltotopbutton}
  1925.  
  1926.  
  1927. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1928. <div id="leo">
  1929. <a href="http://hermionejean.co.vu">♚</a>
  1930. </div>
  1931. <!--END OF CREDIT-->
  1932.  
  1933.  
  1934. <!--Scripts-->
  1935. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  1936. <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.3.min.js"><\/script>')</script>
  1937.  
  1938.  
  1939. <script>
  1940. (function($, window, document, undefined) {
  1941.  
  1942. $.fn.animateIn = function(options) {
  1943. var self = $(this);
  1944.  
  1945. var settings = $.extend({
  1946. class: 'class',
  1947. inter: 60
  1948. }, options);
  1949.  
  1950. var action = function() {
  1951. (function animate(counter) {
  1952.  
  1953. setTimeout(function() {
  1954.  
  1955. self.eq(counter).addClass(settings.class);
  1956.  
  1957. counter++;
  1958.  
  1959. if (counter < self.length) animate(counter);
  1960.  
  1961. }, settings.inter);
  1962.  
  1963. })(0);
  1964. };
  1965.  
  1966. var events = function() {
  1967. $(document).on('ready', action);
  1968. };
  1969.  
  1970. events();
  1971. };
  1972.  
  1973. $('.tiles__tile').animateIn({
  1974. class: 'tiles__tile--enter',
  1975. inter: 90
  1976. });
  1977.  
  1978. // blog post thumbnails entrance animation
  1979. $('.posts__thumb').animateIn({
  1980. class: 'posts__thumb--show',
  1981. inter: 90
  1982. });
  1983.  
  1984. // work tiles entrance animation
  1985. $('.work__tile').animateIn({
  1986. class: 'work__tile--show',
  1987. inter: 120
  1988. });
  1989.  
  1990. }(jQuery, window, document));
  1991. (function($, window, document, undefined) {
  1992. 'use strict';
  1993.  
  1994. var Menu = (function() {
  1995.  
  1996. var elements = {
  1997. hamburger: $('#js-hamburger'),
  1998. menu: $('#js-menu'),
  1999. menuList: $('#js-menu').find('.menu__list'),
  2000. logo: $('#js-menu').find('.menu__logo'),
  2001. link: $('#js-menu').find('a'),
  2002. win: $(window)
  2003. };
  2004.  
  2005. var open = function(event) {
  2006. event.preventDefault();
  2007. var e = elements;
  2008. e.hamburger.toggleClass('c-hamburger--close');
  2009. e.menu.toggleClass('menu--active');
  2010. e.menuList.toggleClass('menu__list--active');
  2011. e.logo.toggleClass('menu__logo--active');
  2012. e.link.toggleClass('menu__link--active');
  2013. };
  2014.  
  2015. var close = function() {
  2016. var e = elements;
  2017. if (e.menu.hasClass('menu--open')) {
  2018. e.hamburger.removeClass('c-hamburger--close');
  2019. e.menuList.removeClass('menu__list--active');
  2020. e.logo.removeClass('menu__logo--active');
  2021. e.link.removeClass('menu__link--active');
  2022. e.removeClass('menu--active');
  2023. }
  2024. };
  2025.  
  2026. var bindActions = function() {
  2027. var e = elements;
  2028. e.hamburger.on('click', open);
  2029. e.win.on('click', close);
  2030. };
  2031.  
  2032. var init = function() {
  2033. bindActions();
  2034. };
  2035.  
  2036. return {
  2037. init: init
  2038. };
  2039.  
  2040. }());
  2041.  
  2042. var Tiles = (function() {
  2043.  
  2044. var tileBtn = $('li.tiles__tile');
  2045. var allContent = $('li.tiles-content__item');
  2046. var contentWrap = $('.tiles-content__wrapper');
  2047. var header = $('#border1');
  2048. var backBtn = $('.js-tiles-back');
  2049. var nextBtn = $('.js-tiles-next');
  2050. var closeBtn = $('.js-tiles-close');
  2051.  
  2052. var open = function() {
  2053. var self = $(this);
  2054. var match = self.attr('data-tile');
  2055. var content = $('li#' + match);
  2056.  
  2057. self.toggleClass('active');
  2058. content.toggleClass('active');
  2059. contentWrap.css({'transition-delay': '.35s'});
  2060. header.addClass('header--hidden');
  2061.  
  2062. return false;
  2063. };
  2064.  
  2065. var close = function(event) {
  2066. if (allContent.hasClass('active')) {
  2067. allContent.removeClass('active');
  2068. setTimeout(function() {
  2069. tileBtn.removeClass('active');
  2070. }, 400);
  2071. contentWrap.css({'transition-delay': '0'});
  2072. header.removeClass('header--hidden');
  2073.  
  2074. }
  2075. };
  2076.  
  2077. var next = function() {
  2078. var activeSlide = $('.tiles-content__item.active');
  2079. var nextSlide = activeSlide.next();
  2080.  
  2081. var activeBtn = $('.tiles__tile.active');
  2082. var nextBtn = activeBtn.next();
  2083.  
  2084. if (nextSlide.length === 0) {
  2085. nextSlide = allContent.eq(0);
  2086. nextBtn = tileBtn.eq(0);
  2087. }
  2088.  
  2089. nextSlide.addClass('active');
  2090. activeSlide.removeClass('active');
  2091.  
  2092. nextBtn.addClass('active');
  2093. activeBtn.removeClass('active');
  2094. };
  2095.  
  2096. var prev = function() {
  2097. var activeSlide = $('.tiles-content__item.active');
  2098. var prevSlide = activeSlide.prev();
  2099.  
  2100. var activeBtn = $('.tiles__tile.active');
  2101. var prevBtn = activeBtn.prev();
  2102.  
  2103. if (prevSlide.length === 0) {
  2104. prevSlide = allContent.eq(0);
  2105. prevBtn = tileBtn.eq(0);
  2106. }
  2107.  
  2108. prevSlide.addClass('active');
  2109. activeSlide.removeClass('active');
  2110.  
  2111. prevBtn.addClass('active');
  2112. activeBtn.removeClass('active');
  2113. };
  2114.  
  2115. var bindActions = function() {
  2116. tileBtn.on('click touchstart', open);
  2117. backBtn.on('click', prev);
  2118. nextBtn.on('click', next);
  2119. closeBtn.on('click', close);
  2120. };
  2121.  
  2122. var init = function() {
  2123. bindActions();
  2124. };
  2125.  
  2126. return {
  2127. init: init
  2128. };
  2129.  
  2130. }());
  2131.  
  2132. var WorkTileExpand = (function() {
  2133. var tile = $('.work__tile');
  2134. var tileBg = $('.work__tile-bg');
  2135. var tileLink = $('.work__tile a');
  2136.  
  2137. var W = $(window).width();
  2138. if (tile.length > 0) {
  2139. var TW = tile.width();
  2140. var offsetVal = tile.offset().left;
  2141. var scaleVal = W / TW;
  2142. var transVal = offsetVal - W;
  2143. }
  2144.  
  2145. var expand = function(e) {
  2146. e.preventDefault();
  2147.  
  2148. $(this).css('z-index', '50');
  2149.  
  2150. var tileBg = $(this).find('.work__tile-bg');
  2151. var nextPage = $(this).find('a').attr('href');
  2152. var title = $(this).find('.work__title');
  2153.  
  2154. // fade out title of column
  2155. title.velocity({
  2156. opacity: 0
  2157. }, {
  2158. duration: 200
  2159. });
  2160.  
  2161. // expand div inside column to take up screen
  2162. tileBg.velocity({
  2163. scaleX: scaleVal,
  2164. }, {
  2165. easing: [0.23, 1, 0.32, 1],
  2166. duration: 600,
  2167. complete: function() {
  2168. // load next page
  2169. location.href = nextPage;
  2170. }
  2171. });
  2172. };
  2173.  
  2174. var bindActions = function() {
  2175. tile.on('click', expand);
  2176. };
  2177.  
  2178. var init = function() {
  2179. bindActions();
  2180. };
  2181.  
  2182. return {
  2183. init: init
  2184. };
  2185.  
  2186. }());
  2187.  
  2188. var PageTrans = (function() {
  2189. var trigger = $('a.page-trans');
  2190. var blogHalf = $('.blog__half');
  2191. var win = $(window);
  2192.  
  2193. var trans = function() {
  2194. if (win.width() >= 1023) {
  2195. blogHalf.removeClass('blog__half-animation-left');
  2196. blogHalf.removeClass('blog__half-animation-right');
  2197. var nextPage = $(this).attr('href');
  2198. blogHalf.eq(0).velocity({
  2199. translateY: '-100%'
  2200. }, {
  2201. duration: 500,
  2202. easing: [0.755, 0.05, 0.855, 0.06],
  2203. complete: function() {
  2204. location.href = nextPage;
  2205. }
  2206. });
  2207. blogHalf.eq(1).velocity({
  2208. translateY: '100%'
  2209. }, {
  2210. duration: 500,
  2211. easing: [0.755, 0.05, 0.855, 0.06]
  2212. });
  2213.  
  2214. return false;
  2215. }
  2216. };
  2217.  
  2218. var bindActions = function() {
  2219. trigger.on('click', trans);
  2220. };
  2221.  
  2222. var init = function() {
  2223. bindActions();
  2224. };
  2225.  
  2226. return {
  2227. init: init
  2228. };
  2229.  
  2230. }());
  2231.  
  2232. var VerticalSlider = (function() {
  2233. var w = $(window);
  2234. var list = $('.vs__list');
  2235. var item = $('.vs__item');
  2236. var nextBtn = $('.vs__next');
  2237. var prevBtn = $('.vs__prev');
  2238. var len = item.length;
  2239.  
  2240. var setup = function() {
  2241. item.first().addClass('vs__item--active');
  2242. };
  2243.  
  2244. var next = function() {
  2245. var cur = list.find('.vs__item--active');
  2246. var nex = cur.next('.vs__item');
  2247. if (!nex.length) {
  2248. nex = item.first();
  2249. }
  2250. var nexIn = nex.index();
  2251. var val = (nexIn/len) * 100;
  2252.  
  2253. cur.removeClass('vs__item--active');
  2254. nex.addClass('vs__item--active');
  2255.  
  2256. list.css({
  2257. 'transform': 'translate3d(0,-' + val + '00%,0)',
  2258. '-webkit-transform': 'translate3d(0,-' + val + '00%,0)'
  2259. });
  2260.  
  2261. bgcolor();
  2262.  
  2263. return false;
  2264. };
  2265.  
  2266. var prev = function() {
  2267. var cur = list.find('.vs__item--active');
  2268. var pre = cur.prev('.vs__item');
  2269. if (!pre.length) {
  2270. pre = item.last();
  2271. }
  2272. var preIn = pre.index();
  2273. var val = (preIn/len) * 100;
  2274.  
  2275. cur.removeClass('vs__item--active');
  2276. pre.addClass('vs__item--active');
  2277.  
  2278. list.css({
  2279. 'transform': 'translate3d(0,-' + val + '00%,0)',
  2280. '-webkit-transform': 'translate3d(0,-' + val + '00%,0)'
  2281. });
  2282.  
  2283. bgcolor();
  2284.  
  2285. return false;
  2286. };
  2287.  
  2288. var bgcolor = function() {
  2289. if (item.eq(0).hasClass('vs__item--active')) {
  2290. list.css('background', 'rgba(147, 115, 191, 1)');
  2291. } else if (item.eq(1).hasClass('vs__item--active')) {
  2292. list.css('background', 'tomato');
  2293. } else if (item.eq(2).hasClass('vs__item--active')) {
  2294. list.css('background', 'deepskyblue');
  2295. } else {
  2296. return;
  2297. }
  2298. };
  2299.  
  2300. var bindActions = function() {
  2301. setup();
  2302. nextBtn.on('click', next);
  2303. prevBtn.on('click', prev);
  2304. };
  2305.  
  2306. var init = function() {
  2307. bindActions();
  2308. };
  2309.  
  2310. return {
  2311. init: init
  2312. };
  2313.  
  2314. }());
  2315.  
  2316. var CommunicationSlides = (function() {
  2317. var link = $('.com__nav-link');
  2318. var linkParent = link.parent('li');
  2319. var section = $('.com__section');
  2320. var sectionContent = section.find('*');
  2321.  
  2322. var switchTab = function() {
  2323. var p = $(this).parent('li');
  2324. var i = p.index();
  2325. var s = section.eq(i);
  2326. var c = s.find('*');
  2327.  
  2328. section.removeClass('active');
  2329. sectionContent.removeAttr('style');
  2330. s.addClass('active');
  2331.  
  2332. c.css({
  2333. transform: 'none',
  2334. opacity: 1
  2335. });
  2336.  
  2337. linkParent.removeClass('active');
  2338. p.addClass('active');
  2339.  
  2340. return false;
  2341. };
  2342.  
  2343. function activeFirst() {
  2344. section.first().addClass('active');
  2345. section.first().find('*').css({
  2346. transform: 'none',
  2347. opacity: 1
  2348. });
  2349. linkParent.first().addClass('active');
  2350. }
  2351.  
  2352. activeFirst();
  2353.  
  2354. var bindActions = function() {
  2355. link.on('click', switchTab);
  2356. };
  2357.  
  2358. var init = function() {
  2359. bindActions();
  2360. };
  2361.  
  2362. return {
  2363. init: init
  2364. };
  2365.  
  2366. }());
  2367.  
  2368. Menu.init();
  2369. Tiles.init();
  2370. WorkTileExpand.init();
  2371. PageTrans.init();
  2372. VerticalSlider.init();
  2373. CommunicationSlides.init();
  2374.  
  2375. /** Convert linked SVG into inline SVG
  2376. * Allows SVG to be styled using CSS and keeps HTML clean.
  2377. */
  2378.  
  2379. $('img.c-svg').each(function() {
  2380. var $img = jQuery(this);
  2381. var imgID = $img.attr('id');
  2382. var imgClass = $img.attr('class');
  2383. var imgURL = $img.attr('src');
  2384.  
  2385. jQuery.get(imgURL, function(data) {
  2386. // Get the SVG tag, ignore the rest
  2387. var $svg = jQuery(data).find('svg');
  2388.  
  2389. // Add replaced image's ID to the new SVG
  2390. if (typeof imgID !== 'undefined') {
  2391. $svg = $svg.attr('id', imgID);
  2392. }
  2393. // Add replaced image's classes to the new SVG
  2394. if (typeof imgClass !== 'undefined') {
  2395. $svg = $svg.attr('class', imgClass + ' replaced-svg');
  2396. }
  2397.  
  2398. // Remove any invalid XML tags as per http://validator.w3.org
  2399. $svg = $svg.removeAttr('xmlns:a');
  2400.  
  2401. // Replace image with new SVG
  2402. $img.replaceWith($svg);
  2403.  
  2404. }, 'xml');
  2405.  
  2406. });
  2407.  
  2408. }(jQuery, window, document));
  2409. (function() {
  2410. function whichAnimationEvent(){
  2411. var t,
  2412. el = document.createElement("fakeelement");
  2413.  
  2414. var animations = {
  2415. "animation" : "animationend",
  2416. "OAnimation" : "oAnimationEnd",
  2417. "MozAnimation" : "animationend",
  2418. "WebkitAnimation": "webkitAnimationEnd"
  2419. };
  2420.  
  2421. for (t in animations){
  2422. if (el.style[t] !== undefined){
  2423. return animations[t];
  2424. }
  2425. }
  2426. }
  2427.  
  2428. var animationEvent = whichAnimationEvent();
  2429.  
  2430. var elem = $('.io');
  2431.  
  2432. $(document).on('ready', function() {
  2433. setTimeout(function() {
  2434. return elem.addClass('animate');
  2435. }, 10);
  2436.  
  2437. elem.addClass('grow');
  2438.  
  2439. elem.one(animationEvent, function(event) {
  2440. $(this).css('opacity', '0.2');
  2441. $('.intro__title').addClass('intro__title--active');
  2442. $('.intro__subtitle').addClass('intro__subtitle--active');
  2443. });
  2444. });
  2445. }).call(this);
  2446. </script>
  2447.  
  2448.  
  2449. <script>
  2450. // http://unheap.com
  2451.  
  2452. $(function() {
  2453. $('.browsehappy').click(function() {
  2454. $(this).slideUp();
  2455. });
  2456. });
  2457. </script>
  2458.  
  2459. <script>
  2460. $(function() {
  2461.  
  2462. (function() {
  2463.  
  2464. var Menu = (function() {
  2465. var burger = document.querySelector('.burger');
  2466. var menu = document.querySelector('.menu');
  2467. var menuList = document.querySelector('.menu__list');
  2468. var brand = document.querySelector('.menu__brand');
  2469. var menuItems = document.querySelectorAll('.menu__item');
  2470.  
  2471. var active = false;
  2472.  
  2473. var toggleMenu = function() {
  2474. if (!active) {
  2475. menu.classList.add('menu--active');
  2476. menuList.classList.add('menu__list--active');
  2477. brand.classList.add('menu__brand--active');
  2478. burger.classList.add('burger--close');
  2479. for (var i = 0, ii = menuItems.length; i < ii; i++) {
  2480. menuItems[i].classList.add('menu__item--active');
  2481. }
  2482.  
  2483. active = true;
  2484. } else {
  2485. menu.classList.remove('menu--active');
  2486. menuList.classList.remove('menu__list--active');
  2487. brand.classList.remove('menu__brand--active');
  2488. burger.classList.remove('burger--close');
  2489. for (var i = 0, ii = menuItems.length; i < ii; i++) {
  2490. menuItems[i].classList.remove('menu__item--active');
  2491. }
  2492.  
  2493. active = false;
  2494. }
  2495. };
  2496.  
  2497. var bindActions = function() {
  2498. burger.addEventListener('click', toggleMenu, false);
  2499. };
  2500.  
  2501. var init = function() {
  2502. bindActions();
  2503. };
  2504.  
  2505. return {
  2506. init: init
  2507. };
  2508.  
  2509. }());
  2510.  
  2511. Menu.init();
  2512.  
  2513. }());
  2514.  
  2515. });
  2516. </script>
  2517.  
  2518.  
  2519. </body>
  2520. </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!