API tools faq
paste
hermionemessi

Theme 15 v2

hermionemessi
Dec 24th, 2018
482
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--THEME 15 Natale v2 by hermionegrangcr
  4.  
  5. THEME BLOG: grangersdesigns
  6.  
  7.  
  8. ♛ ♛ ♛
  9. ♛♛♛ ♛♛♛ ♛♛♛
  10. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  11. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  12. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  14.  
  15.  
  16. Important:
  17.  
  18. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  19.  
  20. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  21.  
  22. ♚ Tweak this to your preference as long as the credits remain intact.
  23.  
  24. ♚ If you encounter any issues or have any suggestions, please message me at https://granger.cf/faq
  25.  
  26. -->
  27. <head>
  28.  
  29. <meta charset="UTF-8" />
  30. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  31. <meta name="viewport" content="width=device-width, initial-scale=1">
  32.  
  33. <link rel="shortcut icon" href="{Favicon}">
  34.  
  35. <title>{Title}</title>
  36.  
  37. <meta name="if:snow"content="">
  38. <meta name="if:multicolumn"content="">
  39. <meta name="if:unnested captions" content="">
  40. <meta name="if:show blogroll"content="">
  41. <meta name="if:manual load" content="">
  42.  
  43. <meta name="image:header"content="https://i.imgur.com/l8NSiD9.png">
  44. <meta name="image:menu"content="https://i.imgur.com/l8NSiD9.png">
  45. <meta name="color:grad 1"content="#A7BFE8">
  46. <meta name="color:grad 2"content="#6190E8">
  47. <meta name="color:accent"content="#192C6D">
  48. <meta name="color:highlight"content="#D1E7F0">
  49.  
  50. <meta name="select:font size" content="16px" title="16px">
  51. <meta name="select:font size" content="14px" title="14px">
  52. <meta name="select:font size" content="12px" title="12px">
  53. <meta name="select:font size" content="11px" title="11px">
  54. <meta name="select:font size" content="10px" title="10px">
  55. <meta name="select:font size" content="9px" title="9px">
  56.  
  57.  
  58. <meta name="select:post width"content="post500"title="500px"/>
  59. <meta name="select:post width"content="post540"title="540px"/>
  60. <meta name="select:post width"content="post450"title="450px"/>
  61. <meta name="select:post width"content="post400"title="400px"/>
  62. <meta name="select:post width"content="post350"title="350px"/>
  63.  
  64. <meta name="select:photoset gutter"content="5px"title="5px">
  65. <meta name="select:photoset gutter"content="10px"title="10px">
  66. <meta name="select:photoset gutter"content="2px"title="2px">
  67. <meta name="select:photoset gutter"content="1px"title="1px">
  68. <meta name="select:photoset gutter"content="0px"title="0px">
  69.  
  70. <meta name="select:post spacing" content="150px">
  71. <meta name="select:post spacing" content="60px">
  72. <meta name="select:post spacing" content="80px">
  73. <meta name="select:post spacing" content="100px">
  74. <meta name="select:post spacing" content="120px">
  75.  
  76. <meta name="select:notes display" content="def_notes" title="default">
  77. <meta name="select:notes display" content="txt_notes" title="text only">
  78. <meta name="select:notes display" content="grid_notes" title="grid">
  79.  
  80. <meta name="text:Link1" content="Link 1">
  81. <meta name="text:link1 URL" content="/">
  82. <meta name="text:Link2" content="Link 2">
  83. <meta name="text:link2 URL" content="/">
  84. <meta name="text:Link3" content="Link 3">
  85. <meta name="text:link3 URL" content="/">
  86.  
  87. <meta name="text:basic info" content="name, age, mbti">
  88. <meta name="text:info text" content="Lorem Ipsum">
  89.  
  90. <meta name="text:question 1" content="This is a question?">
  91. <meta name="text:answer 1" content="This is an answer.">
  92. <meta name="text:question 2" content="This is a question?">
  93. <meta name="text:answer 2" content="This is an answer.">
  94. <meta name="text:question 3" content="This is a question?">
  95. <meta name="text:answer 3" content="This is an answer.">
  96.  
  97. <meta name="text:nav category 1" content="category 1">
  98. <meta name="text:nav category 2" content="category 2">
  99. <meta name="text:nav category 3" content="category 3">
  100. <meta name="text:nav category 4" content="category 4">
  101. <meta name="text:nav category 5" content="category 5">
  102. <meta name="text:nav category 6" content="category 6">
  103.  
  104. <meta name="text:navilink 1" content="link">
  105. <meta name="text:navilink 1 URL" content="/">
  106. <meta name="text:navilink 2" content="link">
  107. <meta name="text:navilink 2 URL" content="/">
  108. <meta name="text:navilink 3" content="link">
  109. <meta name="text:navilink 3 URL" content="/">
  110. <meta name="text:navilink 4" content="link">
  111. <meta name="text:navilink 4 URL" content="/">
  112. <meta name="text:navilink 5" content="link">
  113. <meta name="text:navilink 5 URL" content="/">
  114. <meta name="text:navilink 6" content="link">
  115. <meta name="text:navilink 6 URL" content="/">
  116. <meta name="text:navilink 7" content="link">
  117. <meta name="text:navilink 7 URL" content="/">
  118. <meta name="text:navilink 8" content="link">
  119. <meta name="text:navilink 8 URL" content="/">
  120. <meta name="text:navilink 9" content="link">
  121. <meta name="text:navilink 9 URL" content="/">
  122. <meta name="text:navilink 10" content="link">
  123. <meta name="text:navilink 10 URL" content="/">
  124. <meta name="text:navilink 11" content="link">
  125. <meta name="text:navilink 11 URL" content="/">
  126. <meta name="text:navilink 12" content="link">
  127. <meta name="text:navilink 12 URL" content="/">
  128. <meta name="text:navilink 13" content="link">
  129. <meta name="text:navilink 13 URL" content="/">
  130. <meta name="text:navilink 14" content="link">
  131. <meta name="text:navilink 14 URL" content="/">
  132. <meta name="text:navilink 15" content="link">
  133. <meta name="text:navilink 15 URL" content="/">
  134. <meta name="text:navilink 16" content="link">
  135. <meta name="text:navilink 16 URL" content="/">
  136. <meta name="text:navilink 17" content="link">
  137. <meta name="text:navilink 17 URL" content="/">
  138. <meta name="text:navilink 18" content="link">
  139. <meta name="text:navilink 18 URL" content="/">
  140. <meta name="text:navilink 19" content="link">
  141. <meta name="text:navilink 19 URL" content="/">
  142. <meta name="text:navilink 20" content="link">
  143. <meta name="text:navilink 20 URL" content="/">
  144. <meta name="text:navilink 21" content="link">
  145. <meta name="text:navilink 21 URL" content="/">
  146. <meta name="text:navilink 22" content="link">
  147. <meta name="text:navilink 22 URL" content="/">
  148. <meta name="text:navilink 23" content="link">
  149. <meta name="text:navilink 23 URL" content="/">
  150. <meta name="text:navilink 24" content="link">
  151. <meta name="text:navilink 24 URL" content="/">
  152.  
  153.  
  154. <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
  155. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
  156. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  157.  
  158. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  159.  
  160. <style type="text/css">
  161.  
  162. ::-webkit-scrollbar {
  163. width:12px;
  164. background:#fff;
  165. }
  166.  
  167. ::-webkit-scrollbar:horizontal {display:none;}
  168.  
  169. ::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:5px solid #f5f5f5; border-radius:1ex;}
  170.  
  171. #s-m-t-tooltip{
  172. position:absolute;
  173. margin-top: 20px;
  174. z-index:9999999999;
  175. font-family:'raleway';
  176. padding:2px 5px 2px 5px;
  177. color:#5f5f5f;
  178. font-weight:300;
  179. max-width:500px;
  180. letter-spacing:1.5px;
  181. background: #fff;
  182. font-size:{select:font size};
  183. text-transform:uppercase;
  184. -webkit-box-shadow: 1px 1px 2px 0px #eaeaea;
  185. -moz-box-shadow: 1px 1px 2px 0px #eaeaea;
  186. box-shadow: 1px 1px 2px 0px #eaeaea;
  187. border-radius:1%;
  188.  
  189. }
  190.  
  191.  
  192.  
  193. iframe.tmblr-iframe.iframe-controls--desktop {
  194. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  195. -webkit-transform:scale(0.8);
  196. -webkit-transform-origin:right;
  197. -moz-transform:scale(0.8);
  198. -moz-transform-origin:right;
  199. -o-transform:scale(0.8);
  200. -o-transform-origin:right;
  201. -ms-transform:scale(0.8);
  202. -ms-transform-origin:right;
  203. transform:scale(0.8);
  204. transform-origin:right;
  205. }
  206.  
  207. .tmblr-iframe.tmblr-iframe--app-cta-button.tmblr-iframe--loaded,iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded:not(.iframe-controls--desktop) {display:none!important;}
  208.  
  209. .tmblr-iframe-pushdown {padding-top: 0 !important;}
  210.  
  211. {block:permalinkpage}
  212. iframe.tmblr-iframe--unified-controls {max-width:500px!important;}
  213. {/block:permalinkpage}
  214.  
  215. .animsition-loading {display:none;}
  216.  
  217. *,
  218. *::before,
  219. *::after {
  220. box-sizing: inherit;
  221. -webkit-box-sizing: inherit;
  222. -moz-box-sizing: inherit;
  223. }
  224. html {
  225. box-sizing: border-box;
  226. -webkit-box-sizing: border-box;
  227. -moz-box-sizing: border-box;
  228. }
  229.  
  230. html, body {
  231.  
  232. margin:0;
  233. }
  234.  
  235. body {
  236. font-size:{select:font size};
  237. font-family:'lora';
  238. line-height:180%;
  239. color:#5f5f5f;
  240. background-attachment:fixed;
  241. -webkit-font-smoothing: antialiased;
  242. -moz-osx-font-smoothing: grayscale;
  243. }
  244.  
  245. a {
  246. text-decoration:none;
  247. color:#999;
  248. cursor:help;
  249. -webkit-transition: all 0.3s ease-in-out;
  250. transition:all 0.3s ease-in-out;
  251. }
  252.  
  253. a:hover {
  254. color:{color:highlight};
  255. -webkit-transition: all 0.3s ease-in-out;
  256. transition:all 0.3s ease-in-out;
  257. }
  258.  
  259. main {
  260. display:block;
  261. width:100%;
  262. height:100%;
  263. }
  264.  
  265. aside {
  266. width:120px;
  267. position:fixed;
  268. height:100%;
  269. top:0;
  270. left:0;
  271. z-index:90;
  272. color:#fff;
  273. background: {color:grad 1}; /* fallback for old browsers */
  274. background: -webkit-linear-gradient(to bottom, {color:grad 1}, {color:grad 2}); /* Chrome 10-25, Safari 5.1-6 */
  275. background: linear-gradient(to bottom, {color:grad 1}, {color:grad 2}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  276. overflow:hidden;
  277. }
  278.  
  279. .sb_cont {
  280. width:100%;
  281. height:100%;
  282. position:absolute;
  283. top:0;
  284. left:0;
  285. display:flex;
  286. align-items:flex-start;
  287. justify-content:center;
  288. z-index:91;
  289.  
  290. }
  291.  
  292. nav.sbnav {text-align:center;width:100%;padding-top:160px;}
  293. nav.sbnav a {
  294. margin:auto;
  295. display:block;
  296. color:#fff;
  297. border-radius:5%;
  298. font-size:24px;
  299. text-align:center;
  300. width:40px;
  301. height:40px;
  302. line-height:40px;
  303. background:rgba(255,255,255,0.3);
  304. }
  305.  
  306. nav.sbnav a:hover, nav.sbnav a.active {
  307. background:rgba({RGBcolor:accent},0.8);
  308. }
  309.  
  310. nav.sbnav > a + a {margin-top:32px;}
  311.  
  312.  
  313. section {
  314. width:calc(100% - 120px);
  315. margin-left:120px;
  316. height:100%;
  317. position:relative;
  318. }
  319.  
  320. .singlecol .tabs {margin:auto;}
  321.  
  322. .singlecol.post540 .tabs {width:540px;}
  323. .singlecol.post500 .tabs {width:500px;}
  324. .singlecol.post450 .tabs {width:450px;}
  325. .singlecol.post400 .tabs {width:400px;}
  326. .singlecol.post350 .tabs {width:350px;}
  327.  
  328. .singlecol article {
  329. margin:{select:post spacing} auto;
  330. }
  331.  
  332. .singlecol article:first-of-type {
  333. margin-top:100px;
  334. }
  335.  
  336.  
  337.  
  338. {block:indexpage}
  339.  
  340.  
  341. .multicol div#entries, .multicol header {
  342. max-width:90%;
  343. }
  344.  
  345. {/block:indexpage}
  346.  
  347. div.tabs {padding-top:60px;padding-bottom:60px;}
  348.  
  349. .multicol div.tabstuff {width:calc(100% - 64px);max-width:700px;margin:auto;}
  350.  
  351.  
  352.  
  353. @media (min-width: 1001px) {
  354. .multicol div#entries, .multicol header {
  355. min-width:500px;
  356. }
  357. }
  358.  
  359. div#entries {
  360. margin:60px auto;
  361. }
  362.  
  363. header {
  364. position:relative;
  365. overflow:hidden;
  366. margin: auto;
  367. border-radius:5px;
  368. color:#fff;
  369. background: {color:grad 1}; /* fallback for old browsers */
  370. background: -webkit-linear-gradient(to right, {color:grad 1}, {color:grad 2}); /* Chrome 10-25, Safari 5.1-6 */
  371. background: linear-gradient(to right, {color:grad 1}, {color:grad 2}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  372. }
  373.  
  374. header .snowflakes {top:-100%;}
  375.  
  376. h1, h2 {font-family:'abril fatface';font-weight:400;}
  377.  
  378. header h1 {font-size:30px;margin:0;}
  379.  
  380. header nav.h_nav {margin-top:16px;font-family:'raleway';}
  381.  
  382. header a {color:#fff;border-bottom:1px solid #fff;}
  383. header a:hover {color:{color:accent};border-bottom:1px solid {color:accent};}
  384.  
  385. nav.h_nav > a + a {margin-left:16px;}
  386.  
  387. div.h_desc {
  388. max-width:700px;
  389. max-width:100%;
  390. margin:auto;
  391. padding:30px;
  392. position:relative;
  393. display:flex;
  394. align-items:center;
  395. z-index:2;
  396. }
  397.  
  398. .singlecol div.h_desc { align-items:flex-start;}
  399.  
  400. .h_desc img {
  401. border-radius:5%;
  402. width:180px;
  403. height:180px;
  404. display:block;
  405. }
  406.  
  407. .singlecol .h_desc img {
  408. width:128px;
  409. height:128px;
  410. }
  411.  
  412. .h_txt {
  413. width:calc(100% - 180px);
  414. padding-left:32px;
  415. }
  416.  
  417. .singlecol .h_txt {
  418. width:calc(100% - 128px);
  419. padding-left:24px;
  420. }
  421.  
  422. .h_desc p {font-style:italic;}
  423.  
  424. {block:indexpage}
  425. body.multicol #entries {
  426. margin:100px auto;
  427. column-count: 2;
  428. column-gap: 48px;
  429. padding:4%;
  430. padding-top:64px;
  431. }
  432.  
  433. @media (min-width:1600px){
  434.  
  435. body.multicol #entries {
  436. margin:100px auto;
  437. column-count: 3;
  438. column-gap: 48px;
  439. padding:4%;
  440. padding-top:80px;
  441. -webkit-column-break-inside: avoid;
  442. page-break-inside: avoid;
  443. break-inside: avoid;
  444. }
  445.  
  446. }
  447.  
  448. @media (max-width:800px){
  449.  
  450. body.multicol #entries {
  451. margin:100px auto;
  452. column-count: 1;
  453. column-gap: 0;
  454. padding:0;
  455. padding-top:80px;
  456. -webkit-column-break-inside: avoid;
  457. page-break-inside: avoid;
  458. break-inside: avoid;
  459. }
  460.  
  461. }
  462.  
  463.  
  464.  
  465. body.multicol article {
  466. width:100%;
  467. position:relative;
  468. display:inline-block;
  469. margin: 0 0 32px;
  470. }
  471.  
  472.  
  473. @media (max-width:800px){
  474.  
  475. body.multicol article {
  476. display:block;
  477. margin: {select:post spacing} auto;
  478. }
  479.  
  480. }
  481.  
  482. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  483. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  484. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  485. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  486.  
  487. {block:ifmanualload}
  488. .posts {
  489. -webkit-animation:fadeIn ease-in 1s;
  490. -o-animation:fadeIn ease-in 1s;
  491. -moz-animation:fadeIn ease-in 1s;
  492. animation:fadeIn ease-in 1s;
  493. }
  494. {/block:ifmanualload}
  495.  
  496. {/block:indexpage}
  497.  
  498. .postwrap {
  499. width:100%;
  500. box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.25);
  501. }
  502.  
  503. {block:permalinkpage}
  504. body.multicol .tabs {
  505. width:calc(100% - 64px);max-width:700px;
  506. margin:auto;
  507. padding-top:60px;
  508. }
  509.  
  510. body.multicol article {
  511. width:100%;
  512. margin:{select:post spacing} auto;
  513.  
  514. }
  515.  
  516.  
  517. {/block:permalinkpage}
  518.  
  519. .snowflakes {
  520. width: 1200px; height: 100%;
  521. position: absolute; top: -120px; left: 0;
  522. }
  523.  
  524. .snowflakes i, .snowflakes i:after,.snowflakes i:before { background: white; }
  525. .snowflakes i {
  526. display: inline-block;
  527. -webkit-animation: snowflakes 3s linear 2s 20;
  528. -moz-animation: snowflakes 3s linear 2s 20;
  529. position: relative;
  530. }
  531. .snowflakes i:after, .snowflakes i:before {
  532. height: 100%;
  533. width: 100%;
  534. content: ".";
  535. position: absolute;
  536. top: 0px;
  537. left: 0px;
  538. -webkit-transform: rotate(120deg);
  539. }
  540. .snowflakes i:before { -webkit-transform: rotate(240deg); }
  541.  
  542. @-webkit-keyframes snowflakes {
  543. 0% {
  544. -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
  545. }
  546. 100% {
  547. -webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
  548. };
  549. }
  550.  
  551. .snowflakes i:nth-child(3n) {
  552. width: 16px; height: 4px;
  553. -webkit-animation-duration: 4s;
  554. -webkit-animation-iteration-count: infinite;
  555. -webkit-transform-origin: right -45px;
  556. }
  557.  
  558. .snowflakes i:nth-child(3n+1) {
  559. width: 20px; height: 6px;
  560. -webkit-animation-duration: 6s;
  561. -webkit-animation-iteration-count: infinite;
  562. -webkit-transform-origin: right -30px;
  563. }
  564.  
  565. .snowflakes i:nth-child(3n+2) {
  566. width: 24px; height: 8px;
  567. -webkit-animation-duration: 8s;
  568. -webkit-animation-iteration-count: infinite;
  569. -webkit-transform-origin: right -15px;
  570. }
  571.  
  572. /* different delays so they don't all start at the same time */
  573. .snowflakes i:nth-child(7n) {
  574. opacity:.2;
  575. -webkit-animation-delay: 0s;
  576. -webkit-animation-timing-function:ease-in;
  577. }
  578. .snowflakes i:nth-child(7n+1) {
  579. opacity:.3;
  580. -webkit-animation-delay: 1s;
  581. -webkit-animation-timing-function:ease-out;
  582. }
  583. .snowflakes i:nth-child(7n+2) {
  584. opacity:.4;
  585. -webkit-animation-delay: 1.5s;
  586. -webkit-animation-timing-function:linear;
  587. }
  588. .snowflakes i:nth-child(7n+3) {
  589. opacity:.5;
  590. -webkit-animation-delay: 2s;
  591. -webkit-animation-timing-function:ease-in;
  592. }
  593. .snowflakes i:nth-child(7n+4) {
  594. opacity:.6;
  595. -webkit-animation-delay: 2.5s;
  596. -webkit-animation-timing-function:linear;
  597. }
  598. .snowflakes i:nth-child(7n+5) {
  599. opacity:.7;
  600. -webkit-animation-delay: 3s;
  601. -webkit-animation-timing-function:ease-out;
  602. }
  603. .snowflakes i:nth-child(7n+6) {
  604. opacity:.8;
  605. -webkit-animation-delay: 3.5s;
  606. -webkit-animation-timing-function:ease-in;
  607. }
  608.  
  609.  
  610.  
  611. /* ====================================
  612. Navigation
  613. ==================================== */
  614.  
  615. .overlay-navigation {
  616. position: fixed;
  617. z-index: 99;
  618. top: 0;
  619. left: 0;
  620. width: 100%;
  621. height: 100%;
  622. background-color: rgba(255,255,255,0.3);
  623. display: none;
  624. opacity: 0;
  625.  
  626. }
  627.  
  628. nav#split-box,
  629. nav#split-box ul {
  630. width: 100%;
  631. height: 100%;
  632. margin: 0;
  633. padding: 0;
  634.  
  635. }
  636.  
  637. nav#split-box ul {
  638. display: flex;
  639. list-style: none;
  640. }
  641.  
  642. nav#split-box ul li {
  643. flex-basis: 50%;
  644. justify-content: center;
  645. align-items: center;
  646. height: 100%;
  647. overflow: hidden;
  648. opacity: 0;
  649. display: none;
  650. position:relative;
  651. display:flex !important;
  652. align-items:center;
  653. justify-content:center;
  654. }
  655.  
  656. #split-box > ul > li > div:not(.snowflakes) {
  657. max-width:320px;
  658. margin:auto;
  659. backface-visibility: hidden;
  660. }
  661.  
  662. .menu-desc h2 {text-align:center;font-size:calc({select:font size} * 1.2);}
  663.  
  664. .menu-desc p.p-desc {font-style:italic;}
  665.  
  666. #split-box img {display:block;width:100%;margin:auto;border-radius:2%;}
  667.  
  668. nav#split-box li:nth-of-type(1) {
  669. background-color: #fff;
  670. }
  671.  
  672. nav#split-box li:nth-of-type(2) {
  673. color:#fff;
  674. background: {color:grad 1}; /* fallback for old browsers */
  675. background: -webkit-linear-gradient(to bottom, {color:grad 1}, {color:grad 2}); /* Chrome 10-25, Safari 5.1-6 */
  676. background: linear-gradient(to bottom, {color:grad 1}, {color:grad 2}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  677.  
  678. }
  679.  
  680.  
  681. /*split menu*/
  682.  
  683. /* Common styles for the menus */
  684. .menu {
  685. position: relative;
  686. z-index: 90;
  687. }
  688.  
  689. .menu__item {
  690. line-height: 1;
  691. position: relative;
  692. display: block;
  693. margin: 1em 0;
  694. outline: none;
  695. }
  696.  
  697. .menu__item-name,
  698. .menu__item-label {
  699. position: relative;
  700. display: inline-block;
  701. }
  702.  
  703. .menu__item-name {
  704. font-size: 1.25em;
  705. }
  706.  
  707. .menu__item-label {
  708. margin: 0 0 0 0.5em;
  709. }
  710.  
  711. .menu--ama {
  712. counter-reset: itemCounter;
  713. }
  714.  
  715. .menu--ama .menu__item {
  716. font-family: 'raleway', sans-serif;
  717. font-size: 1.25em;
  718. font-weight: 500;
  719. margin: 3em 0;
  720. padding-left: 0.5em;
  721. color: #fff;
  722. }
  723.  
  724. .menu--ama .menu__item:first-child, .menu--ama .menu__item:nth-child(3), .menu--ama .menu__item:nth-child(5) {
  725. --menu-item-color:{color:accent};
  726. }
  727.  
  728. .menu--ama .menu__item:nth-child(2), .menu--ama .menu__item:nth-child(4) {--menu-item-color:{color:highlight};}
  729.  
  730. .menu--ama .menu__item::before {
  731. content: counter(itemCounter,decimal-leading-zero);
  732. font-size: 0.85em;
  733. font-weight: bold;
  734. position: absolute;
  735. right: 100%;
  736. bottom: calc(100% - 0.35em);
  737. counter-increment: itemCounter;
  738. color: #fff;
  739. }
  740.  
  741. .menu--ama .menu__item:hover::before,
  742. .menu--ama .menu__item:focus::before {
  743. color: var(--menu-item-color);
  744. }
  745.  
  746. .menu--ama .menu__item-name {
  747. font-size: 1.5em;
  748. font-weight: 500;
  749. display: flex;
  750. flex-wrap: wrap;
  751. padding: 0.5em 0 0 0;
  752. white-space: pre;
  753. text-transform: lowercase;
  754. }
  755.  
  756. .menu--ama .menu__item-name::before,
  757. .menu--ama .menu__item-name::after {
  758. content: '';
  759. position: absolute;
  760. bottom: 100%;
  761. left: 0;
  762. width: 2.5em;
  763. height: 4px;
  764. background: #fff;
  765. }
  766.  
  767. .menu--ama .menu__item-name::after {
  768. background: var(--menu-item-color);
  769. transform: scale3d(0,1,1);
  770. transform-origin: 0% 50%;
  771. transition: transform 0.5s;
  772. }
  773.  
  774. .menu--ama .menu__item:hover .menu__item-name::after,
  775. .menu--ama .menu__item:focus .menu__item-name::after {
  776. transform: scale3d(1,1,1);
  777. }
  778.  
  779. .menu--ama .menu__item-name span {
  780. display: inline-block;
  781. }
  782.  
  783.  
  784. /* ====================================
  785. Burger king
  786. ==================================== */
  787.  
  788. .open-overlay {
  789. position: fixed;
  790. left: 42px;
  791. top: 3.2rem;
  792. z-index: 100;
  793. width: 34px;
  794. display: block;
  795. cursor: help;
  796. }
  797.  
  798. .open-overlay span {
  799. display: block;
  800. height: 1px;
  801. background-color: #fff;
  802. cursor: help;
  803. margin-top: 8px;
  804. }
  805.  
  806. .animate-top-bar {
  807. -webkit-animation: animate-top-bar .6s linear 1 both;
  808. animation: animate-top-bar .6s linear 1 both
  809. }
  810.  
  811. .animate-bottom-bar {
  812. -webkit-animation: animate-bottom-bar .6s linear 1 both;
  813. animation: animate-bottom-bar .6s linear 1 both
  814. }
  815.  
  816. .animate-middle-bar {
  817. -webkit-animation: animate-middle-bar .6s linear 1 both;
  818. animation: animate-middle-bar .6s linear 1 both
  819. }
  820.  
  821. .animate-out-top-bar {
  822. -webkit-animation: animate-out-top-bar .6s linear 1 both;
  823. animation: animate-out-top-bar .6s linear 1 both
  824. }
  825.  
  826. .animate-out-bottom-bar {
  827. -webkit-animation: animate-out-bottom-bar .6s linear 1 both;
  828. animation: animate-out-bottom-bar .6s linear 1 both
  829. }
  830.  
  831. .animate-out-middle-bar {
  832. -webkit-animation: animate-out-middle-bar .6s linear 1 both;
  833. animation: animate-out-middle-bar .6s linear 1 both
  834. }
  835.  
  836.  
  837. /* ====================================
  838. Animation keyframes
  839. ==================================== */
  840.  
  841. @-webkit-keyframes animate-top-bar {
  842. 0% {
  843. background-color: #fff;
  844. }
  845. 50% {
  846. -webkit-transform: translateY(9px);
  847. transform: translateY(9px)
  848. }
  849. 80% {
  850. -webkit-transform: translateY(5px);
  851. transform: translateY(5px);
  852. background-color: #fff
  853. }
  854. 100% {
  855. -webkit-transform: translateY(0);
  856. transform: translateY(0);
  857. background-color: {color:accent};
  858. }
  859. }
  860.  
  861. @keyframes animate-top-bar {
  862. 0% {
  863. background-color: #fff;
  864. }
  865. 50% {
  866. -webkit-transform: translateY(9px);
  867. transform: translateY(9px)
  868. }
  869. 80% {
  870. -webkit-transform: translateY(5px);
  871. transform: translateY(5px);
  872. background-color: #fff
  873. }
  874. 100% {
  875. -webkit-transform: translateY(0);
  876. transform: translateY(0);
  877. background-color: {color:accent};
  878. }
  879. }
  880.  
  881. @-webkit-keyframes animate-bottom-bar {
  882. 0% {
  883. background-color: #fff;
  884. }
  885. 50% {
  886. -webkit-transform: translateY(-9px);
  887. transform: translateY(-9px)
  888. }
  889. 80% {
  890. -webkit-transform: translateY(-5px);
  891. transform: translateY(-5px);
  892. background-color: #fff;
  893. }
  894. 100% {
  895. -webkit-transform: translateY(0);
  896. transform: translateY(0);
  897. background-color: {color:accent};
  898. }
  899. }
  900.  
  901. @keyframes animate-bottom-bar {
  902. 0% {
  903. background-color: #fff;
  904. }
  905. 50% {
  906. -webkit-transform: translateY(-9px);
  907. transform: translateY(-9px)
  908. }
  909. 80% {
  910. -webkit-transform: translateY(-5px);
  911. transform: translateY(-5px);
  912. background-color: #fff;
  913. }
  914. 100% {
  915. -webkit-transform: translateY(0);
  916. transform: translateY(0);
  917. background-color: {color:accent};
  918. }
  919. }
  920.  
  921. @-webkit-keyframes animate-middle-bar {
  922. 0% {
  923. background-color: #fff;
  924. }
  925. 80% {
  926. background-color: #fff;
  927. }
  928. 100% {
  929. background-color: {color:accent};
  930. }
  931. }
  932.  
  933. @keyframes animate-middle-bar {
  934. 0% {
  935. background-color: #fff;
  936. }
  937. 80% {
  938. background-color: #fff;
  939. }
  940. 100% {
  941. background-color: {color:accent};
  942. }
  943. }
  944.  
  945. @-webkit-keyframes animate-out-top-bar {
  946. 0% {
  947. background-color: {color:accent};
  948. }
  949. 50% {
  950. -webkit-transform: translateY(9px);
  951. transform: translateY(9px)
  952. }
  953. 80% {
  954. -webkit-transform: translateY(5px);
  955. transform: translateY(5px);
  956. background-color: {color:accent};
  957. }
  958. 100% {
  959. -webkit-transform: translateY(0);
  960. transform: translateY(0);
  961. background-color: #FFF;
  962. }
  963. }
  964.  
  965. @keyframes animate-out-top-bar {
  966. 0% {
  967. background-color: {color:accent};
  968. }
  969. 50% {
  970. -webkit-transform: translateY(9px);
  971. transform: translateY(9px)
  972. }
  973. 80% {
  974. -webkit-transform: translateY(5px);
  975. transform: translateY(5px);
  976. background-color: {color:accent};
  977. }
  978. 100% {
  979. -webkit-transform: translateY(0);
  980. transform: translateY(0);
  981. background-color: #FFF;
  982. }
  983. }
  984.  
  985. @-webkit-keyframes animate-out-bottom-bar {
  986. 0% {
  987. background-color: {color:accent};
  988. }
  989. 50% {
  990. -webkit-transform: translateY(-9px);
  991. transform: translateY(-9px)
  992. }
  993. 80% {
  994. -webkit-transform: translateY(-5px);
  995. transform: translateY(-5px);
  996. background-color: {color:accent};
  997. }
  998. 100% {
  999. -webkit-transform: translateY(0);
  1000. transform: translateY(0);
  1001. background-color: #FFF;
  1002. }
  1003. }
  1004.  
  1005. @keyframes animate-out-bottom-bar {
  1006. 0% {
  1007. background-color: {color:accent};
  1008. }
  1009. 50% {
  1010. -webkit-transform: translateY(-9px);
  1011. transform: translateY(-9px)
  1012. }
  1013. 80% {
  1014. -webkit-transform: translateY(-5px);
  1015. transform: translateY(-5px);
  1016. background-color: {color:accent};
  1017. }
  1018. 100% {
  1019. -webkit-transform: translateY(0);
  1020. transform: translateY(0);
  1021. background-color: #FFF;
  1022. }
  1023. }
  1024.  
  1025. @-webkit-keyframes animate-out-middle-bar {
  1026. 0% {
  1027. background-color: {color:accent};
  1028. }
  1029. 80% {
  1030. background-color: {color:accent};
  1031. }
  1032. 100% {
  1033. background-color: #fff;
  1034. }
  1035. }
  1036.  
  1037. @keyframes animate-out-middle-bar {
  1038. 0% {
  1039. background-color: {color:accent};
  1040. }
  1041. 80% {
  1042. background-color: {color:accent};
  1043. }
  1044. 100% {
  1045. background-color: #fff;
  1046. }
  1047. }
  1048.  
  1049. /*TAB ANIMATIONS*/
  1050. .swashIn {
  1051. -webkit-animation-name: swashIn;
  1052. animation-name: swashIn;
  1053. -webkit-animation-duration: 1s;
  1054. animation-duration: 1s;
  1055. -webkit-animation-fill-mode: both;
  1056. animation-fill-mode: both;
  1057. }
  1058.  
  1059. @-webkit-keyframes swashIn {
  1060. 0% {
  1061. opacity: 0;
  1062. -webkit-transform-origin: 50% 50%;
  1063. -webkit-transform: scale(0, 0);
  1064. }
  1065.  
  1066. 90% {
  1067. opacity: 1;
  1068. -webkit-transform-origin: 50% 50%;
  1069. -webkit-transform: scale(0.9, 0.9);
  1070. }
  1071.  
  1072. 100% {
  1073. opacity: 1;
  1074. -webkit-transform-origin: 50% 50%;
  1075. -webkit-transform: scale(1, 1);
  1076. }
  1077. }
  1078. @keyframes swashIn {
  1079. 0% {
  1080. opacity: 0;
  1081. transform-origin: 50% 50%;
  1082. transform: scale(0, 0);
  1083. }
  1084.  
  1085. 90% {
  1086. opacity: 1;
  1087. transform-origin: 50% 50%;
  1088. transform: scale(0.9, 0.9);
  1089. }
  1090.  
  1091. 100% {
  1092. opacity: 1;
  1093. transform-origin: 50% 50%;
  1094. transform: scale(1, 1);
  1095. }
  1096. }
  1097.  
  1098. .tabs iframe, .tabs li, .tabs pre, .tabs embed, .tabs video, .tabs object .tabs blockquote,.tabs img {max-width:100% !important;}
  1099.  
  1100. .tabs ol, .tabs ul {
  1101. list-style: none;
  1102. margin-top: 0;
  1103. padding-left: 0;
  1104. }
  1105. .tabs ol {
  1106. list-style: decimal inside;
  1107. }
  1108.  
  1109. .tabs ul {
  1110. list-style: circle inside;
  1111. }
  1112.  
  1113. .tabs li {margin-bottom:calc({select:font size} / 2);}
  1114.  
  1115. .tabs ol ol,.tabs ol ul,.tabs ul ol,.tabs ul ul {
  1116. margin:{select:font size} 0 {select:font size} 0;
  1117. }
  1118.  
  1119.  
  1120.  
  1121. .posts pre {
  1122. white-space: pre-wrap;
  1123. white-space: -moz-pre-wrap;
  1124. white-space: -pre-wrap;
  1125. white-space: -o-pre-wrap;
  1126. word-wrap: break-word;
  1127. background:#fafafa;
  1128. padding:5px;
  1129. }
  1130.  
  1131. .posts img {
  1132. max-width:100%;
  1133. height:auto;
  1134. }
  1135.  
  1136. .postsimg.photop {display:block;line-height:0;}
  1137.  
  1138.  
  1139. .posts div.captions, .posts .pads {
  1140. text-align:justify;
  1141. word-wrap:break-word;
  1142. padding:calc({select:font size} * 2);
  1143. border:1px solid #eaeaea;
  1144.  
  1145. }
  1146.  
  1147. .tabstuff .pads {border:1px solid #eaeaea;padding:calc({select:font size} * 2);}
  1148.  
  1149. .posts > div.captions {border-top:none;}
  1150.  
  1151. div.captions *:not(h1):not(h2) {font-size:inherit;}
  1152.  
  1153. .captions a, .ask_cont > span a, span.qsource a, .navi-items > ul > li > a, p.p-desc a {
  1154. border-bottom:1px solid #eaeaea;
  1155. -webkit-transition: all 0.3s ease-in-out;
  1156. transition:all 0.3s ease-in-out;
  1157. }
  1158.  
  1159. .captions a:hover, span.qsource a:hover, .navi-items > ul > li > a:hover, p.p-desc a:hover{
  1160. color:{color:highlight};
  1161. border-bottom:1px solid {color:highlight};
  1162. -webkit-transition: all 0.3s ease-in-out;
  1163. transition:all 0.3s ease-in-out;
  1164. }
  1165.  
  1166. body.defcap blockquote {
  1167. border-left: 1px solid #eaeaea;
  1168. margin-left: 0;
  1169. margin-right: 0;
  1170. padding-left: calc({select:font size} * 1.5);
  1171. }
  1172.  
  1173. body.defcap blockquote *:last-child {
  1174. margin-bottom: 0;
  1175. }
  1176.  
  1177.  
  1178. body.defcap .captions *:first-child {
  1179. margin-top:0;
  1180. }
  1181.  
  1182. body.defcap blockquote blockquote {
  1183. padding: 0 0 0 0;
  1184. margin: 0 0 0 0;
  1185. border-left:none;
  1186.  
  1187. }
  1188.  
  1189. blockquote.tumblr_parent {
  1190. max-width:100%;
  1191. margin:0;
  1192. }
  1193.  
  1194. .tumblr_parent blockquote {
  1195. padding: 0 0 0 calc({select:font size} * 2);
  1196. margin: 0 0 0 0;
  1197. border-left:1px #eaeaea solid;
  1198. }
  1199.  
  1200. .tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}
  1201.  
  1202. .unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a):not(span):not(figure) {vertical-align:middle;}
  1203.  
  1204. img.tumblr_avatar {border-radius:5%;margin-right:12px;width:36px;height:36px;}
  1205.  
  1206. img.tumblr_avatar + a.tumblr_blog {
  1207. font-weight:bold;
  1208. vertical-align:middle;
  1209. text-transform:uppercase;
  1210. letter-spacing:1.2px;
  1211. border-bottom:none;
  1212. color:inherit;
  1213. border-bottom:1px solid #5f5f5f;
  1214. -webkit-transition: all 0.3s ease-in-out;
  1215. transition:all 0.3s ease-in-out;
  1216. }
  1217.  
  1218. img.tumblr_avatar + a.tumblr_blog:hover {
  1219. color:{color:highlight};
  1220. border-bottom:1px solid {color:highlight};
  1221. -webkit-transition: all 0.3s ease-in-out;
  1222. transition:all 0.3s ease-in-out
  1223. }
  1224.  
  1225. .posts video, .posts .tumblr_video_container {
  1226. width: 100% !important;
  1227. height: auto !important;
  1228. }
  1229.  
  1230. .posts .video > iframe {width:100%;display:block;}
  1231.  
  1232. /*new post format*/
  1233. .npf_row {
  1234. display:flex;
  1235. }
  1236.  
  1237. .npf_row figure {margin-top:0;}
  1238. .npf_row:first-of-type {margin-top:12px;}
  1239. .npf_row > figure {
  1240. flex: 1;
  1241. padding:2px;
  1242. }
  1243.  
  1244. .captions figure:not(.tmblr-full) {margin-left:0;margin-right:0;margin-top:{select:font size};}
  1245.  
  1246. .txttitle {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  1247.  
  1248. .txttitle h1 {margin-bottom:0;margin-top:0;}
  1249.  
  1250. .posts .captions:first-child {border-top:1px solid #eaeaea;}
  1251.  
  1252. /*quotes*/
  1253.  
  1254. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin:0;font-weight:400;font-family:'lora';}
  1255.  
  1256. h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}
  1257.  
  1258. h1.qshort {line-height:140%;font-size:calc({select:font size} * 2);}
  1259. h1.qmedium, h1.qlong {line-height:160%;}
  1260.  
  1261. h1.qmedium {font-size:calc({select:font size} * 1.5);}
  1262.  
  1263. h1.qlong {font-size:calc({select:font size} * 1.2);}
  1264.  
  1265. span.qsource {width:100%;display:block;text-align:center;margin-top:16px;}
  1266.  
  1267. .divider {
  1268. margin-top:16px;
  1269. text-align:center;
  1270. }
  1271.  
  1272. .sb .divider {margin-top:12px;}
  1273.  
  1274. .divider::before {
  1275. width:20%;
  1276. height:1px;
  1277. background-color:{color:highlight};
  1278. content:"";
  1279. display:inline-block;
  1280. vertical-align:middle;
  1281. }
  1282.  
  1283. /*chats*/
  1284. ul.chatlines {list-style:none;}
  1285. li.clines {padding:8px;margin-top:0;margin-bottom:0;}
  1286. .chatlines li.odd {background:#fafafa;}
  1287.  
  1288. /*ask posts*/
  1289.  
  1290. .ask_cont {line-height: 1.8;min-height:124px;border-bottom:1px solid #eaeaea;}
  1291.  
  1292. .ask_cont > img {float:left;border-radius:5%;margin-right:24px;}
  1293.  
  1294. .ask_cont > span {font-weight:bold;}
  1295.  
  1296.  
  1297. .ask_cont > span a:hover {
  1298. color:{color:accent};
  1299. border-bottom:1px solid {color:accent};
  1300. -webkit-transition: all 0.3s ease-in-out;
  1301. transition:all 0.3s ease-in-out;
  1302. }
  1303.  
  1304. @media screen and (max-width: 360px) {
  1305. .ask_cont > img {width:48px;height:48px;margin-right:16px;}
  1306. }
  1307.  
  1308. /*link posts*/
  1309. .link_cont {
  1310. border-bottom:1px solid #eaeaea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  1311. -webkit-transition: all 0.3s ease-in-out;
  1312. transition:all 0.3s ease-in-out;
  1313. }
  1314.  
  1315. .link_cont:hover {
  1316. background:{color:highlight};
  1317. -webkit-transition: all 0.3s ease-in-out;
  1318. transition:all 0.3s ease-in-out;
  1319. }
  1320.  
  1321. .link_cont span {margin-right:16px;}
  1322.  
  1323. .link_cont:hover .plink a {color:#fff;}
  1324.  
  1325. h1.plink {margin:0;}
  1326.  
  1327. h1.plink a {color:inherit;}
  1328.  
  1329. /*lightbox*/
  1330. #tumblr_lightbox,.tmblr-lightbox {background:rgba(255,255,255,0.8)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  1331.  
  1332.  
  1333. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  1334. opacity:0;
  1335. -webkit-box-shadow:none!important;
  1336. box-shadow:none!important;
  1337. }
  1338.  
  1339. #tumblr_lightbox_center_image {
  1340. opacity: 1!important;
  1341. background-color: #fff!important;
  1342. }
  1343.  
  1344. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  1345. -webkit-transition: all 0.3s ease-in-out;
  1346. transition:all 0.3s ease-in-out;
  1347. }
  1348.  
  1349. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  1350. opacity:1!important;
  1351. -webkit-transition: all 0.3s ease-in-out;
  1352. transition:all 0.3s ease-in-out;
  1353. }
  1354.  
  1355.  
  1356. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  1357. box-shadow: 0 0 0 transparent !important;
  1358. }
  1359.  
  1360. #tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  1361. border-radius:0!important;
  1362. -moz-border-radius: 0!important;
  1363. -webkit-border-radius: 0!important;
  1364. -o-border-radius: 0!important;
  1365. background:transparent !important;
  1366. padding:0 !important;
  1367. }
  1368.  
  1369.  
  1370.  
  1371. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  1372.  
  1373. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  1374. .photo-slideshow .count-1 {
  1375. margin-bottom:{select:photoset gutter}!important;
  1376. }
  1377.  
  1378.  
  1379. .photo-slideshow .count-2 {
  1380. margin-left:{select:photoset gutter}!important;
  1381. margin-bottom:{select:photoset gutter}!important;
  1382. width:calc(50% - ({select:photoset gutter}/2))!important;
  1383. }
  1384.  
  1385. .photo-slideshow .count-2:first-child {
  1386. margin-left:0!important;
  1387. }
  1388.  
  1389. .photo-slideshow .count-3 {
  1390. margin-left:{select:photoset gutter}!important;
  1391. margin-bottom:{select:photoset gutter}!important;
  1392. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  1393. }
  1394.  
  1395. .photo-slideshow .count-3:first-child {
  1396. margin-left:0!important;
  1397. }
  1398. .photo-slideshow {
  1399. display:block!important;
  1400. margin-bottom:calc(-({select:photoset gutter} - 3px));
  1401. position:relative;
  1402. width:100%;
  1403. }
  1404.  
  1405. .defcap .photo-slideshow.processed {margin-bottom:0!important;}
  1406.  
  1407. .defcap .row:last-of-type .count-1{margin-bottom:0!important;}
  1408.  
  1409. .unnested .photo-slideshow.processed {margin-bottom:0!important;}
  1410. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  1411.  
  1412. /*audio*/
  1413.  
  1414. .audio_cont {
  1415. position:relative;
  1416. width:100%;
  1417. font-size:90%;
  1418. margin-bottom:0;
  1419. border-bottom:1px solid #eaeaea;
  1420. display:-webkit-box;
  1421. display:-ms-flexbox;
  1422. display:flex;
  1423. -webkit-box-align:center;
  1424. -ms-flex-align:center;
  1425. align-items:center;
  1426. }
  1427.  
  1428.  
  1429. .playback {
  1430. position:absolute;
  1431. background:#fff;
  1432. z-index:10;
  1433. opacity:0;
  1434. text-align:center;
  1435. width:100px;
  1436. height:100px;
  1437. margin-top:10px;
  1438. margin-left:10px;
  1439. margin-bottom:10px;
  1440. -webkit-transition: all 0.3s ease-in-out;
  1441. transition:all 0.3s ease-in-out;
  1442. }
  1443.  
  1444.  
  1445. .playback:hover {
  1446. opacity:0.8;
  1447. -webkit-transition: all 0.3s ease-in-out;
  1448. transition:all 0.3s ease-in-out;
  1449. }
  1450.  
  1451. .playbox {
  1452. overflow:hidden;
  1453. width:40px;
  1454. height:40px;
  1455. margin-top:30px;
  1456. margin-left:30px;
  1457. }
  1458.  
  1459.  
  1460. .audio_cover {
  1461. position:relative;
  1462. margin-left:0;
  1463. width:120px;
  1464. height:120px;
  1465. }
  1466.  
  1467.  
  1468. .audio_info {
  1469. padding:0;
  1470. margin-left:0px;
  1471. background:#fff;
  1472. display:-webkit-box;
  1473. display:-ms-flexbox;
  1474. display:flex;
  1475. -webkit-box-pack:center;
  1476. -ms-flex-pack:center;
  1477. justify-content:center;
  1478. -webkit-box-align:center;
  1479. -ms-flex-align:center;
  1480. align-items:center;
  1481. width:calc(100% - 120px);
  1482. height:120px;
  1483. }
  1484.  
  1485. .audio_info > div {
  1486. font-weight:normal;
  1487. text-overflow: ellipsis;
  1488. white-space: nowrap;
  1489. overflow:hidden;
  1490. max-width:calc(100% - 50px);
  1491. }
  1492.  
  1493.  
  1494. /*post info*/
  1495.  
  1496. div.post_footer {
  1497. padding:calc({select:font size}*2);
  1498. background:#fff;
  1499. border:1px solid #eaeaea;
  1500. border-top:none;
  1501. font-family:'playfair display';
  1502. letter-spacing:1.2px;
  1503. display:-webkit-box;
  1504. display:-ms-flexbox;
  1505. display:flex;
  1506. -ms-flex-pack:justify;
  1507. justify-content:space-between;
  1508.  
  1509. }
  1510.  
  1511. @media screen and (max-width: 360px) {
  1512.  
  1513. div.post_footer {
  1514. font-size:12px;
  1515.  
  1516. }
  1517.  
  1518. }
  1519.  
  1520. span.dtls:first-child {font-weight:700;}
  1521.  
  1522. div.datesourcetag {
  1523. font-size:96%;
  1524. font-style:italic;
  1525. display:-webkit-box;
  1526. display:-ms-flexbox;
  1527. display:flex;
  1528. align-items:center;
  1529. -webkit-align-items:center;
  1530. -moz-align-items:center;
  1531. -ms-align-items:center;
  1532. }
  1533.  
  1534. div.datesourcetag > span + span {
  1535. margin-left:20px;
  1536. }
  1537.  
  1538. span.dtls:first-of-type {margin-left:0;font-style:normal;}
  1539.  
  1540.  
  1541. div.socs {
  1542. display:-webkit-box;
  1543. display:-ms-flexbox;
  1544. display:flex;
  1545. display:-webkit-flex;
  1546. display:-moz-flex;
  1547. display:-ms-flex;
  1548. -webkit-box-align:center;
  1549. -ms-flex-align:center;
  1550. align-items:center;
  1551. -webkit-align-items:center;
  1552. -moz-align-items:center;
  1553. -ms-align-items:center;
  1554. margin-left:auto;
  1555. }
  1556.  
  1557. div.soc_obj {
  1558. margin-left:16px;
  1559. }
  1560.  
  1561. .custom-like-button {
  1562. position: relative;
  1563. display: block;
  1564. width: {select:font size};
  1565. height: {select:font size};
  1566. }
  1567.  
  1568. /* class for the Tumblr Like Button iframe */
  1569. .like_button {
  1570. position: absolute;
  1571. cursor:pointer;
  1572. top: 0;
  1573. left: 0;
  1574. right: 0;
  1575. bottom: 0;
  1576. width: 100%;
  1577. height: 100%;
  1578. opacity: 0.00001;
  1579. z-index: 3;
  1580. }
  1581. /* Force iframe to fill button */
  1582. .like_button iframe {
  1583. width: 100% !important;
  1584. height: 100% !important;
  1585. position:absolute;
  1586. }
  1587. /* class for Our Like Button */
  1588. .our_button {
  1589. position: absolute;
  1590. margin-top:calc(-{select:font size}/3);
  1591. top: 0;
  1592. left: 0;
  1593. right: 0;
  1594. bottom: 0;
  1595. width: 100%;
  1596. height: 100%;
  1597. z-index: 1;
  1598. }
  1599.  
  1600. .our_button span {color:#999;}
  1601.  
  1602. .like_button:hover + .our_button span, .like_button.liked + .our_button span {
  1603. color:red;
  1604. -webkit-transition: all 0.3s ease-in-out;
  1605. transition:all 0.3s ease-in-out;
  1606. }
  1607.  
  1608. .posts .lnr {width:100%;height:100%;}
  1609.  
  1610. .tags {
  1611. width:100%;
  1612. margin-top:{select:font size};
  1613. font-family:'lora';
  1614. word-wrap:break-word;
  1615. }
  1616.  
  1617.  
  1618. @media screen and (max-width: 600px) {
  1619.  
  1620. .multicol .tags {font-size:90%;}
  1621.  
  1622. }
  1623.  
  1624.  
  1625. .multicol .tags{font-size:80%;margin-top:calc({select:font size}/2);}
  1626. @media screen and (min-width: 1440px) {
  1627. .multicol .tags {font-size:100%;margin-top:{select:font size};}
  1628. }
  1629.  
  1630.  
  1631.  
  1632. .tags a {
  1633. display:inline;
  1634. margin-left:12px;
  1635. -webkit-transition: all 0.3s ease-in-out;
  1636. transition:all 0.3s ease-in-out;
  1637. }
  1638.  
  1639. .tags a:hover {
  1640. color:{color:accent};
  1641. -webkit-transition: all 0.3s ease-in-out;
  1642. transition:all 0.3s ease-in-out;
  1643. }
  1644.  
  1645. .tags a:first-of-type {margin-left:0;}
  1646.  
  1647. /*notes*/
  1648.  
  1649. .postnotes .pads {border-left:none;border-right:none;border-bottom:1px solid #eaeaea;}
  1650.  
  1651. .postnotes {border:1px solid #eaeaea;border-top:none;}
  1652. h1.notehead {margin:0;}
  1653.  
  1654. div.tumblr_notes {
  1655. background:#fff;
  1656. padding:30px;
  1657. font-size:90%;
  1658. }
  1659.  
  1660. /*Grid notes*/
  1661. .grid_notes .postnotes *{ margin:0; padding:0; }
  1662.  
  1663. .grid_notes .postnotes { text-align: center; }
  1664.  
  1665. .grid_notes ol.notes {margin-top:calc({select:font size} * 2);}
  1666.  
  1667. .grid_notes .postnotes li{ list-style-type:none; display:inline-block; width:calc({select:font size} * 2); height:calc({select:font size} * 2); margin:5px; overflow:hidden; }
  1668.  
  1669. .grid_notes .postnotes img{ width:calc({select:font size} * 2); height:calc({select:font size} * 2); border-radius:5%;}
  1670.  
  1671. .grid_notes li.more_notes_link_container{
  1672. width:100%!important;
  1673. }
  1674.  
  1675. /*def & txt notes*/
  1676.  
  1677.  
  1678. .def_notes .postnotes ol.notes, .txt_notes .postnotes ol.notes{list-style:none;margin:0;padding-left:5px;}
  1679.  
  1680. .def_notes .postnotes ol.notes li.note, .txt_notes .postnotes ol.notes li.note {
  1681. display:flex;
  1682. display:-webkit-flex;
  1683. display:-moz-flex;
  1684. display:-ms-flex;
  1685. align-items:center;
  1686. -webkit-align-items:center;
  1687. -moz-align-items:center;
  1688. -ms-align-items:center;
  1689. margin:{select:font size} 0 {select:font size} 0;
  1690. }
  1691.  
  1692. .def_notes .postnotes ol.notes li.note:first-of-type, .txt_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}
  1693.  
  1694. .def_notes .postnotes li.note:last-of-type, .txt_notes .postnotes li.note:last-of-type {margin-bottom:8px;}
  1695.  
  1696. .def_notes .postnotes ol.notes li.note a.avatar_frame {height:24px;margin-right:{select:font size};}
  1697.  
  1698. .txt_notes .postnotes ol.notes li.note a.avatar_frame {display:none;}
  1699.  
  1700.  
  1701. .def_notes .postnotes ol.notes li.note img.avatar {
  1702. border-radius:5%;
  1703. width:24px;
  1704. height:24px;
  1705. opacity:1;
  1706. -webkit-transition: all 0.3s ease-in-out;
  1707. transition:all 0.3s ease-in-out;
  1708. }
  1709.  
  1710. .txt_notes .postnotes ol.notes li.note img.avatar {display:none;}
  1711.  
  1712. .def_notes .postnotes ol.notes li.note img.avatar:hover {
  1713. opacity:0.7;
  1714. -webkit-transition: all 0.3s ease-in-out;
  1715. transition:all 0.3s ease-in-out;
  1716. }
  1717.  
  1718. .def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 48px);}
  1719.  
  1720. .txt_notes .postnotes ol.notes li.note span.action {max-width:100%;}
  1721.  
  1722. .def_notes .postnotes li.with_commentary blockquote, .txt_notes .postnotes li.with_commentary blockquote {
  1723. display:none;
  1724. }
  1725.  
  1726.  
  1727. li.note span.action a {
  1728. border-bottom:1px solid #eaeaea;
  1729. -webkit-transition: all 0.3s ease-in-out;
  1730. transition:all 0.3s ease-in-out;
  1731. }
  1732.  
  1733. .txt_notes li.note span.action:before {
  1734. font-family: 'Linearicons-Free';
  1735. margin-right:8px;
  1736. vertical-align: middle;
  1737. }
  1738.  
  1739. .txt_notes li.note.reply span.action:before {
  1740. content: "\e83f";
  1741. color:#6CC7ED;
  1742. }
  1743.  
  1744. .txt_notes li.note.like span.action:before {
  1745. content: "\e813";
  1746. color:red;
  1747. }
  1748.  
  1749. .txt_notes li.note.original_post span.action:before {
  1750. content: "\e814";
  1751. color:#EED275;
  1752. }
  1753.  
  1754. .txt_notes li.note.reblog:not(.original_post) span.action:before {
  1755. font-family: 'Linearicons-Free';
  1756. content: "\e862";
  1757. color:#72D16E;
  1758. }
  1759.  
  1760. li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
  1761. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a, .txt_notes li.more_notes_link_container a {
  1762. font-size:calc({select:font size} * 1.2);
  1763. margin:auto;
  1764. cursor:help;
  1765. color:inherit;
  1766. border-bottom:1px solid #222;
  1767. -webkit-transition: all 0.3s ease-in-out;
  1768. transition:all 0.3s ease-in-out;
  1769. }
  1770.  
  1771.  
  1772.  
  1773. li.more_notes_link_container a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  1774.  
  1775. li.note span.action a:hover{
  1776. color:{color:highlight};
  1777. border-bottom:1px solid {color:highlight};
  1778. -webkit-transition: all 0.3s ease-in-out;
  1779. transition:all 0.3s ease-in-out;
  1780. }
  1781.  
  1782.  
  1783.  
  1784. /*pagination*/
  1785. .pg {
  1786. margin:auto;
  1787. margin-bottom:calc({select:post spacing} / 2);
  1788. width:100%;
  1789. text-transform:uppercase;
  1790. letter-spacing:1.5px;
  1791. background:transparent;
  1792. text-align:center;
  1793. word-spacing:20px;
  1794. font-family:'raleway';
  1795. }
  1796.  
  1797.  
  1798.  
  1799. .pg a {
  1800. display:inline-block;
  1801. color:#fff;
  1802. padding:8px;
  1803. width:100px;
  1804. border-radius:5%;
  1805. background: {color:grad 1};
  1806. background: -webkit-linear-gradient(to right, {color:grad 1}, {color:grad 2});
  1807. background: linear-gradient(to right, {color:grad 1}, {color:grad 2});
  1808. position:relative;
  1809. z-index:1;
  1810. }
  1811.  
  1812. .pg a:before {
  1813. position: absolute;
  1814. content: "";
  1815. top: 0;
  1816. right: 0;
  1817. bottom: 0;
  1818. width:100%;
  1819. height:100%;
  1820. background: linear-gradient(
  1821. to bottom,
  1822. {color:highlight},
  1823. {color:accent}
  1824. );
  1825. z-index: -1;
  1826. transition: opacity 0.5s linear;
  1827. opacity: 0;
  1828. }
  1829.  
  1830. .pg a:hover::before {
  1831. opacity: 1;
  1832. }
  1833.  
  1834.  
  1835. .pg > * + * {margin:32px;}
  1836.  
  1837. {block:ifmanualload}
  1838. .pg {
  1839. display:none;
  1840. }
  1841. {/block:ifmanualload}
  1842.  
  1843. footer {
  1844. margin:0px auto 80px auto;
  1845. width:100%;
  1846. }
  1847.  
  1848. #infscr-loading {display:none !important;}
  1849.  
  1850. .bottom {display:block;text-align:center;text-transform:uppercase;}
  1851. a.append {
  1852. padding-bottom:2px;
  1853. font-size:1.1em;
  1854. cursor:help;
  1855. letter-spacing:1.2px;
  1856. color:#000;
  1857. border-bottom:1px solid #000;
  1858. transition: all 0.3s ease-in-out;
  1859. -webkit-transition: all 0.3s ease-in-out;
  1860. -moz-transition: all 0.3s ease-in-out;
  1861. -o-transition: all 0.3s ease-in-out;
  1862. }
  1863.  
  1864. a.append:hover {
  1865. color:{color:highlight};
  1866. border-bottom:1px solid {color:highlight};
  1867. transition: all 0.3s ease-in-out;
  1868. -webkit-transition: all 0.3s ease-in-out;
  1869. -moz-transition: all 0.3s ease-in-out;
  1870. -o-transition: all 0.3s ease-in-out;
  1871. }
  1872.  
  1873. /*FAQ*/
  1874. .post400 iframe#askbox, .post350 iframe#askbox, .post 400 iframe#ask_form, .post 350 iframe#ask_form {height:250px;}
  1875.  
  1876. .panel_fask .pads h2 {margin-top:1em;}
  1877.  
  1878. p.tabq {margin-top:1.5em!important;font-weight:bold;}
  1879. p.taba {padding-left:1em;border-left:1px solid #222;}
  1880.  
  1881. /*navi*/
  1882.  
  1883. .navigrid {
  1884. display: -webkit-box;
  1885. display: -webkit-flex;
  1886. display: -ms-flexbox;
  1887. display: flex;
  1888. -webkit-flex-flow: row wrap;
  1889. -ms-flex-flow: row wrap;
  1890. flex-flow: row wrap;
  1891. -webkit-box-pack: center;
  1892. -webkit-justify-content: center;
  1893. -ms-flex-pack: center;
  1894. justify-content: center;
  1895. }
  1896.  
  1897. .navi-items {
  1898. text-align:left;
  1899. -ms-flex-preferred-size:33%;
  1900. -webkit-flex-basis:33%;
  1901. flex-basis:33%;
  1902. }
  1903.  
  1904. .navi-items h6 {
  1905. font-style:italic;
  1906. margin-bottom:1rem;
  1907. font-size:inherit;
  1908. margin-top:0;
  1909. }
  1910.  
  1911. .navi-items:first-of-type {padding-left:0;}
  1912. .navi-items:last-of-type {padding-right:0;}
  1913.  
  1914. .post350 .navi-items {padding-left:0;margin-top:16px;}
  1915.  
  1916. .navi-items ul {list-style:none;}
  1917.  
  1918. .navi-items > ul > li {
  1919.  
  1920. margin-top:0.5em;
  1921. padding-left:1em;
  1922. position:relative;
  1923. -webkit-transition: all 0.3s ease-in-out;
  1924. transition:all 0.3s ease-in-out;
  1925. }
  1926.  
  1927. .navi-items > ul > li > a {margin-left:calc({select:font size}/2);}
  1928.  
  1929. .navi-items > ul > li:before {
  1930. content:'';
  1931. position:absolute;
  1932. top:50%;
  1933. height:1px;
  1934. margin-left:-1em;
  1935. width:1em;
  1936. background:#999;
  1937. -webkit-transition: all 0.3s ease-in-out;
  1938. transition:all 0.3s ease-in-out;
  1939. }
  1940.  
  1941. .navi-items > ul > li:hover {
  1942. padding-left:1.8em;
  1943. -webkit-transition: all 0.3s ease-in-out;
  1944. transition:all 0.3s ease-in-out;
  1945. }
  1946.  
  1947. .navi-items > ul > li:hover:before {
  1948. margin-left:-1.8em;
  1949. width:1.8em;
  1950. -webkit-transition: all 0.3s ease-in-out;
  1951. transition:all 0.3s ease-in-out;
  1952. }
  1953.  
  1954. .broll {
  1955. display:-webkit-box;
  1956. display:-webkit-flex;
  1957. display:-ms-flexbox;
  1958. display:flex;
  1959. -webkit-box-orient: horizontal;
  1960. -webkit-box-direction: normal;
  1961. -webkit-flex-direction: row;
  1962. -ms-flex-direction: row;
  1963. flex-direction: row;
  1964. -webkit-flex-wrap: wrap;
  1965. -ms-flex-wrap: wrap;
  1966. flex-wrap: wrap;
  1967. -webkit-box-pack: start;
  1968. -webkit-justify-content: flex-start;
  1969. -ms-flex-pack: start;
  1970. justify-content: flex-start;
  1971. -webkit-align-content: flex-start;
  1972. -ms-flex-line-pack: start;
  1973. align-content: flex-start;
  1974. -webkit-box-align: start;
  1975. -webkit-align-items: flex-start;
  1976. -ms-flex-align: start;
  1977. align-items: flex-start;
  1978. }
  1979.  
  1980. .broll > a {
  1981.  
  1982. margin:20px;
  1983. -ms-flex-preferred-size:calc(20% - 40px);
  1984. -webkit-flex-basis:calc(20% - 40px);
  1985. flex-basis:calc(20% - 40px);
  1986. }
  1987.  
  1988.  
  1989.  
  1990. img.followed {
  1991. display:block;width:100%;
  1992. border-radius:2%;
  1993. opacity:1;
  1994. -webkit-transition: all 0.3s ease-in-out;
  1995. transition:all 0.3s ease-in-out;
  1996. }
  1997.  
  1998. .broll > a:hover img.followed {
  1999. opacity:0.6;
  2000. -webkit-transition: all 0.3s ease-in-out;
  2001. transition:all 0.3s ease-in-out;
  2002. }
  2003.  
  2004. @media (max-width: 1200px) {
  2005. #split-box > ul > li > div:not(.snowflakes) {
  2006. max-width:240px;
  2007.  
  2008.  
  2009. }
  2010.  
  2011. .multicol div.tabstuff {max-width:540px;}
  2012.  
  2013.  
  2014. {block:permalinkpage}
  2015. body.multicol .tabs {max-width:540px;}
  2016. {/block:permalinkpage}
  2017.  
  2018. .menu--ama .menu__item-name {
  2019. font-size:1.44em;
  2020. }
  2021.  
  2022.  
  2023.  
  2024.  
  2025.  
  2026. }
  2027.  
  2028. @media (max-width:800px){
  2029.  
  2030.  
  2031. .h_img {display:none;}
  2032. .singlecol .h_txt, .multicol .h_txt {width:100%;padding-left:0;}
  2033.  
  2034.  
  2035. body.multicol #entries {
  2036. margin:100px auto;
  2037. display: block;
  2038. }
  2039.  
  2040. body.multicol article {
  2041. width:100%;
  2042. margin:{select:post spacing} auto;
  2043. }
  2044.  
  2045.  
  2046. body.multicol article:first-of-type {margin:0 auto;}
  2047.  
  2048. .singlecol .tabs {width:90%!important;}
  2049. }
  2050.  
  2051.  
  2052. @media (max-width: 640px) {
  2053.  
  2054. iframe.tmblr-iframe.iframe-controls--desktop {
  2055. top:100px!important;
  2056. }
  2057.  
  2058. .multicol section, .singlecol section {
  2059. width:100%;
  2060. margin-left:0;
  2061. padding-top:120px;
  2062. margin:auto;
  2063. }
  2064.  
  2065. .sb_cont {align-items:center;justify-content:flex-start;}
  2066. nav.sbnav {padding-top:0;text-align:left;padding-left:120px;}
  2067. nav.sbnav a {display:inline-block;}
  2068. nav.sbnav > a + a {margin-top:0;margin-left:24px;}
  2069.  
  2070. nav#split-box ul {
  2071. flex-direction: column;
  2072. }
  2073. nav#split-box ul li:nth-of-type(1) {
  2074. display:none!important;
  2075. }
  2076. nav#split-box ul li:nth-of-type(2) {
  2077. height: 100%;
  2078. flex-basis:100%;
  2079. }
  2080.  
  2081.  
  2082. aside {
  2083. height:80px;
  2084. width:100%;
  2085. }
  2086.  
  2087.  
  2088.  
  2089. .menu--ama .menu__item-name {
  2090. font-size:1.2em;
  2091. }
  2092.  
  2093. .open-overlay {left:24px;top:20px;}
  2094.  
  2095.  
  2096.  
  2097.  
  2098. @-webkit-keyframes animate-top-bar {
  2099. 0% {
  2100. background-color: #fff;
  2101. }
  2102. 50% {
  2103. -webkit-transform: translateY(9px);
  2104. transform: translateY(9px)
  2105. }
  2106. 80% {
  2107. -webkit-transform: translateY(5px);
  2108. transform: translateY(5px);
  2109. background-color: #fff
  2110. }
  2111. 100% {
  2112. -webkit-transform: translateY(0);
  2113. transform: translateY(0);
  2114. background-color: #fff;
  2115. }
  2116. }
  2117.  
  2118. @keyframes animate-top-bar {
  2119. 0% {
  2120. background-color: #fff;
  2121. }
  2122. 50% {
  2123. -webkit-transform: translateY(9px);
  2124. transform: translateY(9px)
  2125. }
  2126. 80% {
  2127. -webkit-transform: translateY(5px);
  2128. transform: translateY(5px);
  2129. background-color: #fff
  2130. }
  2131. 100% {
  2132. -webkit-transform: translateY(0);
  2133. transform: translateY(0);
  2134. background-color: #fff;
  2135. }
  2136. }
  2137.  
  2138. @-webkit-keyframes animate-bottom-bar {
  2139. 0% {
  2140. background-color: #fff;
  2141. }
  2142. 50% {
  2143. -webkit-transform: translateY(-9px);
  2144. transform: translateY(-9px)
  2145. }
  2146. 80% {
  2147. -webkit-transform: translateY(-5px);
  2148. transform: translateY(-5px);
  2149. background-color: #fff;
  2150. }
  2151. 100% {
  2152. -webkit-transform: translateY(0);
  2153. transform: translateY(0);
  2154. background-color: #fff;
  2155. }
  2156. }
  2157.  
  2158. @keyframes animate-bottom-bar {
  2159. 0% {
  2160. background-color: #fff;
  2161. }
  2162. 50% {
  2163. -webkit-transform: translateY(-9px);
  2164. transform: translateY(-9px)
  2165. }
  2166. 80% {
  2167. -webkit-transform: translateY(-5px);
  2168. transform: translateY(-5px);
  2169. background-color: #fff;
  2170. }
  2171. 100% {
  2172. -webkit-transform: translateY(0);
  2173. transform: translateY(0);
  2174. background-color: #fff;
  2175. }
  2176. }
  2177.  
  2178. @-webkit-keyframes animate-middle-bar {
  2179. 0% {
  2180. background-color: #fff;
  2181. }
  2182. 80% {
  2183. background-color: #fff;
  2184. }
  2185. 100% {
  2186. background-color: #fff;
  2187. }
  2188. }
  2189.  
  2190. @keyframes animate-middle-bar {
  2191. 0% {
  2192. background-color: #fff;
  2193. }
  2194. 80% {
  2195. background-color: #fff;
  2196. }
  2197. 100% {
  2198. background-color: #fff;
  2199. }
  2200. }
  2201.  
  2202. @-webkit-keyframes animate-out-top-bar {
  2203. 0% {
  2204. background-color: #fff;
  2205. }
  2206. 50% {
  2207. -webkit-transform: translateY(9px);
  2208. transform: translateY(9px)
  2209. }
  2210. 80% {
  2211. -webkit-transform: translateY(5px);
  2212. transform: translateY(5px);
  2213. background-color: #fff;
  2214. }
  2215. 100% {
  2216. -webkit-transform: translateY(0);
  2217. transform: translateY(0);
  2218. background-color: #FFF;
  2219. }
  2220. }
  2221.  
  2222. @keyframes animate-out-top-bar {
  2223. 0% {
  2224. background-color: #fff;
  2225. }
  2226. 50% {
  2227. -webkit-transform: translateY(9px);
  2228. transform: translateY(9px)
  2229. }
  2230. 80% {
  2231. -webkit-transform: translateY(5px);
  2232. transform: translateY(5px);
  2233. background-color: #fff;
  2234. }
  2235. 100% {
  2236. -webkit-transform: translateY(0);
  2237. transform: translateY(0);
  2238. background-color: #FFF;
  2239. }
  2240. }
  2241.  
  2242. @-webkit-keyframes animate-out-bottom-bar {
  2243. 0% {
  2244. background-color: #fff;
  2245. }
  2246. 50% {
  2247. -webkit-transform: translateY(-9px);
  2248. transform: translateY(-9px)
  2249. }
  2250. 80% {
  2251. -webkit-transform: translateY(-5px);
  2252. transform: translateY(-5px);
  2253. background-color: #fff;
  2254. }
  2255. 100% {
  2256. -webkit-transform: translateY(0);
  2257. transform: translateY(0);
  2258. background-color: #FFF;
  2259. }
  2260. }
  2261.  
  2262. @keyframes animate-out-bottom-bar {
  2263. 0% {
  2264. background-color: #fff;
  2265. }
  2266. 50% {
  2267. -webkit-transform: translateY(-9px);
  2268. transform: translateY(-9px)
  2269. }
  2270. 80% {
  2271. -webkit-transform: translateY(-5px);
  2272. transform: translateY(-5px);
  2273. background-color: #fff;
  2274. }
  2275. 100% {
  2276. -webkit-transform: translateY(0);
  2277. transform: translateY(0);
  2278. background-color: #FFF;
  2279. }
  2280. }
  2281.  
  2282. @-webkit-keyframes animate-out-middle-bar {
  2283. 0% {
  2284. background-color: #fff;
  2285. }
  2286. 80% {
  2287. background-color: #fff;
  2288. }
  2289. 100% {
  2290. background-color: #fff;
  2291. }
  2292. }
  2293.  
  2294. @keyframes animate-out-middle-bar {
  2295. 0% {
  2296. background-color: #fff;
  2297. }
  2298. 80% {
  2299. background-color: #fff;
  2300. }
  2301. 100% {
  2302. background-color: #fff;
  2303. }
  2304. }
  2305.  
  2306. }
  2307.  
  2308. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  2309. #leo {
  2310.  
  2311. font-family: Arial, Sans-Serif;
  2312. text-transform:uppercase;
  2313. text-align:center;
  2314. z-index:98;
  2315. box-sizing:content-box;
  2316. -webkit-box-sizing:content-box;
  2317. -moz-box-sizing:content-box;
  2318.  
  2319. }
  2320.  
  2321. #leo a {
  2322. z-index:99;
  2323. position:fixed;
  2324. font-size:12px;
  2325. line-height:16px;
  2326. width:18px;
  2327. height:18px;
  2328. font-weight:300;
  2329. bottom:10px;
  2330. right:10px;
  2331. color:#000;
  2332. background:rgba(255,255,255,0.4);
  2333. padding:5px;
  2334. transition: all 1s ease-in-out;
  2335. -webkit-transition: all 1s ease-in-out;
  2336. -o-transition: all 1s ease-in-out;
  2337. -moz-transition: all 1s ease-in-out;
  2338. box-sizing:content-box;
  2339. -webkit-box-sizing:content-box;
  2340. -moz-box-sizing:content-box;
  2341. }
  2342.  
  2343. #leo a:hover {
  2344. background-color:rgba(0,0,0,1);
  2345. color:#fff;
  2346. border-radius:50%;
  2347. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  2348. -moz-animation: hermione 1s;
  2349. -o-animation: hermione 1s;
  2350. animation: hermione 1s;
  2351. animation-timing-function: ease-in-out;
  2352. -webkit-animation-timing-function: ease-in-out;
  2353. -moz-animation-timing-function: ease-in-out;
  2354. -o-animation-timing-function: ease-in-out;
  2355.  
  2356. -moz-transform: rotate(720deg); /* IE 9 */
  2357. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  2358. transform: rotate(720deg);
  2359.  
  2360. transition: all 1s ease-in-out;
  2361. -webkit-transition: all 1s ease-in-out;
  2362. -o-transition: all 1s ease-in-out;
  2363. -moz-transition: all 1s ease-in-out;
  2364.  
  2365.  
  2366. }
  2367.  
  2368. @-webkit-keyframes hermione {
  2369. 0% {color:#000;}
  2370. 25% {color:#ACE4EA;}
  2371. 50% {color:#FFFBDD;}
  2372. 75% {color:#ACE4EA;}
  2373. 100% {color:#fff;}
  2374. }
  2375. @-moz-keyframes hermione {
  2376. 0% {color:#000;}
  2377. 25% {color:#ACE4EA;}
  2378. 50% {color:#FFFBDD;}
  2379. 75% {color:#ACE4EA;}
  2380. 100% {color:#fff;}
  2381. }
  2382. @-o-keyframes hermione {
  2383. 0% {color:#000;}
  2384. 25% {color:#ACE4EA;}
  2385. 50% {color:#FFFBDD;}
  2386. 75% {color:#ACE4EA;}
  2387. 100% {color:#fff;}
  2388. }
  2389.  
  2390. @keyframes hermione {
  2391. 0% {color:#000;}
  2392. 25% {color:#ACE4EA;}
  2393. 50% {color:#FFFBDD;}
  2394. 75% {color:#ACE4EA;}
  2395. 100% {color:#fff;}
  2396. }
  2397. /*END OF CREDIT*/
  2398.  
  2399. </style>
  2400.  
  2401. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  2402.  
  2403. <!-- animsition.css -->
  2404. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  2405.  
  2406. <!-- animsition.js -->
  2407. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  2408.  
  2409. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2410.  
  2411. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  2412.  
  2413. <script>
  2414. $(document).ready(function() {
  2415.  
  2416. $(".animsition").animsition({
  2417. inClass: 'fade-in',
  2418. outClass: 'fade-out',
  2419. inDuration: 1500,
  2420. outDuration: 800,
  2421. linkElement: '.a-link',
  2422. loading: true,
  2423. loadingParentElement: 'body',
  2424. loadingClass: 'animsition-loading',
  2425. loadingInner: '',
  2426. timeout: true,
  2427. timeoutCountdown: 200,
  2428. onLoadEvent: true,
  2429. browser: [ 'animation-duration', '-webkit-animation-duration'],
  2430. overlay : false,
  2431. overlayClass : 'animsition-overlay-slide',
  2432. overlayParentElement : 'body',
  2433. transition: function(url){ window.location.href = url; }
  2434. });
  2435.  
  2436. $('.photo-slideshow').pxuPhotoset({
  2437. lightbox: true,
  2438. rounded: false,
  2439. gutter: '0px',
  2440. borderRadius: '0px',
  2441. photoset: '.photo-slideshow',
  2442. photoWrap: '.photo-data',
  2443. photo: '.pxu-photo'
  2444. });
  2445.  
  2446. $(function() {
  2447. $('.captions a').addClass('a-link');
  2448. $('a.tumblelog').addClass('a-link');
  2449. $('.navi-grid a').addClass('a-link');
  2450. $('.broll a').addClass('a-link');
  2451. });
  2452.  
  2453. });
  2454. </script>
  2455.  
  2456. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  2457.  
  2458. <script>
  2459.  
  2460. $(function(){ $('.unnested .posts').unnest({
  2461. yourCaption: ".captions", //your caption selector, the div wrapping
  2462. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  2463. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  2464. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  2465. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  2466. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  2467. usernameColon: false //if turned to false, removes the colon at the end of usernames
  2468. }); });
  2469.  
  2470. </script>
  2471.  
  2472. {block:indexpage}
  2473.  
  2474.  
  2475. {block:ifmanualload}
  2476.  
  2477. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  2478.  
  2479. <script>
  2480.  
  2481. // Infinite Scroll
  2482. $(function() {
  2483.  
  2484. var $container = $('#entries');
  2485. $container.infinitescroll({
  2486.  
  2487. loading: {
  2488. finishedMsg: "<em>No more posts</em>",
  2489. img: null,
  2490. msg: null,
  2491. msgText: "<em>Loading posts...</em>",
  2492.  
  2493. finished: function () {$('.append').text('Load More'); },
  2494.  
  2495.  
  2496. },
  2497.  
  2498. navSelector : '.pg',
  2499. nextSelector : '.pg a:last',
  2500. itemSelector : 'article.posts',
  2501.  
  2502. errorCallback: function () {$('.append').fadeOut();},
  2503.  
  2504. bufferPx : 200,
  2505.  
  2506. },
  2507.  
  2508. function( newElements ) {
  2509.  
  2510.  
  2511. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  2512. lightbox: true,
  2513. rounded: true,
  2514. gutter: '0px',
  2515. borderRadius: '0px',
  2516. photoset: '.photo-slideshow',
  2517. photoWrap: '.photo-data',
  2518. photo: '.pxu-photo'
  2519. });
  2520.  
  2521.  
  2522.  
  2523.  
  2524. var $newElems = $(newElements);
  2525. var $newElemsIDs = $newElems.map(function(){
  2526. return this.id;
  2527. }).get();
  2528. console.log($newElems, $newElemsIDs);
  2529. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  2530.  
  2531. $( newElements ).find('a.tumblelog').addClass('a-link');
  2532. $( newElements ).find('.captions a').addClass('a-link');
  2533.  
  2534.  
  2535.  
  2536. {block:ifunnestedcaptions}
  2537. $newElems.unnest({
  2538.  
  2539. yourCaption: ".captions",
  2540. wrapName: ".tumblr_parent",
  2541. newCaptionUsername: false,
  2542. originalPostCaptionUsername: false,
  2543. tumblrAvatars: true,
  2544. tumblrAvatarClass: ".tumblr_avatar",
  2545. usernameColon: false
  2546.  
  2547. });
  2548.  
  2549. {/block:ifunnestedcaptions}
  2550.  
  2551.  
  2552.  
  2553. });
  2554.  
  2555. $container.infinitescroll('unbind');
  2556. $('.append').on('click', function(e) {
  2557. e.preventDefault();
  2558. $container.infinitescroll('retrieve');
  2559. });
  2560. });
  2561. </script>
  2562.  
  2563. {/block:ifmanualload}
  2564.  
  2565. {/block:indexpage}
  2566.  
  2567. </head>
  2568. <body class="animsition {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display} {block:ifmulticolumn}multicol{/block:ifmulticolumn} {block:ifnotmulticolumn}singlecol{/block:ifnotmulticolumn}">
  2569.  
  2570. <div class="overlay-navigation">
  2571. <nav role="navigation" id="split-box">
  2572. <ul>
  2573. <li>
  2574. <div class="menu-desc">
  2575. <h2>{text:basic info}</h2>
  2576. <img src="{image:menu}">
  2577. {block:description}
  2578. <p class="p-desc">{Description}</p>
  2579. {/block:description}
  2580.  
  2581. </div>
  2582. </li>
  2583. <li>
  2584.  
  2585. <div class="menu menu--ama">
  2586.  
  2587. <a class="menu__item a-link" href="/">
  2588. <span class="menu__item-name">Home</span>
  2589. </a>
  2590. <a class="menu__item a-link" href="/ask">
  2591. <span class="menu__item-name">Ask</span>
  2592. </a>
  2593. <a class="menu__item a-link" href="{text:link1 URL}">
  2594. <span class="menu__item-name">{text:link1}</span>
  2595. </a>
  2596. <a class="menu__item a-link" href="{text:link2 URL}">
  2597. <span class="menu__item-name">{text:link2}</span>
  2598. </a>
  2599. <a class="menu__item a-link" href="{text:link3 URL}">
  2600. <span class="menu__item-name">{text:link3}</span>
  2601. </a>
  2602.  
  2603. </div>
  2604.  
  2605. {block:ifsnow}
  2606. <div class="snowflakes"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
  2607. {/block:ifsnow}
  2608. </li>
  2609. </ul>
  2610. </nav>
  2611. </div>
  2612.  
  2613. <!--main cont-->
  2614.  
  2615. <main>
  2616.  
  2617. <div class="open-overlay">
  2618. <span class="bar-top"></span>
  2619. <span class="bar-middle"></span>
  2620. <span class="bar-bottom"></span>
  2621. </div>
  2622.  
  2623. <!--slim sidebar-->
  2624. <aside>
  2625.  
  2626. <div class="sb_cont">
  2627. <nav class="sbnav">
  2628. <a data-tabs="tab1" title="posts" class="active"><span class="lnr lnr-home"></span></a>
  2629. <a data-tabs="tab2" title="FAQ"><span class="lnr lnr-envelope"></span></a>
  2630. <a data-tabs="tab3" title="Links"><span class="lnr lnr-bookmark"></span></a>
  2631.  
  2632. {block:following}
  2633. {block:ifshowblogroll}
  2634. <a data-tabs="tab4" title="blogroll"><span class="lnr lnr-users"></span></a>
  2635. {/block:ifshowblogroll}
  2636. {/block:following}
  2637. </nav>
  2638. </div>
  2639.  
  2640. {block:ifsnow}
  2641. <div class="snowflakes"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
  2642. {/block:ifsnow}
  2643. </aside>
  2644. <!--/slim sidebar-->
  2645.  
  2646. <section>
  2647.  
  2648. <div id="tab1" class="tabs">
  2649. <header>
  2650.  
  2651. <div class="h_desc">
  2652.  
  2653. <div class="h_img">
  2654. <!--profile img-->
  2655. <img src="{image:header}">
  2656. </div>
  2657.  
  2658.  
  2659. <div class="h_txt">
  2660. <h1>{Title}</h1>
  2661. <nav class="h_nav">
  2662. <a class="a-link" href="/">Home</a>
  2663. <a class="a-link" href="/ask">Ask</a>
  2664. <a class="a-link" href="{text:link1 URL}">{text:link1}</a>
  2665. <a class="a-link" href="{text:link2 URL}">{text:link2}</a>
  2666. <a class="a-link" href="{text:link3 URL}">{text:link3}</a>
  2667. </nav>
  2668. {block:description}
  2669. <p>{Description}</p>
  2670. {/block:description}
  2671. </div>
  2672.  
  2673. </div>
  2674.  
  2675. {block:ifsnow}
  2676. <div class="snowflakes"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
  2677. {/block:ifsnow}
  2678.  
  2679.  
  2680. </header>
  2681.  
  2682. <div id="entries">
  2683.  
  2684. {block:posts}
  2685.  
  2686. <article class="posts {block:text}text_posts{/block:text} {block:photoset}photoset_posts{/block:photoset}"id="{PostID}">
  2687.  
  2688. <div class="postwrap">
  2689.  
  2690.  
  2691. <!--Photo post-->
  2692. {block:photo}
  2693. {LinkOpenTag}
  2694. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  2695. <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">
  2696. </a>
  2697. {LinkCloseTag}
  2698.  
  2699. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2700. {/block:photo}
  2701. <!--/Photo post-->
  2702.  
  2703. <!--Photoset post-->
  2704. {block:Photoset}
  2705. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2706.  
  2707. {block:Photos}
  2708. <div class="photo-data">
  2709. <div class="pxu-photo">
  2710. <img class="pffft" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  2711. </div>
  2712. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2713. </div>
  2714. {/block:Photos}
  2715.  
  2716. </div>
  2717.  
  2718. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2719. {/block:Photoset}
  2720. <!--/Photoset post-->
  2721.  
  2722. <!--Text-->
  2723. {block:text}
  2724. {block:title}<div class="pads txttitle"><h1>{Title}</h1></div>{/block:title}
  2725. <div class="captions">{body}</div>
  2726. {/block:text}
  2727. <!--Text-->
  2728.  
  2729. <!--Link-->
  2730. {block:link}
  2731. <div class="pads link_cont">
  2732. <h1 class="plink"><a href="{URL}"><span class="lnr lnr-link"></span> {Name}</a></h1>
  2733. </div>
  2734. {block:Description}
  2735. <div class="captions">{Description}</div>
  2736. {/block:Description}
  2737. {/block:link}
  2738. <!--/Link-->
  2739.  
  2740. <!--Quote-->
  2741. {block:Quote}
  2742. <div class="pads">
  2743. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  2744.  
  2745. {block:Source}
  2746.  
  2747. <div class="divider"></div>
  2748.  
  2749. <span class="qsource">{Source}</span>{/block:Source}
  2750. </div>
  2751. {/block:Quote}
  2752. <!--/Quote-->
  2753.  
  2754. <!--Video-->
  2755. {block:Video}
  2756. <div class="video">{Video-500}</div>
  2757. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2758. {/block:Video}
  2759. <!--/Video-->
  2760.  
  2761. <!--Audio-->
  2762. {block:Audio}
  2763. <div class="audio_cont">
  2764. <div class="audio_cover">
  2765.  
  2766. <div class="playback">
  2767. <div class="playbox">{AudioPlayerWhite}</div>
  2768. </div>
  2769.  
  2770. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2771.  
  2772. {block:AlbumArt}
  2773. <img src="{AlbumArtURL}" style="position:absolute;">
  2774. {/block:AlbumArt}
  2775. </div>
  2776. <div class="audio_info">
  2777. <div>
  2778. {block:TrackName}
  2779. <b>Song:</b> {TrackName}
  2780. {/block:TrackName}<br>
  2781.  
  2782. {block:Artist}
  2783. <b>Artist:</b> {Artist}
  2784. {/block:Artist}<br>
  2785.  
  2786. {block:Album}
  2787. <b>Album:</b> {Album}
  2788. {/block:Album}
  2789. </div>
  2790. </div>
  2791.  
  2792. </div>
  2793. {block:Caption}
  2794. <div class="captions">{Caption}</div>
  2795. {/block:Caption}
  2796. {/block:Audio}
  2797. <!--/Audio-->
  2798.  
  2799. <!--Ask post-->
  2800. {block:Answer}
  2801. <div class="ask_cont pads">
  2802.  
  2803. <img src="{AskerPortraitURL-64}">
  2804.  
  2805. <span>{Asker}:</span> {Question}
  2806.  
  2807. </div>
  2808. <div class="captions">
  2809. {Answer}
  2810. </div>
  2811. {/block:Answer}
  2812. <!--/Ask post-->
  2813.  
  2814. <!--Chat-->
  2815. {block:chat}
  2816. <div class="pads">
  2817. {block:title}<h1>{Title}</h1>{/block:title}
  2818. <ul class="chatlines">
  2819. {block:Lines}
  2820. <li class="clines {Alt}">
  2821. {block:Label}<b>{Label}</b>{/block:Label}
  2822. {Line}
  2823. </li>
  2824. {/block:Lines}
  2825. </ul>
  2826. </div>
  2827. {/block:chat}
  2828. <!--/Chat-->
  2829.  
  2830.  
  2831. {block:date}
  2832. <div class="post_footer">
  2833. <div class="datesourcetag">
  2834.  
  2835. <span class="dtls">
  2836. <a title="{TimeAgo}" class="a-link" href="{Permalink}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a> </span>
  2837.  
  2838. <span class="dtls">
  2839. {block:RebloggedFrom}
  2840. <a href="{ReblogParentURL}" title="{ReblogParentName}" class="a-link">via</a>
  2841. {block:ContentSource}
  2842. / <a href="{SourceURL}" title="{ReblogRootName}" class="a-link">src</a>
  2843. {/block:ContentSource}
  2844. {/block:RebloggedFrom}
  2845. </span>
  2846.  
  2847.  
  2848. </div>
  2849. <div class="socs">
  2850.  
  2851. <div class="soc_obj">
  2852. <a title="reblog" class="a-link"href="{ReblogURL}"><span class="lnr lnr-sync"></span></a>
  2853. </div>
  2854.  
  2855. <div class="custom-like-button soc_obj">
  2856. {LikeButton size="12"}
  2857. <span class="our_button">
  2858. <span class="lnr lnr-heart"></span>
  2859. </span>
  2860. </div>
  2861.  
  2862. </div>
  2863. </div>
  2864. {/block:date}
  2865.  
  2866. </div>
  2867.  
  2868.  
  2869.  
  2870. {block:date}
  2871.  
  2872. {block:HasTags}
  2873. <div class="tags {PostID}">
  2874. {block:Tags}
  2875. <a class="a-link" href="{TagURL}">#{Tag}</a>
  2876. {/block:Tags}
  2877. </div>
  2878. {/block:HasTags}
  2879.  
  2880. {/block:date}
  2881.  
  2882. </article>
  2883.  
  2884. <!-- {block:NoRebloggedFrom}
  2885. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2886. {/block:NoRebloggedFrom} -->
  2887.  
  2888. {block:ContentSource}<!-- {SourceURL}
  2889. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  2890. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2891. {/block:ContentSource}
  2892.  
  2893.  
  2894. {block:date}
  2895. {block:permalinkpage}
  2896. {block:NoteCount}
  2897. <article class="posts contentbox postnotes">
  2898. <div class="pads">
  2899. <h1 class="notehead">{NoteCountWithLabel}</h1>
  2900. </div>
  2901.  
  2902. <div class="tumblr_notes">
  2903. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  2904. </div>
  2905.  
  2906. </article>
  2907. {/block:NoteCount}
  2908. {/block:permalinkpage}
  2909. {/block:date}
  2910.  
  2911. {/block:posts}
  2912.  
  2913. </div>
  2914.  
  2915. {block:indexpage}
  2916. <!--pagination-->
  2917. {block:pagination}
  2918.  
  2919. <div class="pg">
  2920. {block:PreviousPage}<a class="a-link" href="{PreviousPage}">Back</a>{/block:PreviousPage}
  2921.  
  2922.  
  2923. {block:NextPage}<a class="a-link" href="{NextPage}">Forth</a>{/block:NextPage}
  2924. </div>
  2925.  
  2926.  
  2927.  
  2928. {block:ifmanualload}
  2929.  
  2930. <footer>
  2931. <div class="bottom"><a class="append">Load More</a></div>
  2932. </footer>
  2933. {/block:ifmanualload}
  2934.  
  2935. {/block:pagination}
  2936. <!--/pagination-->
  2937.  
  2938. {/block:indexpage}
  2939.  
  2940. </div>
  2941.  
  2942. <div id="tab2"class="tabs">
  2943. <div class="tabstuff">
  2944. <h1>Info + FAQ</h1>
  2945.  
  2946. <div class="pads">
  2947.  
  2948. <p>{text:info text}</p>
  2949.  
  2950. <p class="tabq">{text:question 1}</p>
  2951.  
  2952. <p class="taba">{text:answer 1}</p>
  2953.  
  2954. <p class="tabq">{text:question 2}</p>
  2955.  
  2956. <p class="taba">{text:answer 2}</p>
  2957.  
  2958. <p class="tabq">{text:question 3}</p>
  2959.  
  2960. <p class="taba">{text:answer 3}</p>
  2961.  
  2962. <h2>{AskLabel}</h2>
  2963. <p>
  2964.  
  2965. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  2966.  
  2967. </p>
  2968. </div>
  2969. </div>
  2970. </div>
  2971. <div id="tab3"class="tabs">
  2972. <div class="tabstuff">
  2973. <h1>Navigation</h1>
  2974. <div class="navigrid pads">
  2975. <div class="navi-items">
  2976. <h6>{text:nav category 1}</h6>
  2977.  
  2978. <ul>
  2979. <li><a href="{text:navilink 1 URL}">{text:navilink 1}</a></li>
  2980. <li><a href="{text:navilink 2 URL}">{text:navilink 2}</a></li>
  2981. <li><a href="{text:navilink 3 URL}">{text:navilink 3}</a></li>
  2982. <li><a href="{text:navilink 4 URL}">{text:navilink 4}</a></li>
  2983. </ul>
  2984.  
  2985.  
  2986.  
  2987.  
  2988. </div>
  2989.  
  2990. <div class="navi-items">
  2991. <h6>{text:nav category 2}</h6>
  2992.  
  2993. <ul>
  2994. <li><a href="{text:navilink 5 URL}">{text:navilink 5}</a></li>
  2995. <li><a href="{text:navilink 6 URL}">{text:navilink 6}</a></li>
  2996. <li><a href="{text:navilink 7 URL}">{text:navilink 7}</a></li>
  2997. <li><a href="{text:navilink 8 URL}">{text:navilink 8}</a></li>
  2998. </ul>
  2999. </div>
  3000.  
  3001. <div class="navi-items">
  3002. <h6>{text:nav category 3}</h6>
  3003.  
  3004. <ul>
  3005. <li><a href="{text:navilink 9 URL}">{text:navilink 9}</a></li>
  3006. <li><a href="{text:navilink 10 URL}">{text:navilink 10}</a></li>
  3007. <li><a href="{text:navilink 11 URL}">{text:navilink 11}</a></li>
  3008. <li><a href="{text:navilink 12 URL}">{text:navilink 12}</a></li>
  3009. </ul>
  3010.  
  3011. </div>
  3012.  
  3013. {block:ifshowblock4}
  3014. <div class="navi-items">
  3015. <h6>{text:nav category 4}</h6>
  3016.  
  3017. <ul>
  3018. <li><a href="{text:navilink 13 URL}">{text:navilink 13}</a></li>
  3019. <li><a href="{text:navilink 14 URL}">{text:navilink 14}</a></li>
  3020. <li><a href="{text:navilink 15 URL}">{text:navilink 15}</a></li>
  3021. <li><a href="{text:navilink 16 URL}">{text:navilink 16}</a></li>
  3022. </ul>
  3023.  
  3024.  
  3025.  
  3026.  
  3027. </div>
  3028. {/block:ifshowblock4}
  3029.  
  3030. {block:ifshowblock5}
  3031. <div class="navi-items">
  3032. <h6>{text:nav category 5}</h6>
  3033.  
  3034. <ul>
  3035. <li><a href="{text:navilink 17 URL}">{text:navilink 17}</a></li>
  3036. <li><a href="{text:navilink 18 URL}">{text:navilink 18}</a></li>
  3037. <li><a href="{text:navilink 19 URL}">{text:navilink 19}</a></li>
  3038. <li><a href="{text:navilink 20 URL}">{text:navilink 20}</a></li>
  3039. </ul>
  3040. </div>
  3041. {/block:ifshowblock5}
  3042.  
  3043. {block:ifshowblock6}
  3044. <div class="navi-items">
  3045. <h6>{text:nav category 6}</h6>
  3046.  
  3047. <ul>
  3048. <li><a href="{text:navilink 21 URL}">{text:navilink 21}</a></li>
  3049. <li><a href="{text:navilink 22 URL}">{text:navilink 22}</a></li>
  3050. <li><a href="{text:navilink 23 URL}">{text:navilink 23}</a></li>
  3051. <li><a href="{text:navilink 24 URL}">{text:navilink 24}</a></li>
  3052. </ul>
  3053.  
  3054. </div>
  3055. {/block:ifshowblock6}
  3056.  
  3057. </div>
  3058. </div>
  3059. </div>
  3060.  
  3061. {block:following}
  3062. {block:ifshowblogroll}
  3063. <div id="tab4"class="tabs">
  3064. <div class="tabstuff">
  3065. <h1>Blogroll</h1>
  3066. <div class="pads broll">
  3067.  
  3068. {block:Followed}
  3069.  
  3070. <a href="{FollowedURL}" title="{FollowedName}"><img class="followed" src="{FollowedPortraitURL-128}"></a>
  3071.  
  3072. {/block:Followed}
  3073.  
  3074. </div>
  3075. </div>
  3076. </div>
  3077. {/block:ifshowblogroll}
  3078. {/block:following}
  3079.  
  3080. </section>
  3081.  
  3082.  
  3083.  
  3084. </main>
  3085.  
  3086. <!--/main cont-->
  3087.  
  3088. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  3089. <div id="leo">
  3090. <a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
  3091. </div>
  3092. <!--END OF CREDIT-->
  3093.  
  3094.  
  3095.  
  3096. <script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
  3097. <script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js'></script>
  3098. <script >$('.open-overlay').click(function () {
  3099. $('.open-overlay').css('pointer-events', 'none');
  3100. var overlay_navigation = $('.overlay-navigation'),
  3101. top_bar = $('.bar-top'),
  3102. middle_bar = $('.bar-middle'),
  3103. bottom_bar = $('.bar-bottom');
  3104.  
  3105. overlay_navigation.toggleClass('overlay-active');
  3106. if (overlay_navigation.hasClass('overlay-active')) {
  3107.  
  3108. top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
  3109. middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
  3110. bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
  3111. overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
  3112. overlay_navigation.velocity('transition.slideLeftIn', {
  3113. duration: 800,
  3114. delay: 0,
  3115. begin: function () {
  3116. $('nav#split-box ul li').velocity('transition.perspectiveLeftIn', {
  3117. stagger: 400,
  3118. delay: 0,
  3119. complete: function () {
  3120. $('nav#split-box ul li > *').velocity({
  3121. opacity: [1, 0] },
  3122. {
  3123. delay: 10,
  3124. duration: 140 });
  3125.  
  3126. $('.open-overlay').css('pointer-events', 'auto');
  3127. } });
  3128.  
  3129. } });
  3130.  
  3131.  
  3132. } else {
  3133. $('.open-overlay').css('pointer-events', 'none');
  3134. top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
  3135. middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
  3136. bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
  3137. overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up');
  3138. $('nav ul li').velocity('transition.perspectiveRightOut', {
  3139. stagger: 300,
  3140. delay: 0,
  3141. complete: function () {
  3142. overlay_navigation.velocity('transition.fadeOut', {
  3143. delay: 0,
  3144. duration: 150,
  3145. complete: function () {
  3146. $('nav ul li > *').velocity({
  3147. opacity: [0, 1] },
  3148. {
  3149. delay: 0,
  3150. duration: 50 });
  3151.  
  3152. $('.open-overlay').css('pointer-events', 'auto');
  3153. } });
  3154.  
  3155. } });
  3156.  
  3157. }
  3158. });
  3159. </script>
  3160.  
  3161. <script type="text/javascript">
  3162. !function(e){"undefined"==typeof module?this.charming=e:module.exports=e}(function(e,n){"use strict";n=n||{};var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;++l<c;){var d=document.createElement(t);o&&(d.className=o+r,r++),d.appendChild(document.createTextNode(a[l])),n.insertBefore(d,e)}n.removeChild(e)};return function c(e){for(var n=[].slice.call(e.childNodes),t=n.length,o=-1;++o<t;)c(n[o]);e.nodeType===Node.TEXT_NODE&&a(e)}(e),e});
  3163. </script>
  3164.  
  3165. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  3166.  
  3167. <script>
  3168. /**
  3169. * demo-ama.js
  3170. * https://www.codrops.com
  3171. *
  3172. * Licensed under the MIT license.
  3173. * https://www.opensource.org/licenses/mit-license.php
  3174. *
  3175. * Copyright 2017, Codrops
  3176. * https://www.codrops.com
  3177. */
  3178. {
  3179. const items = Array.from(document.querySelectorAll('.menu > .menu__item'));
  3180.  
  3181. class Item {
  3182. constructor(el) {
  3183. this.DOM = {};
  3184. this.DOM.el = el;
  3185. this.DOM.name = el.querySelector('.menu__item-name');
  3186. this.colors = {
  3187. active: window.getComputedStyle(this.DOM.el).getPropertyValue('--menu-item-color')
  3188. };
  3189. charming(this.DOM.name);
  3190. this.DOM.nameLetters = Array.from(this.DOM.name.querySelectorAll('span'));
  3191. this.colors.initial = window.getComputedStyle(this.DOM.nameLetters[0]).color;
  3192. this.initEvents();
  3193. }
  3194. initEvents() {
  3195. const duration = 150;
  3196.  
  3197. this.mouseenterFn = () => this.mouseTimeout = setTimeout(() => {
  3198. this.isActive = true;
  3199. anime.remove(this.DOM.nameLetters);
  3200. anime({
  3201. targets: this.DOM.nameLetters,
  3202. delay: (t,i) => i*20,
  3203. translateY: [
  3204. {value: (t,i) => i%2===0?10:-10, duration: duration, easing: 'easeInSine'},
  3205. {value: (t,i) => i%2===0?[-10,0]:[10,0], duration: duration+700, easing: 'easeOutElastic', elasticity: 600}
  3206. ],
  3207. opacity: [
  3208. {value: 0, duration: duration, easing: 'linear'},
  3209. {value: 1, duration: duration, easing: 'linear'}
  3210. ],
  3211. color: {
  3212. value: this.colors.active,
  3213. duration: 1,
  3214. delay:(t,i) => i*20+duration,
  3215. easing: 'linear'
  3216. }
  3217. });
  3218. }, 50);
  3219.  
  3220. this.mouseleaveFn = () => {
  3221. clearTimeout(this.mouseTimeout);
  3222. if( !this.isActive ) return;
  3223. this.isActive = false;
  3224.  
  3225. anime.remove(this.DOM.nameLetters);
  3226. anime({
  3227. targets: this.DOM.nameLetters,
  3228. delay: (t,i,l) => (l-i-1)*20,
  3229. translateY: [
  3230. {value: (t,i) => i%2===0?-10:10, duration: duration, easing: 'easeInSine'},
  3231. {value: (t,i) => i%2===0?[10,0]:[-10,0], duration: duration+700, easing: 'easeOutElastic', elasticity: 600}
  3232. ],
  3233. opacity: [
  3234. {value: 0, duration: duration, easing: 'linear'},
  3235. {value: 1, duration: duration, easing: 'linear'}
  3236. ],
  3237. color: {
  3238. value: this.colors.initial,
  3239. duration: 1,
  3240. delay:(t,i,l) => (l-i-1)*20+duration,
  3241. easing: 'linear'
  3242. }
  3243. });
  3244. };
  3245.  
  3246. this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
  3247. this.DOM.el.addEventListener('touchstart', this.mouseenterFn);
  3248. this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
  3249. this.DOM.el.addEventListener('touchend', this.mouseleaveFn);
  3250. }
  3251. };
  3252.  
  3253. items.forEach(item => new Item(item));
  3254. };
  3255. </script>
  3256.  
  3257.  
  3258. <script>
  3259. // TABS SHORTCODE
  3260.  
  3261. $(function(e) {
  3262.  
  3263. $('.tabs').hide().filter(':first').show();
  3264.  
  3265. $('.sbnav a[data-tabs]').on('click', function () {
  3266.  
  3267. $(this).siblings().removeClass('active');
  3268. $('.tabs').hide();
  3269.  
  3270. var tab = $(this).data('tabs');
  3271. $(this).addClass('active');
  3272. $('#' + tab).fadeIn().show();
  3273. });
  3274.  
  3275.  
  3276.  
  3277.  
  3278. $(".sbnav a").click(function(){
  3279. var cur =$(".sbnav a").index(this);
  3280. var elm = $('.tabs:eq('+cur+')');
  3281. elm.addClass("swashIn");
  3282. setTimeout(function() {
  3283. elm.removeClass("swashIn");
  3284. }, 220);
  3285. });
  3286.  
  3287. });
  3288.  
  3289. </script>
  3290.  
  3291. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3292.  
  3293. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  3294. jQuery.noConflict();
  3295. (function($){
  3296.  
  3297. $(document).ready(function(){
  3298.  
  3299. $("a[title],img[title],[title]").style_my_tooltips({
  3300.  
  3301. tip_follows_cursor:true,
  3302.  
  3303. tip_delay_time:30,
  3304.  
  3305. tip_fade_speed:300,
  3306.  
  3307. attribute:"title"
  3308.  
  3309. });
  3310.  
  3311. });
  3312.  
  3313. })(jQuery);
  3314. </script>
  3315.  
  3316. </body>
  3317. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!