API tools faq
paste
Advertisement
hermionemessi

Theme 03 (Multicolumn Version)

hermionemessi
Aug 12th, 2017
547
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <!--THEME 03 (Revamp) Clean 2.0 Multicolumn Version by hermionegrangcr
  5.  
  6. THEME BLOG: grangersdesigns
  7.  
  8.  
  9. ♛ ♛ ♛
  10. ♛♛♛ ♛♛♛ ♛♛♛
  11. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  12. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  15.  
  16.  
  17. Important:
  18.  
  19. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  20.  
  21. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  22.  
  23. ♚ Tweak this to your preference as long as the credits remain intact.
  24.  
  25. ♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
  26.  
  27.  
  28. -->
  29.  
  30. <title>{Title}</title>
  31. <meta charset="UTF-8" />
  32. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  33. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  34. <link rel="shortcut icon" href="{Favicon}">
  35.  
  36.  
  37. {block:Description}
  38. <meta name="description" content="{MetaDescription}"/>
  39. {/block:Description}
  40.  
  41. <meta name="image:info" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  42.  
  43. <meta name="image:header" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  44.  
  45. <meta name="color:accent" content="#222">
  46. <meta name="color:highlight" content="#D6C8FF">
  47. <meta name="color:links"content="#999">
  48. <meta name="color:grad1" content="#FBE4FC">
  49. <meta name="color:grad2" content="#D9F0F0">
  50. <meta name="color:lightbox"content="#f5f5f5">
  51.  
  52. <meta name="if:unnested captions" content="">
  53. <meta name="if:light heading"content="">
  54. <meta name="if:minimalist icons" content="">
  55. <meta name="if:has header" content="">
  56. <meta name="if:round icons" content="">
  57.  
  58.  
  59. <meta name="select:body font" content="Source Sans Pro">
  60. <meta name="select:body font" content="Open Sans">
  61. <meta name="select:body font" content="Karla">
  62. <meta name="select:body font" content="Roboto">
  63.  
  64. <meta name="select:heading font"content="Lato">
  65. <meta name="select:heading font"content="Raleway">
  66.  
  67.  
  68. <meta name="select:background" content="white_bg" title="White">
  69. <meta name="select:background" content="simple_bg" title="Simple">
  70. <meta name="select:background" content="grad_bg" title="Gradient">
  71.  
  72.  
  73. <meta name="select:font size" content="12px" title="12px">
  74. <meta name="select:font size" content="11px" title="11px">
  75. <meta name="select:font size" content="10px" title="10px">
  76. <meta name="select:font size" content="9px" title="9px">
  77.  
  78. <meta name="select:post width"content="post350"title="350px"/>
  79. <meta name="select:post width"content="post300"title="300px"/>
  80. <meta name="select:post width"content="post250"title="250px"/>
  81.  
  82. <meta name="select:photoset gutter"content="5px"title="5px">
  83. <meta name="select:photoset gutter"content="10px"title="10px">
  84. <meta name="select:photoset gutter"content="2px"title="2px">
  85. <meta name="select:photoset gutter"content="1px"title="1px">
  86. <meta name="select:photoset gutter"content="0px"title="0px">
  87.  
  88. <meta name="select:notes display" content="def_notes" title="default">
  89. <meta name="select:notes display" content="grid_notes" title="grid">
  90.  
  91. <meta name="text:basic info" content="Name | Age | MBTI">
  92. <meta name="text:Link1" content="Link1">
  93. <meta name="text:link1 URL" content="/">
  94. <meta name="text:Link2" content="Link2">
  95. <meta name="text:link2 URL" content="/">
  96. <meta name="text:Link3" content="Link3">
  97. <meta name="text:link3 URL" content="/">
  98. <meta name="text:Link4" content="Link4">
  99. <meta name="text:link4 URL" content="/">
  100. <meta name="text:Link5" content="Link5">
  101. <meta name="text:link5 URL" content="/">
  102. <meta name="text:Link6" content="Link6">
  103. <meta name="text:link6 URL" content="/">
  104. <meta name="text:Link7" content="Link7">
  105. <meta name="text:link7 URL" content="/">
  106. <meta name="text:Link8" content="Link8">
  107. <meta name="text:link8 URL" content="/">
  108. <meta name="text:Link9" content="Link9">
  109. <meta name="text:link9 URL" content="/">
  110.  
  111. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i" rel="stylesheet">
  112. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  113. <link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
  114. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  115.  
  116. <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
  117. <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
  118.  
  119. <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
  120.  
  121. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  122.  
  123. <style type="text/css">
  124. .tmblr-iframe {position:fixed !important;}
  125. /*Tumblr Controls*/
  126. .iframe-controls--desktop{
  127. padding-right:10px !important;
  128. top:-5px !important;
  129. opacity:0.6;
  130. -webkit-transform:scale(0.8);
  131. -webkit-transform-origin:right;
  132. -moz-transform:scale(0.8);
  133. -moz-transform-origin:right;
  134. -o-transform:scale(0.8);
  135. -o-transform-origin:right;
  136. -ms-transform:scale(0.8);
  137. -ms-transform-origin:right;
  138. transform:scale(0.8);
  139. transform-origin:right;
  140. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  141. -webkit-transition: all 0.3s ease-in-out;
  142. transition:all 0.3s ease-in-out;
  143. box-sizing: content-box;
  144. -webkit-box-sizing: content-box;
  145. -moz-box-sizing: content-box;
  146.  
  147. }
  148.  
  149. {block:permalinkpage}
  150. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  151. max-width: 500px!important;
  152. }
  153. {/block:permalinkpage}
  154.  
  155. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  156. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  157. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  158. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  159.  
  160. *,
  161. *::before,
  162. *::after {
  163. box-sizing: inherit;
  164. -webkit-box-sizing: inherit;
  165. -moz-box-sizing: inherit;
  166. }
  167.  
  168. ::-webkit-scrollbar {
  169. width:11px;
  170. background:#fafafa;
  171. }
  172.  
  173. ::-webkit-scrollbar:horizontal {display:none;}
  174.  
  175. ::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:5px solid #f5f5f5; }
  176.  
  177.  
  178. html, body {height:100%;}
  179.  
  180. html {
  181. box-sizing: border-box;
  182. -webkit-box-sizing: border-box;
  183. -moz-box-sizing: border-box;
  184. }
  185.  
  186. body {
  187. color:#222;
  188. font-size:12px;
  189. line-height:160%;
  190. margin:0;
  191. background-attachment:fixed;
  192. font-family:'{select:body font}',sans-serif;
  193. -webkit-font-smoothing: antialiased;
  194. -moz-osx-font-smoothing: grayscale;
  195. }
  196.  
  197. body.simple_bg {background:#f5f5f5;}
  198. body.white_bg {background:#fff;}
  199.  
  200. body.grad_bg {
  201. background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  202. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  203. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  204. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  205. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  206. }
  207.  
  208. #s-m-t-tooltip{
  209. position:absolute;
  210. margin-top: 10px;
  211. z-index:9999999999;
  212. padding:2px 5px 2px 5px;
  213. max-width:500px;
  214. background: #fff;
  215. font-size:{select:font size};
  216. font-size:90%;
  217. letter-spacing:1.1px;
  218. text-transform:uppercase;
  219. box-shadow: 1px 1px 3px #dfdfdf;
  220. border-left:2px solid {color:highlight};
  221. }
  222.  
  223. a {
  224. text-decoration:none;
  225. color:{color:links};
  226. cursor:help;
  227. -webkit-transition: all 0.3s ease-in-out;
  228. transition:all 0.3s ease-in-out;
  229. }
  230.  
  231. a:hover {
  232. color:{color:highlight};
  233. -webkit-transition: all 0.3s ease-in-out;
  234. transition:all 0.3s ease-in-out;
  235. }
  236.  
  237. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  238.  
  239. pre {
  240. white-space: pre-wrap;
  241. white-space: -moz-pre-wrap;
  242. white-space: -pre-wrap;
  243. white-space: -o-pre-wrap;
  244. word-wrap: break-word;
  245. background:#f5f5f5;
  246. padding:5px;
  247. }
  248.  
  249. ::selection {background:#f5f5f5; color:#000;}
  250. ::-moz-selection {background:#f5f5f5; color:#000;}
  251. ::-webkit-selection {background:#f5f5f5; color:#000;}
  252.  
  253. /*topbar*/
  254. .topbar {
  255. top:0;
  256. left:0;
  257. width:100%;
  258. position:fixed;
  259. background:#fff;
  260. z-index:99;
  261. color:#222;
  262. font-family:'Lato',arial,sans-serif;
  263. text-transform:uppercase;
  264. text-align:center;
  265. -webkit-transition: all 0.3s ease-in-out;
  266. transition:all 0.3s ease-in-out;
  267. }
  268.  
  269. .noheader .topbar {
  270. height:150px;
  271. }
  272.  
  273. .hasheader .topbar {
  274. height:180px;
  275. }
  276.  
  277. .topbar a {color:{color:accent};}
  278.  
  279. .gradientbg .topbar, .colourbg .topbar {border-bottom:1px solid #eaeaea;}
  280.  
  281. {block:iflightheading}
  282. nav.navigation a {font-weight:300;}
  283. .topbar h1 {font-weight:400;}
  284. {/block:iflightheading}
  285.  
  286. .topbar h1 {
  287. letter-spacing:2px;
  288. font-size:24px;
  289. -webkit-transition: all 0.3s ease-in-out;
  290. transition:all 0.3s ease-in-out;
  291. }
  292.  
  293. .topbar h1 a:hover {letter-spacing:5px;}
  294.  
  295. h1.blogtitle {
  296. position:relative;
  297. top:0;
  298. -webkit-transition: all 0.3s ease-in-out;
  299. transition:all 0.3s ease-in-out;
  300. }
  301.  
  302. .noheader h1.blogtitle {margin:40px auto 20px auto;}
  303. .hasheader h1.blogtitle {margin:20px auto 20px auto;}
  304.  
  305. img.headico {
  306. display:block;
  307. width:60px;
  308. {block:ifnotroundicons}
  309. border-radius:2px;
  310. {/block:ifnotroundicons}
  311.  
  312. {block:ifroundicons}
  313. border-radius:50%;
  314. {/block:ifroundicons}
  315. margin:auto;
  316. margin-bottom:calc({select:font size} * 1.5);
  317. }
  318.  
  319. .noheader img.headico {display:none;}
  320.  
  321. h1.scrolledtitle {
  322. position:absolute;
  323. top:-80px;
  324. margin-left:calc({select:font size} * 1.5);
  325. display:flex;
  326. display:-webkit-flex;
  327. display:-moz-flex;
  328. display:-ms-flex;
  329. align-items:center;
  330. -webkit-align-items:center;
  331. -moz-align-items:center;
  332. -ms-align-items:center;
  333. }
  334.  
  335. .scrolled h1.scrolledtitle {
  336. top:18px;
  337. -webkit-transition: all 0.3s ease-in-out;
  338. transition:all 0.3s ease-in-out;
  339. }
  340.  
  341. .scrolled h1.blogtitle {
  342. top:-150px;
  343. -webkit-transition: all 0.3s ease-in-out;
  344. transition:all 0.3s ease-in-out;
  345. }
  346.  
  347. img.prof {
  348. width:24px;
  349. {block:ifnotroundicons}
  350. border-radius:2px;
  351. {/block:ifnotroundicons}
  352.  
  353. {block:ifroundicons}
  354. border-radius:50%;
  355. {/block:ifroundicons}
  356. margin-right:{select:font size};
  357. }
  358.  
  359. .noheader img.prof {display:none;}
  360.  
  361. nav.navigation {
  362. right:0;
  363. margin:calc({select:font size} * 2) auto;
  364. position:relative;
  365. -webkit-transition: all 0.3s ease-in-out;
  366. transition:all 0.3s ease-in-out;
  367. }
  368.  
  369. nav.navigation a {
  370. font-size:calc({select:font size} * (4/3));
  371. margin:0 8px 0 8px;
  372. -webkit-transition: all 0.3s ease-in-out;
  373. transition:all 0.3s ease-in-out;
  374. }
  375.  
  376. nav.navigation a:hover {
  377. color:{color:highlight};
  378. -webkit-transition: all 0.3s ease-in-out;
  379. transition:all 0.3s ease-in-out;
  380. }
  381.  
  382. a#msgpop:before, a#infopop:before, a#navipop:before, a.totop:before {
  383. font-family: 'FontAwesome';
  384. display: inline-block;
  385. width: 5px;
  386. margin-right:calc({select:font size} * (4/3));
  387. }
  388.  
  389. {block:ifnotminimalisticons}
  390. a#msgpop:before {content:"\f0e0";}
  391.  
  392. a#infopop:before {content:"\f007";}
  393.  
  394. a#navipop:before {content:"\f0c9";}
  395.  
  396. a.totop:before {content:"\f0aa";}
  397. {/block:ifnotminimalisticons}
  398.  
  399. {block:ifminimalisticons}
  400. a#msgpop:before {content:"\f003";}
  401.  
  402. a#infopop:before {content:"\f2c0";}
  403.  
  404. a#navipop:before {content:"\f0c9";}
  405.  
  406. a.totop:before {content:"\f077";}
  407. {/block:ifminimalisticons}
  408.  
  409.  
  410. .scrolled nav.navigation {
  411. right:-39%;
  412. -webkit-transition: all 0.3s ease-in-out;
  413. transition:all 0.3s ease-in-out;
  414. }
  415.  
  416. .hasheader .scrolled nav.navigation {margin-top:-96px;}
  417. .noheader .scrolled nav.navigation {margin-top:-40px;}
  418.  
  419. .topbar.scrolled {
  420. height:70px;
  421. }
  422.  
  423. /*popups*/
  424. .overlay {
  425. position: fixed;
  426. width: 100%;
  427. height: 100%;
  428. top: 0;
  429. left: 0;
  430. color:{color:acccent};
  431. background: rgba(255,255,255,0.9);
  432. z-index:101;
  433. backdrop-filter: blur(2px)!important;
  434. -webkit-backdrop-filter: blur(2px)!important;
  435. }
  436.  
  437.  
  438.  
  439. /* Overlay closing cross */
  440. .overlay .overlay-close {
  441. cursor:help;
  442. width: 60px;
  443. height: 60px;
  444. position: absolute;
  445. right: 20px;
  446. top: 20px;
  447. overflow: hidden;
  448. border: none;
  449. color: transparent;
  450. outline: none;
  451. z-index: 102;
  452. }
  453.  
  454. .overlay-close svg.lnr {
  455. height:60px;
  456. width:60px;
  457. fill:{color:accent};
  458. -webkit-transition: all 0.3s ease-in-out;
  459. transition:all 0.3s ease-in-out;
  460. }
  461.  
  462. .overlay-close:hover svg.lnr {
  463. fill:{color:highlight};
  464. -webkit-transition: all 0.3s ease-in-out;
  465. transition:all 0.3s ease-in-out;
  466. }
  467.  
  468. .overlay nav {
  469. text-align: center;
  470. position: relative;
  471. margin:auto;
  472. width:600px;
  473. top: 50%;
  474. height: 60%;
  475. -webkit-transform: translateY(-50%);
  476. transform: translateY(-50%);
  477. }
  478.  
  479. .overlay nav > h1 {
  480. font-family:'{select:heading font}';
  481. font-weight:300;
  482. color:{color:accent};
  483. font-size:calc({select:font size} * 3);
  484. margin-bottom:calc({select:font size} * 3);
  485. }
  486.  
  487. .overlay-simplegenie {
  488. visibility: hidden;
  489. -webkit-transform: translateY(60%) scale(0);
  490. transform: translateY(60%) scale(0);
  491. -webkit-transition: -webkit-transform 0.4s, visibility 0s 0.4s;
  492. transition: transform 0.4s, visibility 0s 0.4s;
  493. }
  494.  
  495. .overlay-simplegenie.open {
  496. visibility: visible;
  497. -webkit-transform: translateY(0%) scale(1);
  498. transform: translateY(0%) scale(1);
  499. -webkit-transition: -webkit-transform 0.4s;
  500. transition: transform 0.4s;
  501. }
  502.  
  503. @media screen and (max-height: 30.5em) {
  504. .overlay nav {
  505. height: 70%;
  506. font-size: 34px;
  507. }
  508. }
  509.  
  510. #overlayinfo {
  511. width:500px;
  512. margin:auto;
  513. padding:25px 15px 25px 15px;
  514. text-align:justify;
  515. display:-webkit-box;
  516. display:-webkit-flex;
  517. display:-ms-flexbox;
  518. display:flex;
  519. -webkit-box-align: start;
  520. -webkit-align-items: flex-start;
  521. -ms-flex-align: start;
  522. align-items: flex-start;
  523. }
  524.  
  525. #abtblurb img {
  526. {block:ifnotroundicons}
  527. border-radius:2%;
  528. {/block:ifnotroundicons}
  529.  
  530. {block:ifroundicons}
  531. border-radius:50%;
  532. {/block:ifroundicons}
  533. }
  534.  
  535. #abtblurb {
  536. width:25%;
  537. }
  538.  
  539. #abtdesc > ul {
  540. padding:0;
  541. list-style:none;
  542. }
  543.  
  544. #abtdesc > ul > li {margin:calc({select:font size} * (2/3)) 0 calc({select:font size} * (2/3)) 0 ;}
  545.  
  546. #abttxt {
  547. width:75%;
  548. padding-left:8%;
  549. }
  550.  
  551. #abtdesc > ul > li:before {
  552. content: "×";
  553. color:{color:accent};
  554. padding-right: 8px;
  555. }
  556.  
  557. #abttxt blockquote {
  558. border-left: 1px #eaeaea solid;
  559. padding-left: 10px;
  560. margin-left: 10px;
  561. max-width: 100%;
  562. margin:1em 0 1em 0;
  563. }
  564.  
  565. #custlinks {
  566. width:500px;
  567. margin:auto;
  568. font-size:calc({select:font size} * 2.5);
  569. }
  570.  
  571. #custlinks a {
  572. display:inline-block;
  573. width:28%;
  574. text-align:center;
  575. white-space:nowrap;
  576. overflow:hidden;
  577. text-overflow:ellipsis;
  578. color:inherit;
  579. padding:10px;
  580. margin:20px 10px 20px 10px;
  581. font-weight:300;
  582. -webkit-transition: all 0.3s ease-in-out;
  583. transition:all 0.3s ease-in-out;
  584. }
  585.  
  586. #custlinks a:hover {
  587. color:{color:highlight};
  588. -webkit-transition: all 0.3s ease-in-out;
  589. transition:all 0.3s ease-in-out;
  590. }
  591.  
  592. main {
  593. display:block;
  594. position:relative;
  595. top:180px;
  596. }
  597.  
  598. .wrap {
  599. margin:0 auto;
  600. position:relative;
  601. }
  602.  
  603. .wrap .posts {
  604. padding:15px;
  605. background:#fff;
  606. text-align:justify;
  607. position:relative;
  608. }
  609.  
  610. .white_bg .posts {
  611. border:1px solid #fafafa;
  612. box-shadow:
  613. 0px 0px 0px 3px #fafafa,
  614. 1px 1px 2px 3px #fafafa;
  615. }
  616.  
  617. {block:permalinkpage}
  618. .wrap {width:500px;}
  619. .posts {margin:100px auto;}
  620. {/block:permalinkpage}
  621.  
  622. {block:indexpage}
  623. .post300 .wrap {width:1024px;}
  624. .post350 .wrap {width:1200px;}
  625. .post250 .wrap {width:850px;}
  626.  
  627. @media screen and (max-width: 1200px) {
  628. .post350 .wrap {width:800px;}
  629. }
  630.  
  631. @media screen and (max-width: 1024px) {
  632. .post300 .wrap {width:700px;}
  633. }
  634.  
  635. @media screen and (max-width: 900px) {
  636. .post250 .wrap {width:600px;}
  637. }
  638.  
  639. @media screen and (max-width: 750px) {
  640. .post350 .wrap {width:350px;}
  641. }
  642.  
  643. @media screen and (max-width: 650px) {
  644.  
  645. .post300 .wrap {width:300px;}
  646.  
  647. }
  648.  
  649. @media screen and (max-width: 600px) {
  650.  
  651. .post250 .wrap {width:250px;}
  652.  
  653. }
  654.  
  655.  
  656.  
  657. .wrap .posts {
  658. float:left;
  659. transition:
  660. all 0.4s ease-in-out;
  661. -webkit-transition:all 0.4s ease-in-out;
  662. -moz-transition:all 0.4s ease-in-out;
  663. -o-transition:all 0.4s ease-in-out;
  664. -ms-transition:all 0.4s ease-in-out;
  665.  
  666. -webkit-backface-visibility: hidden;
  667. }
  668.  
  669. .post350 .posts {
  670. width:350px;
  671. margin:25px;
  672. }
  673.  
  674. .post300 .posts {
  675. width:300px;
  676. margin:20px;
  677. }
  678.  
  679. .post250 .posts {
  680. width:250px;
  681. margin:15px;
  682. }
  683.  
  684. .wrap .posts.blur{
  685. box-shadow: 0px 0px 20px 10px #fafafa;
  686. transform: scale(0.9);
  687. -webkit-transform: scale(0.9);
  688. -moz-transform: scale(0.9);
  689. -o-transform: scale(0.9);
  690. -ms-transform: scale(0.9);
  691. opacity: 0.7;
  692. -moz-filter:blur(5px);
  693. -webkit-filter: blur(5px);
  694. filter: blur(5px);
  695. }
  696.  
  697. .wrap .posts.active{
  698. transform: scale(1.05);
  699. -webkit-transform: scale(1.05);
  700. -moz-transform: scale(1.05);
  701. -o-transform: scale(1.05);
  702. -ms-transform: scale(1.05);
  703. box-shadow:
  704. 0px 0px 0px 10px #fafafa,
  705. 1px 11px 15px 10px #fafafa;
  706. z-index: 80;
  707. opacity: 1;
  708. -webkit-filter: blur(0px);
  709. -moz-filter:blur(0px);
  710. filter: blur(0px);
  711. transition:
  712. all 0.4s ease-in-out;
  713. -webkit-transition:all 0.4s ease-in-out;
  714. -moz-transition:all 0.4s ease-in-out;
  715. -o-transition:all 0.4s ease-in-out;
  716. -ms-transition:all 0.4s ease-in-out;
  717. }
  718.  
  719. {block:indexpage}
  720.  
  721.  
  722. .posts img {
  723. max-width:100%;
  724. height:auto;
  725. }
  726.  
  727. .posts video, .posts .tumblr_video_container {
  728. width: 100% !important;
  729. height: auto !important;
  730. }
  731.  
  732. .posts h1, .posts h2 {
  733. font-weight:400;
  734. color:{color:accent};
  735. font-family:'{select:heading font}';
  736. }
  737.  
  738. .posts h1:only-child {margin-bottom:calc({select:font size} * 0.8);}
  739.  
  740. .posts h1 {
  741. margin:calc(({select:font size})/3) 0 calc(({select:font size} * 4)/3) 0;
  742. font-size:calc({select:font size} * 2);
  743. }
  744.  
  745. .posts h2 {
  746. margin:calc(({select:font size})/2) 0 calc(({select:font size} * 2)/3) 0;
  747. font-size:calc({select:font size} * 1.5);
  748. }
  749.  
  750. .posts h2 b {font-weight:400;}
  751.  
  752. .posts ol, .posts ul {
  753. list-style: none;
  754. margin-top: 0;
  755. padding-left: 0;
  756. }
  757. .posts ol {
  758. list-style: decimal inside;
  759. }
  760.  
  761. .posts ul {
  762. list-style: circle inside;
  763. }
  764.  
  765. .posts img.photop {display:block;line-height:0;}
  766.  
  767. .captions {word-wrap:break-word;}
  768.  
  769. .unnested .posts img.photop {margin-bottom:calc({select:font size} * (2/3));}
  770.  
  771. .defcap blockquote {
  772. border-left: 1px solid #eaeaea;
  773. margin-left: 0;
  774. margin-right: 0;
  775. padding-left: {select:font size};
  776. }
  777.  
  778. .defcap blockquote *:last-child {
  779. margin-bottom: 0;
  780. }
  781.  
  782. .defcap blockquote > p:first-of-type {margin-top:0;}
  783.  
  784. .defcap blockquote blockquote {
  785. padding: 0 0 0 0;
  786. margin: 0 0 0 0;
  787. border-left:none;
  788.  
  789. }
  790.  
  791. blockquote.tumblr_parent {
  792. max-width:100%;
  793. margin:0;
  794. }
  795.  
  796. .tumblr_parent blockquote {
  797. padding: 0 0 0 10px;
  798. margin: 0 0 0 0;
  799. border-left:1px {color:highlight} solid;
  800. }
  801.  
  802. .tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}
  803.  
  804.  
  805. .unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a) {vertical-align:middle;}
  806.  
  807.  
  808.  
  809. img.tumblr_avatar {
  810. {block:ifnotroundicons}
  811. border-radius:2px;
  812. {/block:ifnotroundicons}
  813.  
  814. {block:ifroundicons}
  815. border-radius:50%;
  816. {/block:ifroundicons}
  817. margin-right:{select:font size};
  818. margin-top:calc({select:font size} / 2);
  819. margin-bottom:calc({select:font size} / 2);
  820. width:36px;height:36px;
  821.  
  822. }
  823.  
  824. img.tumblr_avatar + a.tumblr_blog,.tumblr_parent a.tumblr_blog {
  825. font-weight:bold;
  826. vertical-align:middle;
  827. text-transform:uppercase;
  828. letter-spacing:1.5px;
  829. color:inherit;
  830. -webkit-transition: all 0.3s ease-in-out;
  831. transition:all 0.3s ease-in-out;
  832. }
  833.  
  834. img.tumblr_avatar + a:hover.tumblr_blog,.tumblr_parent a:hover.tumblr_blog {
  835. color:{color:highlight};
  836. -webkit-transition: all 0.3s ease-in-out;
  837. transition:all 0.3s ease-in-out;
  838. }
  839.  
  840. blockquote.tumblr_parent .captions.txtps p:first-child:not(:empty){margin-top:0;}
  841.  
  842. .captions *:not(h2) {font-size:inherit;}
  843.  
  844.  
  845. .defcap .captions a, .qsource a, span.action a, .tumblr_parent p a, a.append, #abttxt a {border-bottom:1px solid #dfdfdf;}
  846. .defcap .captions a:hover, .qsource a:hover, span.action a:hover, .tumblr_parent p a:hover, a.append:hover, #abttxt a:hover {border-bottom:1px solid {color:highlight};}
  847.  
  848. /*link posts*/
  849. .linkp {
  850. width: 100%;
  851. overflow: hidden;
  852. white-space: nowrap;
  853. text-overflow: ellipsis;
  854. margin-bottom: calc(12px * 0.5);
  855. display:flex;
  856. display:-webkit-flex;
  857. display:-moz-flex;
  858. display:-ms-flex;
  859. align-items:center;
  860. -webkit-align-items:center;
  861. -moz-align-items:center;
  862. -ms-align-items:center;
  863. }
  864.  
  865. .linkp a:after {
  866. content: '';
  867. display: block;
  868. height: 2px;
  869. width: 0;
  870. background: transparent;
  871. transition: width .5s ease, background-color .5s ease;
  872. }
  873.  
  874. .linkp a:hover:after {
  875. width: 100%;
  876. background: {color:accent};
  877. }
  878.  
  879. .linkp > span {
  880. font-size: calc(12px * 1.5);
  881. margin-right: calc(12px);
  882. border-radius: 50%;
  883. background: #fafafa;
  884. padding: 10px;
  885. }
  886.  
  887. .linkp > span > i {color:{color:accent};}
  888.  
  889. /*quotes*/
  890.  
  891. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin-bottom:0;}
  892.  
  893. h1.qshort {line-height:140%;}
  894. h1.qmedium, h1.qlong {line-height:160%;}
  895.  
  896. h1.qmedium {font-size:calc({select:font size} * 1.5);}
  897.  
  898. h1.qlong {font-size:calc({select:font size} * 1.2);}
  899.  
  900. span.qsource {width:100%;padding:{select:font size};display:block;text-align:center;}
  901.  
  902. .divider {margin-top:{select:font size};text-align:center;}
  903.  
  904. .divider::before {
  905. width:20%;
  906. height:1px;
  907. background-color:{color:highlight};
  908. content:"";
  909. display:inline-block;
  910. vertical-align:middle;
  911. }
  912.  
  913. /*lightbox*/
  914. #tumblr_lightbox,.tmblr-lightbox {background:rgba({RGBcolor:lightbox},1)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  915.  
  916.  
  917. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  918. opacity:0;
  919. -webkit-box-shadow:none!important;
  920. box-shadow:none!important;
  921. }
  922.  
  923. #tumblr_lightbox_center_image {
  924. opacity: 1!important;
  925. background-color: #fff!important;
  926. }
  927.  
  928. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  929. -webkit-transition: all 0.3s ease-in-out;
  930. transition:all 0.3s ease-in-out;
  931. }
  932.  
  933. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  934. opacity:1!important;
  935. -webkit-transition: all 0.3s ease-in-out;
  936. transition:all 0.3s ease-in-out;
  937. }
  938.  
  939.  
  940. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  941. box-shadow: 0 0 0 transparent !important;
  942. }
  943.  
  944. #tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  945. border-radius:0!important;
  946. -moz-border-radius: 0!important;
  947. -webkit-border-radius: 0!important;
  948. -o-border-radius: 0!important;
  949. background:#fff !important;
  950. padding:10px !important;
  951. }
  952.  
  953. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  954.  
  955. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  956. .photo-slideshow .count-1 {
  957. margin-bottom:{select:photoset gutter}!important;
  958. }
  959.  
  960.  
  961. .photo-slideshow .count-2 {
  962. margin-left:{select:photoset gutter}!important;
  963. margin-bottom:{select:photoset gutter}!important;
  964. width:calc(50% - ({select:photoset gutter}/2))!important;
  965. }
  966.  
  967. .photo-slideshow .count-2:first-child {
  968. margin-left:0!important;
  969. }
  970.  
  971. .photo-slideshow .count-3 {
  972. margin-left:{select:photoset gutter}!important;
  973. margin-bottom:{select:photoset gutter}!important;
  974. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  975. }
  976.  
  977. .photo-slideshow .count-3:first-child {
  978. margin-left:0!important;
  979. }
  980. .photo-slideshow {
  981. display:block!important;
  982. margin-bottom:calc(-({select:photoset gutter} - 3px));
  983. position:relative;
  984. width:100%;
  985. }
  986.  
  987. .defcap .photo-slideshow.processed {margin-bottom:0!important;}
  988.  
  989. .defcap .row:last-of-type .count-1 {margin-bottom:0!important;}
  990.  
  991. .unnested .photo-slideshow.processed {margin-bottom:calc({select:font size} * (2/3)) !important;}
  992.  
  993. .unnested .photo-slideshow.processed .row:last-of-type .count-1 {margin-bottom:0!important;}
  994.  
  995. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  996.  
  997.  
  998. /*audio posts*/
  999. .flitwick {
  1000. width:100%;
  1001. display:flex;
  1002. display:-webkit-flex;
  1003. display:-moz-flex;
  1004. display:-ms-flex;
  1005. align-items:center;
  1006. -webkit-align-items:center;
  1007. -moz-align-items:center;
  1008. -ms-align-items:center;
  1009. display: -webkit-box;
  1010. -webkit-box-align: center;
  1011. position:relative;
  1012. }
  1013.  
  1014. .unnested .flitwick {margin-bottom:calc({select:font size} * (2/3));}
  1015.  
  1016. .grammy {
  1017. position:relative;
  1018. margin-left:0;
  1019. width:100px;
  1020. height:100px;
  1021. }
  1022.  
  1023. .post250 .grammy,.post300 .grammy, .post350 .grammy {width:70px;height:70px;}
  1024.  
  1025. .mariah {
  1026. position:absolute;
  1027. background:#fff;
  1028. z-index:10;
  1029. opacity:0;
  1030. text-align:center;
  1031. width:80px;
  1032. height:80px;
  1033. margin-top:10px;
  1034. margin-left:10px;
  1035. -webkit-transition: all 0.3s ease-in-out;
  1036. transition:all 0.3s ease-in-out;
  1037. }
  1038.  
  1039. .post250 .mariah,.post300 .mariah, .post350 .mariah {width:50px;height:50px;}
  1040.  
  1041. .mariah:hover {
  1042. opacity:0.8;
  1043. -webkit-transition: all 0.3s ease-in-out;
  1044. transition:all 0.3s ease-in-out;
  1045. }
  1046.  
  1047. .playbox {
  1048. overflow:hidden;
  1049. width:30px;
  1050. height:40px;
  1051. }
  1052.  
  1053. .post250 .playbox,.post300 .playbox, .post350 .playbox {width:25px;height:25px;margin-top:10px;margin-left:10px;}
  1054.  
  1055.  
  1056. .taylor {
  1057. padding:0;
  1058. margin-left:0px;
  1059. background:#fafafa;
  1060. display:flex;
  1061. display:-webkit-flex;
  1062. display:-moz-flex;
  1063. display:-ms-flex;
  1064. align-items:center;
  1065. -webkit-align-items:center;
  1066. -moz-align-items:center;
  1067. -ms-align-items:center;
  1068. justify-content:center;
  1069. -webkit-justify-content:center;
  1070. -moz-justify-content:center;
  1071. -ms-justify-content:center;
  1072. display: -webkit-box;
  1073. -webkit-box-align: center;
  1074. -webkit-box-pack:center;
  1075. width:calc(100% - 100px);
  1076. height:100px;
  1077. }
  1078.  
  1079. .post250 .taylor,.post300 .taylor, .post350 .taylor {width:calc(100% - 70px);height:70px;}
  1080.  
  1081. .swift {
  1082. font-weight:normal;
  1083. text-overflow: ellipsis;
  1084. white-space: nowrap;
  1085. overflow:hidden;
  1086. max-width:calc(100% - 50px);
  1087. line-height:2;
  1088. }
  1089.  
  1090. .post250 .swift,.post300 .swift, .post350 .swift {line-height:1.75;}
  1091.  
  1092.  
  1093.  
  1094. .swift b {
  1095. font-weight:bold;
  1096. }
  1097.  
  1098. /*ask*/
  1099.  
  1100. div.ask_cont {
  1101. padding-bottom:{select:font size};
  1102. margin-bottom:{select:font size};
  1103. border-bottom:1px solid #dfdfdf;
  1104. display:-webkit-box;
  1105. display:-ms-flexbox;
  1106. display:flex;
  1107. -webkit-box-orient: horizontal;
  1108. -webkit-box-direction: normal;
  1109. -ms-flex-direction: row;
  1110. flex-direction: row;
  1111. -ms-flex-wrap: wrap;
  1112. flex-wrap: wrap;
  1113. -webkit-box-pack: justify;
  1114. -ms-flex-pack: justify;
  1115. justify-content: space-between;
  1116. }
  1117.  
  1118. .white_bg div.ask_cont {padding-left:0;padding-right:0;}
  1119.  
  1120. .unnested .ask_cont {margin-bottom:calc({select:font size} * (2/3));}
  1121.  
  1122. .ask_cont .asker_img {
  1123. background:#f5f5f5;
  1124. width:30px;
  1125. height:30px;
  1126. }
  1127.  
  1128. .asker_img img {
  1129. {block:ifnotroundicons}
  1130. border-radius:2px;
  1131. {/block:ifnotroundicons}
  1132.  
  1133. {block:ifroundicons}
  1134. border-radius:50%;
  1135. {/block:ifroundicons}
  1136. }
  1137.  
  1138. div.sender {
  1139. width:calc(100% - 46px);
  1140. }
  1141.  
  1142. .sender a {
  1143. text-transform:uppercase;
  1144. }
  1145.  
  1146. /*controls*/
  1147. .pcontrols {
  1148. position:absolute;
  1149. right:-50px;
  1150. top:0px;
  1151. }
  1152.  
  1153. .pcontrols span {
  1154. width:32px;
  1155. height:32px;
  1156. margin:8px;
  1157. display:block;
  1158. background:#fff;
  1159. border-radius:2px;
  1160. text-align:center;
  1161. line-height:32px;
  1162. font-size:12px;
  1163. position:relative;
  1164. overflow:hidden;
  1165. }
  1166.  
  1167.  
  1168. .like_button {
  1169. position: absolute;
  1170. cursor:pointer;
  1171. top: 0;
  1172. left: 0;
  1173. right: 0;
  1174. bottom: 0;
  1175. width: 100%;
  1176. height: 100%;
  1177. opacity: 0;
  1178. z-index: 3;
  1179. cursor:help;
  1180. }
  1181. /* Force iframe to fill button */
  1182. .like_button iframe {
  1183. width: 100% !important;
  1184. height: 100% !important;
  1185. }
  1186.  
  1187. .likedb {background:#fff;}
  1188.  
  1189. .pcontrols i.fa-heart-o{
  1190. color:{color:links};
  1191. -webkit-transition: all 0.3s ease-in-out;
  1192. transition:all 0.3s ease-in-out;
  1193. }
  1194.  
  1195. .pcontrols span:hover i.fa-heart-o {
  1196. color:{color:highlight};
  1197. -webkit-transition: all 0.3s ease-in-out;
  1198. transition:all 0.3s ease-in-out;
  1199. }
  1200.  
  1201. .like_button.liked + i.fa-heart-o {
  1202. color:{color:highlight}!important;
  1203. }
  1204.  
  1205. .pcontrols span:first-of-type {margin-top:0;}
  1206.  
  1207. /*post info*/
  1208.  
  1209. .p_info {
  1210. width:100%;
  1211. margin-top:calc({select:font size} * 1.5);
  1212. display:flex;
  1213. display:-webkit-flex;
  1214. display:-moz-flex;
  1215. display:-ms-flex;
  1216. align-items:center;
  1217. -webkit-align-items:center;
  1218. -moz-align-items:center;
  1219. -ms-align-items:center;
  1220. justify-content:center;
  1221. -webkit-justify-content:center;
  1222. -moz-justify-content:center;
  1223. -ms-justify-content:center;
  1224. display: -webkit-box;
  1225. -webkit-box-align: center;
  1226. -webkit-box-pack:center;
  1227. }
  1228.  
  1229. .p_obj:first-of-type {margin-left:0;}
  1230. .p_obj {margin-left:calc(1.5 * {select:font size});font-size:96%;}
  1231. .p_obj span {margin-right:calc({select:font size}/3);}
  1232. .p_obj a {text-transform:uppercase;letter-spacing:1.1px;}
  1233.  
  1234. .tags {
  1235. width:100%;
  1236. position:absolute;
  1237. text-align:center;
  1238. top: calc(100% + ({select:font size} * 1.5));
  1239. right:0;
  1240. left:0;
  1241. }
  1242.  
  1243.  
  1244.  
  1245. .tags a {margin-right:10px; word-break: break-all;}
  1246.  
  1247.  
  1248. /*def notes*/
  1249.  
  1250. h1.notehead {font-size:140%;margin:calc({select:font size}) 0 calc({select:font size} * 2) 0;}
  1251.  
  1252. .def_notes h1.notehead {margin-left:calc({select:font size}/3);}
  1253.  
  1254. .def_notes .postnotes ol.notes {list-style:none;margin:0;padding-left:5px;}
  1255.  
  1256. .def_notes .postnotes ol.notes li.note {
  1257. display:flex;
  1258. display:-webkit-flex;
  1259. display:-moz-flex;
  1260. display:-ms-flex;
  1261. align-items:center;
  1262. -webkit-align-items:center;
  1263. -moz-align-items:center;
  1264. -ms-align-items:center;
  1265. margin:16px 0 16px 0;
  1266. }
  1267.  
  1268. .def_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}
  1269.  
  1270. .def_notes .postnotes li.note:last-of-type {margin-bottom:8px;}
  1271.  
  1272. .def_notes .postnotes ol.notes li.note a.avatar_frame {height:48px;margin-right:16px;}
  1273.  
  1274.  
  1275. .def_notes .postnotes ol.notes li.note img.avatar {
  1276. border-radius:5%;
  1277. width:48px;
  1278. height:48px;
  1279. opacity:1;
  1280. -webkit-transition: all 0.3s ease-in-out;
  1281. transition:all 0.3s ease-in-out;
  1282. }
  1283.  
  1284. .def_notes .postnotes ol.notes li.note img.avatar:hover {
  1285. opacity:0.7;
  1286. -webkit-transition: all 0.3s ease-in-out;
  1287. transition:all 0.3s ease-in-out;
  1288. }
  1289.  
  1290. .def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 70px);}
  1291.  
  1292. .def_notes .postnotes li.with_commentary blockquote {
  1293. display:none;
  1294. }
  1295.  
  1296. .def_notes .postnotes ol.notes li.note.more_notes_link_container {background:transparent;margin-top:2em;padding:10px;text-transform:uppercase; letter-spacing:1.2px;line-height:160%;text-align:center;margin-bottom:8px;}
  1297.  
  1298. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a {
  1299. margin:auto;
  1300. cursor:help;
  1301. border-bottom:1px solid #dfdfdf;
  1302. -webkit-transition: all 0.3s ease-in-out;
  1303. transition:all 0.3s ease-in-out;
  1304. }
  1305.  
  1306. .def_notes li.more_notes_link_container a:hover, .grid_notes li.more_notes_link_container a:hover{
  1307. color:{color:highlight};
  1308. border-bottom:1px solid {color:highlight};
  1309. -webkit-transition: all 0.3s ease-in-out;
  1310. transition:all 0.3s ease-in-out;
  1311. }
  1312.  
  1313. /*Grid notes*/
  1314. .grid_notes .postnotes *{ margin:0; padding:0; }
  1315.  
  1316. .grid_notes .postnotes { text-align: center; }
  1317.  
  1318. .grid_notes ol.notes {margin-top:1em;}
  1319.  
  1320. .grid_notes .postnotes li{ list-style-type:none; display:inline-block; width:32px; height:32px; margin:5px; overflow:hidden; }
  1321.  
  1322. .grid_notes .postnotes img{ width:32px; height:32px; border-radius:5%;}
  1323.  
  1324. .grid_notes li.more_notes_link_container{
  1325. width:100%!important;
  1326. }
  1327.  
  1328. /*jump pag*/
  1329. .pg {
  1330. margin: auto;
  1331. text-align:center;
  1332. }
  1333.  
  1334. /*jump pag*/
  1335. .pg {
  1336. margin: 60px auto 60px auto;
  1337. text-align:center;
  1338. }
  1339. .pg * + * {margin:4px;}
  1340.  
  1341. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1342. #leo {
  1343.  
  1344. font-family: Arial, Sans-Serif;
  1345. text-transform:uppercase;
  1346. text-align:center;
  1347. z-index:99;
  1348. box-sizing:content-box;
  1349. -webkit-box-sizing:content-box;
  1350. -moz-box-sizing:content-box;
  1351.  
  1352. }
  1353.  
  1354. #leo a {
  1355. z-index:99;
  1356. position:fixed;
  1357. font-size:12px;
  1358. line-height:16px;
  1359. width:18px;
  1360. height:18px;
  1361. font-weight:300;
  1362. bottom:12px;
  1363. right:5px;
  1364. color:#000;
  1365. background:rgba(255,255,255,0.4);
  1366. padding:5px;
  1367. transition: all 1s ease-in-out;
  1368. -webkit-transition: all 1s ease-in-out;
  1369. -o-transition: all 1s ease-in-out;
  1370. -moz-transition: all 1s ease-in-out;
  1371. box-sizing:content-box;
  1372. -webkit-box-sizing:content-box;
  1373. -moz-box-sizing:content-box;
  1374. }
  1375.  
  1376. #leo a:hover {
  1377. background-color:rgba(0,0,0,1);
  1378. color:#fff;
  1379. border-radius:50%;
  1380. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1381. -moz-animation: hermione 1s;
  1382. -o-animation: hermione 1s;
  1383. animation: hermione 1s;
  1384. animation-timing-function: ease-in-out;
  1385. -webkit-animation-timing-function: ease-in-out;
  1386. -moz-animation-timing-function: ease-in-out;
  1387. -o-animation-timing-function: ease-in-out;
  1388.  
  1389. -moz-transform: rotate(720deg); /* IE 9 */
  1390. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1391. transform: rotate(720deg);
  1392.  
  1393. transition: all 1s ease-in-out;
  1394. -webkit-transition: all 1s ease-in-out;
  1395. -o-transition: all 1s ease-in-out;
  1396. -moz-transition: all 1s ease-in-out;
  1397.  
  1398.  
  1399. }
  1400.  
  1401. @-webkit-keyframes hermione {
  1402. 0% {color:#000;}
  1403. 25% {color:#ACE4EA;}
  1404. 50% {color:#FFFBDD;}
  1405. 75% {color:#ACE4EA;}
  1406. 100% {color:#fff;}
  1407. }
  1408. @-moz-keyframes hermione {
  1409. 0% {color:#000;}
  1410. 25% {color:#ACE4EA;}
  1411. 50% {color:#FFFBDD;}
  1412. 75% {color:#ACE4EA;}
  1413. 100% {color:#fff;}
  1414. }
  1415. @-o-keyframes hermione {
  1416. 0% {color:#000;}
  1417. 25% {color:#ACE4EA;}
  1418. 50% {color:#FFFBDD;}
  1419. 75% {color:#ACE4EA;}
  1420. 100% {color:#fff;}
  1421. }
  1422.  
  1423. @keyframes hermione {
  1424. 0% {color:#000;}
  1425. 25% {color:#ACE4EA;}
  1426. 50% {color:#FFFBDD;}
  1427. 75% {color:#ACE4EA;}
  1428. 100% {color:#fff;}
  1429. }
  1430. /*END OF CREDIT*/
  1431.  
  1432. </style>
  1433. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  1434. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1435. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1436.  
  1437. <script>
  1438. $(document).ready(function() {
  1439.  
  1440. $('.photo-slideshow').pxuPhotoset({
  1441. lightbox: true,
  1442. rounded: false,
  1443. gutter: '0px',
  1444. borderRadius: '0px',
  1445. photoset: '.photo-slideshow',
  1446. photoWrap: '.photo-data',
  1447. photo: '.pxu-photo'
  1448. });
  1449.  
  1450. });
  1451.  
  1452. </script>
  1453.  
  1454. <script type="text/javascript">
  1455. $(document).ready(function(){
  1456.  
  1457. $(function () {
  1458.  
  1459. $(".totop").click(function(){
  1460. $('body,html').animate({scrollTop:0},600);
  1461. return false;
  1462.  
  1463. });
  1464. });
  1465. });
  1466. </script>
  1467.  
  1468.  
  1469. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1470.  
  1471. <script>
  1472.  
  1473. $(function(){ $('.unnested .posts').unnest({
  1474. yourCaption: ".captions", //your caption selector, the div wrapping
  1475. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1476. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1477. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1478. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1479. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1480. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1481. }); });
  1482.  
  1483. </script>
  1484.  
  1485.  
  1486. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1487.  
  1488.  
  1489.  
  1490. {block:indexpage}
  1491.  
  1492. <script type="text/javascript">
  1493. $(function() {
  1494.  
  1495. var $container = $('#wrap'),
  1496. $articles = $container.children('.posts'),
  1497. timeout;
  1498.  
  1499. $articles.on( 'mouseenter', function( event ) {
  1500.  
  1501. var $article = $(this);
  1502. clearTimeout( timeout );
  1503. timeout = setTimeout( function() {
  1504.  
  1505. if( $article.hasClass('active') ) return false;
  1506.  
  1507. $articles.not( $article.removeClass('blur').addClass('active') )
  1508. .removeClass('active')
  1509. .addClass('blur');
  1510.  
  1511. }, 65 );
  1512.  
  1513. });
  1514.  
  1515. $container.on( 'mouseleave', function( event ) {
  1516.  
  1517. clearTimeout( timeout );
  1518. $articles.removeClass('active blur');
  1519.  
  1520. });
  1521.  
  1522. });
  1523. </script>
  1524.  
  1525. <script type="text/javascript" src="https://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  1526.  
  1527. {/block:indexpage}
  1528. </head>
  1529. <body class="{select:background} {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display} {block:ifnothasheader}noheader{/block:ifnothasheader} {block:ifhasheader}hasheader{/block:ifhasheader}">
  1530. <header class="topbar">
  1531. <h1 class="blogtitle">
  1532. <img src="{image:header}" class="headico">
  1533. <a href="/"class="a-link">{Title}</a></h1>
  1534.  
  1535. <h1 class="scrolledtitle">
  1536. {block:ifheaderimage}
  1537. <img src="{image:header}" class="prof">
  1538. {/block:ifheaderimage}
  1539. <a href="/"class="a-link">{Title}</a></h1>
  1540.  
  1541. <nav class="navigation">
  1542. {block:AskEnabled}
  1543. <a id="msgpop">Ask</a>
  1544. {/block:AskEnabled}
  1545. <a id="infopop">Info</a>
  1546. <a id="navipop">Links</a>
  1547. <a class="totop">Top</a>
  1548. </nav>
  1549. </header>
  1550. <main>
  1551. <section class="wrap" id="wrap">
  1552. {block:posts}
  1553. <article class="posts"id="{PostID}">
  1554. {block:permalinkpage}
  1555. <!--Date / controls-->
  1556. {block:date}
  1557. <div class="pcontrols">
  1558. <span><a href="{ReblogURL}"><i class="fa fa-refresh" aria-hidden="true"></i></a></span>
  1559. <span>
  1560. {LikeButton size="12"}
  1561. <i class="fa fa-heart-o" aria-hidden="true"></i></span>
  1562. </div>
  1563. {/block:date}
  1564. <!--Date / controls-->
  1565. {/block:permalinkpage}
  1566.  
  1567.  
  1568. <!--Text-->
  1569. {block:Text}
  1570. {block:Title}<h1>{Title}</h1>{/block:Title}
  1571. <div class="captions">
  1572. {Body}
  1573. </div>
  1574. {/block:Text}
  1575. <!--Text-->
  1576.  
  1577. <!--Quote-->
  1578. {block:Quote}
  1579. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  1580.  
  1581. {block:Source}
  1582. <div class="divider"></div>
  1583. <span class="qsource">{Source}</span>{/block:Source}
  1584. {/block:Quote}
  1585. <!--Quote->
  1586.  
  1587. <!--Photo posts-->
  1588. {block:Photo}
  1589. {LinkOpenTag}
  1590. <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">
  1591. <img class="photop" src="{PhotoURL-500}" width="100%" height="auto">
  1592. </a>
  1593. {LinkCloseTag}
  1594.  
  1595. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1596.  
  1597. {/block:Photo}
  1598. <!--Photo posts-->
  1599.  
  1600. <!--Photoset-->
  1601. {block:Photoset}
  1602. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1603.  
  1604. {block:Photos}
  1605. <div class="photo-data">
  1606. <div class="pxu-photo">
  1607. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1608. </div>
  1609. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1610. </div>
  1611. {/block:Photos}
  1612.  
  1613. </div>
  1614.  
  1615. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1616. {/block:Photoset}
  1617. <!--Photoset-->
  1618.  
  1619. <!--Audio-->
  1620. {block:Audio}
  1621. <div class="flitwick">
  1622.  
  1623. <div class="mariah">
  1624. <div class="playbox">{AudioPlayerWhite}</div>
  1625. </div>
  1626.  
  1627. <div class="grammy">
  1628. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1629. {block:AlbumArt}
  1630. <img src="{AlbumArtURL}" style="position:absolute;">
  1631. {/block:AlbumArt}
  1632. </div>
  1633.  
  1634.  
  1635. <div class="taylor">
  1636. <div class="swift">
  1637. {block:TrackName}
  1638. <b>Song:</b> {TrackName}
  1639. {/block:TrackName}<br>
  1640.  
  1641. {block:Artist}
  1642. <b>Artist:</b> {Artist}
  1643. {/block:Artist}<br>
  1644.  
  1645. {block:Album}
  1646. <b>Album:</b> {Album}
  1647. {/block:Album}
  1648.  
  1649. </div>
  1650. </div>
  1651.  
  1652. </div>
  1653. {block:Caption}
  1654. <div class="captions">{Caption}</div>
  1655. {/block:Caption}
  1656. {/block:Audio}
  1657. <!--Audio-->
  1658.  
  1659. <!--Video-->
  1660. {block:Video}
  1661. {Video-500}
  1662. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1663. {/block:Video}
  1664. <!--Video-->
  1665.  
  1666.  
  1667. <!--Chat-->
  1668. {block:Chat}
  1669. {block:Title}<h1>{Title}</h1>{/block:Title}
  1670. <div class="captions">
  1671. {block:Lines}<p>
  1672. {block:Label}<b>{Label}</b>{/block:Label} {Line}
  1673. </p>{/block:Lines}
  1674. </div>
  1675. {/block:Chat}
  1676. <!--Chat-->
  1677.  
  1678. <!--Link-->
  1679. {block:Link}
  1680. <div class="linkp">
  1681. <span><i class="fa fa-link" aria-hidden="true"></i></span>
  1682. <a href="{URL}"><h1>{Name}</h1></a></div>
  1683. {block:Description}
  1684. <div class="captions">
  1685. {Description}
  1686. </div>
  1687. {/block:Description}
  1688. {/block:Link}
  1689. <!--Link-->
  1690.  
  1691. <!--Answer-->
  1692. {block:Answer}
  1693. <div class="ask_cont">
  1694. <div class="asker_img">
  1695. <img src="{AskerPortraitURL-40}">
  1696. </div>
  1697. <div class="sender">{Asker}: {Question}</div>
  1698. </div>
  1699.  
  1700. <div class="captions">
  1701. {Answer}
  1702. </div>
  1703. {/block:Answer}
  1704. <!--Answer-->
  1705.  
  1706. {block:date}
  1707. <div class="p_info">
  1708. <div class="p_obj">
  1709. <span><i class="fa fa-clock-o" aria-hidden="true"></i></span>
  1710. <a title="{TimeAgo}" href="{Permalink}">{ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a>
  1711. </div>
  1712. {block:NoteCount}
  1713. <div class="p_obj">
  1714. <span><i class="fa fa-heart-o" aria-hidden="true"></i></span>
  1715. <a href="{Permalink}">{NoteCount}</a>
  1716. </div>
  1717. {/block:NoteCount}
  1718.  
  1719. {block:RebloggedFrom}
  1720. <div class="p_obj">
  1721. <a href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
  1722. {block:ContentSource}
  1723. / <a href="{SourceURL}" title="{ReblogRootName}" target="_blank">src</a>
  1724. {/block:ContentSource}
  1725. </div>
  1726. {/block:RebloggedFrom}
  1727.  
  1728.  
  1729. </div>
  1730. {/block:date}
  1731.  
  1732. {block:permalinkpage}
  1733. {block:HasTags}
  1734. <div class="tags">
  1735. {block:Tags}
  1736. <a href="{TagURL}">#{Tag}</a>
  1737. {/block:Tags}
  1738. </div>
  1739. {/block:HasTags}
  1740. {/block:permalinkpage}
  1741.  
  1742. <!-- {block:NoRebloggedFrom}
  1743. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1744. {/block:NoRebloggedFrom} -->
  1745.  
  1746. {block:ContentSource}<!-- {SourceURL}
  1747. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1748. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1749. {/block:ContentSource}
  1750.  
  1751. </article>
  1752.  
  1753. {block:permalinkpage}
  1754. {block:NoteCount}
  1755. <article class="posts postnotes">
  1756. <h1 class="notehead">{NoteCountWithLabel}</h1>
  1757. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  1758. </article>
  1759. {/block:NoteCount}
  1760. {/block:permalinkpage}
  1761.  
  1762. {/block:posts}
  1763. </section>
  1764.  
  1765. {block:Pagination}
  1766. {block:IndexPage}
  1767. <!--PAGINATION-->
  1768. <div class="pg">
  1769. {block:PreviousPage}
  1770. <a href="{PreviousPage}">&laquo;</a>
  1771. {/block:PreviousPage}
  1772.  
  1773. {block:JumpPagination length="5"}
  1774.  
  1775. {block:CurrentPage}
  1776. <span class="currentpg">{PageNumber}</span>
  1777. {/block:CurrentPage}
  1778.  
  1779. {block:JumpPage}
  1780. <a href="{URL}">{PageNumber}</a>
  1781. {/block:JumpPage}
  1782.  
  1783. {/block:JumpPagination}
  1784.  
  1785.  
  1786. {block:NextPage}
  1787. <a class="nxtpg" href="{NextPage}">&raquo;</a>
  1788. {/block:NextPage}
  1789. </div>
  1790. {/block:IndexPage}
  1791. {/block:Pagination}
  1792.  
  1793. </main>
  1794.  
  1795. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1796. <div id="leo">
  1797. <a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
  1798. </div>
  1799. <!--END OF CREDIT-->
  1800.  
  1801. {block:AskEnabled}
  1802. <div class="overlay overlay-simplegenie msgoverlay">
  1803.  
  1804. <a class="overlay-close msgclose">
  1805. <svg class="lnr lnr-cross"><use xlink:href="#lnr-cross">
  1806. <symbol id="lnr-cross" viewBox="0 0 1024 1024"><path class="path1" d="M548.203 537.6l289.099-289.098c9.998-9.998 9.998-26.206 0-36.205-9.997-9.997-26.206-9.997-36.203 0l-289.099 289.099-289.098-289.099c-9.998-9.997-26.206-9.997-36.205 0-9.997 9.998-9.997 26.206 0 36.205l289.099 289.098-289.099 289.099c-9.997 9.997-9.997 26.206 0 36.203 5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.102-7.499l289.098-289.098 289.099 289.099c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499c9.998-9.997 9.998-26.206 0-36.203l-289.098-289.098z"></path></symbol>
  1807. </use></svg>
  1808. </a>
  1809. <nav>
  1810. <h1>{AskLabel}</h1>
  1811. <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="ask_form"></iframe>
  1812. </nav>
  1813. </div>
  1814. {/block:AskEnabled}
  1815.  
  1816.  
  1817. <div class="overlay overlay-simplegenie infooverlay">
  1818.  
  1819. <a class="overlay-close infoclose">
  1820. <svg class="lnr lnr-cross"><use xlink:href="#lnr-cross">
  1821. <symbol id="lnr-cross" viewBox="0 0 1024 1024"><path class="path1" d="M548.203 537.6l289.099-289.098c9.998-9.998 9.998-26.206 0-36.205-9.997-9.997-26.206-9.997-36.203 0l-289.099 289.099-289.098-289.099c-9.998-9.997-26.206-9.997-36.205 0-9.997 9.998-9.997 26.206 0 36.205l289.099 289.098-289.099 289.099c-9.997 9.997-9.997 26.206 0 36.203 5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.102-7.499l289.098-289.098 289.099 289.099c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499c9.998-9.997 9.998-26.206 0-36.203l-289.098-289.098z"></path></symbol>
  1822. </use></svg>
  1823. </a>
  1824. <nav>
  1825. <h1>{text:basic info}</h1>
  1826. <div id="overlayinfo">
  1827. <div id="abtblurb">
  1828. <img src="{image:info}">
  1829. <div id="abtdesc">
  1830. <ul>
  1831. <!--Write something here.
  1832. To add another bullet point, simply add another <li></li>
  1833. -->
  1834. <li>Write</li>
  1835. <li>Some</li>
  1836. <li>Things</li>
  1837. <li>Here</li>
  1838. <!--To here-->
  1839. </ul>
  1840. </div>
  1841. </div>
  1842. <div id="abttxt">
  1843. <!--Edit info here-->
  1844.  
  1845. <b>Bold.</b>
  1846.  
  1847. <i>Italic.</i>
  1848.  
  1849. <strike>Strike.</strike>
  1850.  
  1851. <u>Underline.</u> Line break.<br>
  1852.  
  1853. <p>
  1854. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1855. </p>
  1856.  
  1857. <blockquote>This is a blockquote</blockquote>
  1858.  
  1859. <p>This is a new paragraph</p>
  1860.  
  1861. <!--to here-->
  1862. </div>
  1863. </div>
  1864. </nav>
  1865. </div>
  1866.  
  1867.  
  1868.  
  1869. <div class="overlay overlay-simplegenie navioverlay">
  1870. <a class="overlay-close naviclose">
  1871. <svg class="lnr lnr-cross"><use xlink:href="#lnr-cross">
  1872. <symbol id="lnr-cross" viewBox="0 0 1024 1024"><path class="path1" d="M548.203 537.6l289.099-289.098c9.998-9.998 9.998-26.206 0-36.205-9.997-9.997-26.206-9.997-36.203 0l-289.099 289.099-289.098-289.099c-9.998-9.997-26.206-9.997-36.205 0-9.997 9.998-9.997 26.206 0 36.205l289.099 289.098-289.099 289.099c-9.997 9.997-9.997 26.206 0 36.203 5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.102-7.499l289.098-289.098 289.099 289.099c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499c9.998-9.997 9.998-26.206 0-36.203l-289.098-289.098z"></path></symbol>
  1873. </use></svg>
  1874. </a>
  1875. <nav>
  1876. <h1>Explore</h1>
  1877. <div id="custlinks">
  1878. <a href="{text:Link1 URL}">{text:Link1}</a>
  1879. <a href="{text:Link2 URL}">{text:Link2}</a>
  1880. <a href="{text:Link3 URL}">{text:Link3}</a>
  1881. <a href="{text:Link4 URL}">{text:Link4}</a>
  1882. <a href="{text:Link5 URL}">{text:Link5}</a>
  1883. <a href="{text:Link6 URL}">{text:Link6}</a>
  1884. <a href="{text:Link7 URL}">{text:Link7}</a>
  1885. <a href="{text:Link8 URL}">{text:Link8}</a>
  1886. <a href="{text:Link9 URL}">{text:Link9}</a>
  1887. </div>
  1888. </nav>
  1889. </div>
  1890.  
  1891. <script src="https://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  1892. <script>
  1893. var cbpAnimatedHeader=(function(){
  1894.  
  1895. var b=document.documentElement,g=document.querySelector("header"),
  1896. e=false,a=50;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"scrolled")}else{classie.remove(g,"scrolled")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();
  1897. </script>
  1898.  
  1899.  
  1900. {block:AskEnabled}
  1901. <script>
  1902. (function() {
  1903. var triggerBttn = document.getElementById( 'msgpop' ),
  1904. overlay = document.querySelector( '.msgoverlay' ),
  1905. closeBttn = overlay.querySelector( '.msgclose' );
  1906. transEndEventNames = {
  1907. 'WebkitTransition': 'webkitTransitionEnd',
  1908. 'MozTransition': 'transitionend',
  1909. 'OTransition': 'oTransitionEnd',
  1910. 'msTransition': 'MSTransitionEnd',
  1911. 'transition': 'transitionend'
  1912. },
  1913. transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  1914. support = { transitions : Modernizr.csstransitions };
  1915.  
  1916. function toggleOverlay() {
  1917. if( classie.has( overlay, 'open' ) ) {
  1918. classie.remove( overlay, 'open' );
  1919. classie.add( overlay, 'close' );
  1920. var onEndTransitionFn = function( ev ) {
  1921. if( support.transitions ) {
  1922. if( ev.propertyName !== 'visibility' ) return;
  1923. this.removeEventListener( transEndEventName, onEndTransitionFn );
  1924. }
  1925. classie.remove( overlay, 'close' );
  1926. };
  1927. if( support.transitions ) {
  1928. overlay.addEventListener( transEndEventName, onEndTransitionFn );
  1929. }
  1930. else {
  1931. onEndTransitionFn();
  1932. }
  1933. }
  1934. else if( !classie.has( overlay, 'close' ) ) {
  1935. classie.add( overlay, 'open' );
  1936. }
  1937. }
  1938.  
  1939. triggerBttn.addEventListener( 'click', toggleOverlay );
  1940. closeBttn.addEventListener( 'click', toggleOverlay );
  1941. })();
  1942. </script>
  1943. {/block:AskEnabled}
  1944.  
  1945.  
  1946. <script>
  1947. (function() {
  1948. var triggerBttn = document.getElementById( 'infopop' ),
  1949. overlay = document.querySelector( '.infooverlay' ),
  1950. closeBttn = overlay.querySelector( '.infoclose' );
  1951. transEndEventNames = {
  1952. 'WebkitTransition': 'webkitTransitionEnd',
  1953. 'MozTransition': 'transitionend',
  1954. 'OTransition': 'oTransitionEnd',
  1955. 'msTransition': 'MSTransitionEnd',
  1956. 'transition': 'transitionend'
  1957. },
  1958. transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  1959. support = { transitions : Modernizr.csstransitions };
  1960.  
  1961. function toggleOverlay() {
  1962. if( classie.has( overlay, 'open' ) ) {
  1963. classie.remove( overlay, 'open' );
  1964. classie.add( overlay, 'close' );
  1965. var onEndTransitionFn = function( ev ) {
  1966. if( support.transitions ) {
  1967. if( ev.propertyName !== 'visibility' ) return;
  1968. this.removeEventListener( transEndEventName, onEndTransitionFn );
  1969. }
  1970. classie.remove( overlay, 'close' );
  1971. };
  1972. if( support.transitions ) {
  1973. overlay.addEventListener( transEndEventName, onEndTransitionFn );
  1974. }
  1975. else {
  1976. onEndTransitionFn();
  1977. }
  1978. }
  1979. else if( !classie.has( overlay, 'close' ) ) {
  1980. classie.add( overlay, 'open' );
  1981. }
  1982. }
  1983.  
  1984. triggerBttn.addEventListener( 'click', toggleOverlay );
  1985. closeBttn.addEventListener( 'click', toggleOverlay );
  1986. })();
  1987. </script>
  1988.  
  1989.  
  1990. <script>
  1991. (function() {
  1992. var triggerBttn = document.getElementById( 'navipop' ),
  1993. overlay = document.querySelector( '.navioverlay' ),
  1994. closeBttn = overlay.querySelector( '.naviclose' );
  1995. transEndEventNames = {
  1996. 'WebkitTransition': 'webkitTransitionEnd',
  1997. 'MozTransition': 'transitionend',
  1998. 'OTransition': 'oTransitionEnd',
  1999. 'msTransition': 'MSTransitionEnd',
  2000. 'transition': 'transitionend'
  2001. },
  2002. transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  2003. support = { transitions : Modernizr.csstransitions };
  2004.  
  2005. function toggleOverlay() {
  2006. if( classie.has( overlay, 'open' ) ) {
  2007. classie.remove( overlay, 'open' );
  2008. classie.add( overlay, 'close' );
  2009. var onEndTransitionFn = function( ev ) {
  2010. if( support.transitions ) {
  2011. if( ev.propertyName !== 'visibility' ) return;
  2012. this.removeEventListener( transEndEventName, onEndTransitionFn );
  2013. }
  2014. classie.remove( overlay, 'close' );
  2015. };
  2016. if( support.transitions ) {
  2017. overlay.addEventListener( transEndEventName, onEndTransitionFn );
  2018. }
  2019. else {
  2020. onEndTransitionFn();
  2021. }
  2022. }
  2023. else if( !classie.has( overlay, 'close' ) ) {
  2024. classie.add( overlay, 'open' );
  2025. }
  2026. }
  2027.  
  2028. triggerBttn.addEventListener( 'click', toggleOverlay );
  2029. closeBttn.addEventListener( 'click', toggleOverlay );
  2030. })();
  2031. </script>
  2032.  
  2033. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  2034. <script>
  2035. jQuery.noConflict();
  2036. (function($){
  2037.  
  2038. $(document).ready(function(){
  2039.  
  2040. {block:indexpage}
  2041. var $wall = $('.wrap');
  2042. $wall.imagesLoaded(function(){
  2043. $wall.masonry({
  2044. itemSelector: '.posts',
  2045. isAnimated : true
  2046. });
  2047. });
  2048. {/block:indexpage}
  2049. $("a[title],img[title],[title]").style_my_tooltips({
  2050.  
  2051. tip_follows_cursor:true,
  2052.  
  2053. tip_delay_time:30,
  2054.  
  2055. tip_fade_speed:300,
  2056.  
  2057. attribute:"title"
  2058.  
  2059. });
  2060.  
  2061. });
  2062.  
  2063. })(jQuery);
  2064. </script>
  2065. <!--Tooltips-->
  2066.  
  2067. </body>
  2068. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!