API tools faq
paste
Advertisement
hermionemessi

Theme 02 v2 (revamp)

hermionemessi
Jul 2nd, 2016
952
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4.  
  5. THEME #2 Reflection v2 (Revamp) by hermionegrangcr
  6.  
  7. THEME BLOG: grangersdesigns
  8.  
  9.  
  10. ♛ ♛ ♛
  11. ♛♛♛ ♛♛♛ ♛♛♛
  12. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  13. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  16.  
  17.  
  18. Important:
  19.  
  20. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  21.  
  22. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  23.  
  24. ♚ Tweak this to your preference as long as the credits remain intact.
  25.  
  26. ♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
  27.  
  28. -->
  29. <head>
  30. <meta charset="UTF-8" />
  31. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  32. <meta name="viewport" content="width=device-width, initial-scale=1">
  33. <link rel="shortcut icon" href="{Favicon}">
  34. <title>{Title}</title>
  35.  
  36. {Block:Description}
  37. <meta name="description" content="{MetaDescription}" />
  38. {/Block:Description}
  39.  
  40.  
  41. <meta name="if:inverted controls" content="1">
  42. <meta name="if:show tags" content="1">
  43. <meta name="if:infinite scroll" content="">
  44. <meta name="if: manual load" content="">
  45.  
  46.  
  47. <meta name="select:bg"content="simple_bg"title="Simple">
  48. <meta name="select:bg"content="gradient_bg"title="Gradient">
  49. <meta name="select:bg"content="image_bg"title="Image">
  50. <meta name="select:bg"content="grid_bg"title="Grid">
  51. <meta name="select:bg"content="white_bg"title="White">
  52. <meta name="select:bg"content="colour_bg"title="Colour">
  53.  
  54.  
  55. <meta name="select:post width"content="post500"title="500px"/>
  56. <meta name="select:post width"content="post450"title="450px"/>
  57. <meta name="select:post width"content="post400"title="400px"/>
  58. <meta name="select:post width"content="post350"title="350px"/>
  59. <meta name="select:post width"content="post300"title="300px"/>
  60. <meta name="select:post width"content="post250"title="250px"/>
  61.  
  62. <meta name="select:photoset gutter"content="5px"title="5px">
  63. <meta name="select:photoset gutter"content="10px"title="10px">
  64. <meta name="select:photoset gutter"content="2px"title="2px">
  65. <meta name="select:photoset gutter"content="1px"title="1px">
  66. <meta name="select:photoset gutter"content="0px"title="0px">
  67.  
  68.  
  69. <meta name="color:text" content="#000">
  70. <meta name="color:accent" content="#000">
  71. <meta name="color:highlight" content="#FEFEA4">
  72. <meta name="color:lightbox" content="#fff">
  73. <meta name="color:links" content="#ababab">
  74. <meta name="color:background" content="#fafafa">
  75. <meta name="color:grad1" content="#ababab">
  76. <meta name="color:grad2" content="#fafafa">
  77.  
  78. <meta name="text:info" content="Name, Age, MBTI">
  79. <meta name="text:updates" content="Write your updates here">
  80.  
  81. <meta name="text:Link1" content="Link1">
  82. <meta name="text:link1 URL" content="/">
  83. <meta name="text:Link2" content="Link2">
  84. <meta name="text:link2 URL" content="/">
  85. <meta name="text:Link3" content="Link3">
  86. <meta name="text:link3 URL" content="/">
  87. <meta name="text:Link4" content="Link4">
  88. <meta name="text:link4 URL" content="/">
  89. <meta name="text:Link5" content="Link5">
  90. <meta name="text:link5 URL" content="/">
  91. <meta name="text:Link6" content="Link6">
  92. <meta name="text:link6 URL" content="/">
  93. <meta name="text:Link7" content="Link7">
  94. <meta name="text:link7 URL" content="/">
  95. <meta name="text:Link8" content="Link8">
  96. <meta name="text:link8 URL" content="/">
  97. <meta name="text:Link9" content="Link9">
  98. <meta name="text:link9 URL" content="/">
  99.  
  100. <meta name="image:fullscreen bg" content="https://static.tumblr.com/a9986351fcfa95c8483ef6d67bbbdae6/xbvpdcx/Zi2ntp45i/tumblr_static_5e2qtth58jokow4wo8448cwcs.jpg">
  101. <meta name="image:grid bg" content="https://41.media.tumblr.com/bf8dfe2e6ff97f506306344fe021504e/tumblr_ndpupoDTro1rnmh3no2_250.png">
  102.  
  103. <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  104. <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
  105. <link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
  106.  
  107. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  108.  
  109. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  110. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  111.  
  112. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  113. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  114.  
  115. <script>
  116. $(document).ready(function() {
  117. $(".animsition").animsition({
  118. inClass: 'fade-in',
  119. outClass: 'fade-out',
  120. inDuration: 1500,
  121. outDuration: 800,
  122. linkElement: '.a-link',
  123. // e.g. linkElement: 'a:not([target="_blank"]):not([href^=#])'
  124. loading: true,
  125. loadingParentElement: 'body', //animsition wrapper element
  126. loadingClass: 'animsition-loading',
  127. loadingInner: '', // e.g '<img src="loading.svg" />'
  128. timeout: true,
  129. timeoutCountdown: 200,
  130. onLoadEvent: true,
  131. browser: [ 'animation-duration', '-webkit-animation-duration'],
  132. overlay : false,
  133. overlayClass : 'animsition-overlay-slide',
  134. overlayParentElement : 'body',
  135. transition: function(url){ window.location.href = url; }
  136. });
  137.  
  138. $('.photo-slideshow').pxuPhotoset({
  139. lightbox: true,
  140. rounded: false,
  141. gutter: '0px',
  142. borderRadius: '0px',
  143. photoset: '.photo-slideshow',
  144. photoWrap: '.photo-data',
  145. photo: '.pxu-photo'
  146. });
  147.  
  148. $(function() {
  149. $('.captions a').addClass('a-link');
  150. });
  151.  
  152. });
  153. </script>
  154.  
  155. <style type="text/css">
  156.  
  157. .animsition-loading {display:none;}
  158.  
  159. .tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {z-index:11!important;}
  160.  
  161. {block:ifinvertedcontrols}
  162. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop, #tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);}
  163.  
  164. {/block:ifinvertedcontrols}
  165.  
  166. #tumblr_teaser_follow,.tmblr-iframe--follow-teaser {z-index:8!important;}
  167.  
  168. ::selection {background:{color:highlight}; color:#000;}
  169. ::-moz-selection {background:{color:highlight};color:#000;}
  170. ::-webkit-selection {background:{color:highlight};color:#000;}
  171.  
  172. ::-webkit-scrollbar {
  173. width:2px;
  174. background:transparent;
  175. }
  176.  
  177. ::-webkit-scrollbar:horizontal {display:none;}
  178.  
  179. ::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  180.  
  181. /*Tooltip*/
  182. #s-m-t-tooltip{
  183. position:absolute;
  184. margin-top: -15px !important;
  185. z-index:9999;
  186. padding:5px;
  187. color:#fff;
  188. background:{color:accent};
  189. font-size:12px;
  190.  
  191. }
  192.  
  193. *,
  194. *::before,
  195. *::after {
  196. box-sizing: inherit;
  197. -webkit-box-sizing: inherit;
  198. -moz-box-sizing: inherit;
  199. }
  200.  
  201. html {
  202. box-sizing: border-box;
  203. -webkit-box-sizing: border-box;
  204. -moz-box-sizing: border-box;
  205. }
  206.  
  207. html, body {height:100%;}
  208.  
  209. body {
  210. font-family:'karla',arial,sans-serif;
  211. overflow:hidden;
  212. margin:0;
  213. font-size:12px;
  214. line-height:160%;
  215. background-attachment:fixed;
  216. -webkit-font-smoothing: antialiased;
  217. -moz-osx-font-smoothing: grayscale;
  218. }
  219.  
  220. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  221. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  222. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  223. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  224.  
  225. body.post400, body.post350 {line-height:150%;}
  226.  
  227. body.post300, body.post250 {font-size:10px;line-height:140%;}
  228.  
  229. a {
  230. color:{color:links};
  231. text-decoration:none;
  232. cursor:crosshair;
  233. transition: all 0.3s ease-in-out;
  234. -webkit-transition: all 0.3s ease-in-out;
  235. -moz-transition: all 0.3s ease-in-out;
  236. -o-transition: all 0.3s ease-in-out;
  237. }
  238.  
  239. a:hover {
  240. color:{color:highlight};
  241. transition: all 0.3s ease-in-out;
  242. -webkit-transition: all 0.3s ease-in-out;
  243. -moz-transition: all 0.3s ease-in-out;
  244. -o-transition: all 0.3s ease-in-out;
  245. }
  246.  
  247. a:focus, a:active {color:{color:highlight};}
  248.  
  249. b, strong {font-weight:bold;}
  250. i, em {font-style:italic;}
  251.  
  252. pre {
  253. white-space: pre-wrap;
  254. white-space: -moz-pre-wrap;
  255. white-space: -pre-wrap;
  256. white-space: -o-pre-wrap;
  257. word-wrap: break-word;
  258. background:#fafafa;
  259. padding:5px;
  260. }
  261.  
  262. blockquote {
  263. border-left: 1px #eaeaea solid;
  264. padding-left: 10px;
  265. margin-left: 10px;
  266. max-width: 100%;
  267. margin:0;
  268. }
  269.  
  270.  
  271. blockquote blockquote {
  272. border:none;
  273. padding: 0;
  274. margin: 0;
  275.  
  276. }
  277.  
  278. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  279.  
  280. /*bg options*/
  281. .gradient_bg {
  282. background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  283. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  284. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  285. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  286. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  287.  
  288. }
  289.  
  290. .image_bg {
  291. background-image: url('{image:fullscreen bg}');
  292. background-repeat: no-repeat;
  293. background-attachment: fixed;
  294. background-position: center;
  295. background-size:cover;
  296. }
  297.  
  298. .simple_bg {
  299. background:#efefef;
  300. }
  301.  
  302. .white_bg {background:#fff;}
  303.  
  304. .colour_bg {
  305. background:{color:background};
  306. }
  307.  
  308. .grid_bg {
  309. background:url('{image:grid bg}');
  310. }
  311.  
  312. /*cont*/
  313.  
  314. #cont {
  315.  
  316. width:500px;
  317. position:relative;
  318. margin:2% auto;
  319. height:90%;
  320.  
  321. }
  322.  
  323. .post500 #cont, .post450 #cont {width:600px;}
  324.  
  325. /* Top Menu */
  326.  
  327. .oe_wrapper *{
  328. margin:0;
  329. padding:0;
  330. box-sizing:content-box;
  331. -webkit-box-sizing:content-box;
  332. -moz-box-sizing:content-box;
  333. }
  334.  
  335. .oe_overlay{
  336. background:{color:accent};
  337. opacity:0;
  338. position:fixed;
  339. top:0px;
  340. left:0px;
  341. width:100%;
  342. height:100%;
  343. }
  344.  
  345. ul.oe_menu{
  346. list-style:none;
  347. position:absolute;
  348. margin:-1px auto;
  349. z-index:100 !important;
  350. width:500px;
  351. float:left;
  352. clear:both;
  353. }
  354.  
  355. .post500 ul.oe_menu, .post450 ul.oe_menu {width:600px;}
  356.  
  357. ul.oe_menu > li{
  358. width:100px;
  359. height:90px;
  360. padding-bottom:2px;
  361. float:left;
  362. position:relative;
  363.  
  364. }
  365.  
  366. .post500 ul.oe_menu > li, .post450 ul.oe_menu > li {width:120px;}
  367.  
  368. ul.oe_menu > li > a{
  369. display:block;
  370. background-color:{color:accent};
  371. color:#bababa;
  372. text-decoration:none;
  373. text-transform:uppercase;
  374. font-family:'Roboto', Arial, Sans-Serif;
  375. font-weight:bold;
  376. font-size:14px;
  377. letter-spacing:1.5px;
  378. width:78px;
  379. line-height:100%;
  380. height:60px;
  381. padding:10px;
  382. margin:1px;
  383. text-shadow:0px 0px 1px #000;
  384. opacity:0.8;
  385. white-space:nowrap;
  386. overflow:hidden;
  387. text-overflow: ellipsis;
  388. transition: all 0.3s ease-in-out;
  389. -webkit-transition: all 0.3s ease-in-out;
  390. -moz-transition: all 0.3s ease-in-out;
  391. -o-transition: all 0.3s ease-in-out;
  392. display:flex;
  393. display: -webkit-flex;
  394. display: -moz-flex;
  395. display: -ms-flex;
  396. align-items: center;
  397. -webkit-align-items:center;
  398. -ms-align-items:center;
  399. -webkit-justify-content:center;
  400. -ms-justify-content:center;
  401. justify-content: center;
  402. }
  403. .post500 ul.oe_menu > li > a, .post450 ul.oe_menu > li > a { padding:10px; width:98px;}
  404.  
  405.  
  406. ul.oe_menu > li > a:hover,
  407. ul.oe_menu > li.selected > a{
  408. background:#fff;
  409. color:{color:accent};
  410. opacity:1.0;
  411. transition: all 0.3s ease-in-out;
  412. -webkit-transition: all 0.3s ease-in-out;
  413. -moz-transition: all 0.3s ease-in-out;
  414. -o-transition: all 0.3s ease-in-out;
  415. }
  416. .oe_wrapper ul.hovered > li > a{
  417. background:#fff;
  418. text-shadow:0px 0px 1px #fff;
  419. }
  420.  
  421. ul.oe_menu div::-webkit-scrollbar {display:none; }
  422.  
  423. ul.oe_menu div::-webkit-scrollbar-thumb { display:none; }
  424.  
  425.  
  426. ul.oe_menu div{
  427. position:absolute;
  428. left:1px;
  429. background:#fff;
  430. display:none;
  431. overflow:auto;
  432. text-align:center;
  433. top:85px;
  434. width:460px;
  435. height:250px;
  436. padding:20px;
  437.  
  438. }
  439.  
  440. .post500 ul.oe_menu div, .post450 ul.oe_menu div {
  441. width:538px;
  442. padding:30px;
  443. }
  444.  
  445. .selected div.nullbox {visibility:hidden;}
  446.  
  447. .post500 ul.oe_menu div.block1, .post450 ul.oe_menu div.block1 {left:-120px;}
  448. .post500 ul.oe_menu div.block2, .post450 ul.oe_menu div.block2 {left:-240px;}
  449. .post500 ul.oe_menu div.block3, .post450 ul.oe_menu div.block3 {left:-360px;}
  450. .post500 ul.oe_menu div.block4, .post450 ul.oe_menu div.block4 {left:-480px;}
  451.  
  452. ul.oe_menu div.block1 {left:-100px;}
  453. ul.oe_menu div.block2 {left:-200px;}
  454. ul.oe_menu div.block3 {left:-300px;}
  455. ul.oe_menu div.block4 {left:-400px;}
  456.  
  457. ul.oe_menu div p {
  458. margin:1.12em;
  459. }
  460.  
  461.  
  462. ul.oe_menu div ul li a{
  463. text-decoration:none;
  464. color:#000;
  465. background:#fafafa;
  466. padding:8px;
  467. margin:2px 4px;
  468. display:block;
  469. font-size:1em;
  470. white-space:nowrap;
  471. overflow:hidden;
  472. text-overflow:ellipsis;
  473. text-transform:uppercase;
  474. font-family:'Lato',arial,sans-serif;
  475. letter-spacing:1.2px;
  476. font-weight:300;
  477. transition: all 0.3s ease-in-out;
  478. -webkit-transition: all 0.3s ease-in-out;
  479. -moz-transition: all 0.3s ease-in-out;
  480. -o-transition: all 0.3s ease-in-out;
  481. }
  482.  
  483. ul.oe_menu div ul li a:empty {visibility:hidden;}
  484.  
  485. ul.oe_menu div ul.oe_full{
  486. width:100%;
  487. }
  488.  
  489. .oe_full {
  490. text-align:center;
  491. text-transform:uppercase;
  492. font-size:1.2em;
  493. font-weight:300;
  494. }
  495. ul.oe_menu div ul li a:hover{
  496. background:#000;
  497. color:#fff;
  498. transition: all 0.3s ease-in-out;
  499. -webkit-transition: all 0.3s ease-in-out;
  500. -moz-transition: all 0.3s ease-in-out;
  501. -o-transition: all 0.3s ease-in-out;
  502. }
  503.  
  504. ul.oe_menu li ul{
  505. list-style:none;
  506. width:100%;
  507. }
  508.  
  509. ul.oe_menu div ul:not(.oe_full) li {width:30%;display:inline-block;}
  510.  
  511. li.oe_heading{
  512. font-family:'Lato',arial,sans-serif;
  513. color:#000;
  514. font-size:1.5em;
  515. margin-bottom:10px;
  516. padding-bottom:6px;
  517. border-bottom:1px solid #ddd;
  518. }
  519.  
  520. /*posts*/
  521.  
  522. #entries {
  523. position:absolute;
  524. width:500px;
  525. margin:80px auto;
  526. height:calc(100% - 80px);
  527. backdrop-filter: blur(3px);
  528. -webkit-backdrop-filter: blur(3px);
  529. overflow-x:hidden;
  530. overflow-y:auto;
  531. background:rgba(255,255,255,0.6);
  532. transition: height 0.3s ease-in-out;
  533. -webkit-transition: height 0.3s ease-in-out;
  534. -moz-transition: height 0.3s ease-in-out;
  535. -o-transition: height 0.3s ease-in-out;
  536. }
  537.  
  538.  
  539. .post500 #entries, .post450 #entries {width:600px;}
  540. div.posts:last-of-type {margin-bottom:40px;}
  541.  
  542. .posts {
  543. color:{color:text};
  544. position:relative;
  545. margin:50px auto 80px auto;
  546. padding:20px;
  547. background:#fff;
  548. {block:ifmanualload}
  549. -webkit-animation:fadeIn ease-in 1s;
  550. -o-animation:fadeIn ease-in 1s;
  551. -moz-animation:fadeIn ease-in 1s;
  552. animation:fadeIn ease-in 1s;
  553. {/block:ifmanualload}
  554. }
  555.  
  556. .posts:first-of-type {margin-top:40px;}
  557.  
  558. .posts video, .posts .tumblr_video_container {
  559. width: 100% !important;
  560. height: auto !important;
  561. }
  562.  
  563. .posts img {
  564. max-width:100%;
  565. height:auto;
  566. }
  567.  
  568. .posts figure {margin:12px 0 12px 0 !important;}
  569.  
  570. .post500 .posts {width:500px;}
  571. .post450 .posts {width:450px;}
  572. .post400 .posts {width:400px;}
  573. .post350 .posts {width:350px;}
  574. .post300 .posts {width:300px;}
  575. .post250 .posts {width:250px;}
  576.  
  577. .post350 .posts {padding:15px;}
  578. .post250 .posts, .post300 .posts {padding:10px;}
  579.  
  580. .posts .captions {word-wrap:break-word;}
  581.  
  582. .posts .captions a {
  583. border-bottom:1px solid #dedede;
  584. transition: all 0.3s ease-in-out;
  585. -webkit-transition: all 0.3s ease-in-out;
  586. -moz-transition: all 0.3s ease-in-out;
  587. -o-transition: all 0.3s ease-in-out;
  588. }
  589.  
  590. .posts .captions a:hover, .posts .captions a:focus, .posts .captions a:active {
  591. color:{color:accent};
  592. border-bottom:1px solid {color:accent};
  593. transition: all 0.3s ease-in-out;
  594. -webkit-transition: all 0.3s ease-in-out;
  595. -moz-transition: all 0.3s ease-in-out;
  596. -o-transition: all 0.3s ease-in-out;
  597. }
  598.  
  599. .posts ul {padding-left:0;}
  600. .posts ol {padding-left:20px;}
  601. .posts ul li {list-style:none; padding:2px;text-indent:8px;}
  602. .posts ol li {padding:2px;}
  603. .posts ul li:before {content:"―"; position:relative; left:-8px;}
  604.  
  605. /*t*/
  606.  
  607. .titre {
  608. font-size:1.8em;
  609. color:#000;
  610. letter-spacing:1.2px;
  611. margin-bottom:10px;
  612. line-height:160%;
  613. text-transform:uppercase;
  614. font-family:'lato',arial,sans-serif;
  615. white-space:nowrap;
  616. overflow:hidden;
  617. text-overflow:ellipsis;
  618. }
  619.  
  620. .post350 .titre {font-size:1.6em;}
  621.  
  622. .post300 .titre, .post250 .titre {
  623. font-size:1.5em;
  624. margin-bottom:8px;
  625. }
  626.  
  627. .posts h2 {font-weight:400 !important;font-size:110%;line-height:160%;color:#000;}
  628.  
  629. /*lightbox*/
  630. #tumblr_lightbox,.tmblr-lightbox {background:rgba({RGBcolor:lightbox}, 0.95)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  631.  
  632.  
  633. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  634. opacity:0;
  635. border-radius:0!important;
  636. -moz-border-radius: 0!important;
  637. -webkit-border-radius: 0!important;
  638. -o-border-radius: 0!important;
  639. -webkit-box-shadow:none!important;
  640. box-shadow:none!important;
  641. }
  642.  
  643. #tumblr_lightbox_center_image {
  644. opacity: 1!important;
  645. background-color: #fff!important;
  646. }
  647.  
  648. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  649. transition: opacity 0.3s ease-in-out;
  650. -webkit-transition: opacity 0.3s ease-in-out;
  651. -moz-transition: opacity 0.3s ease-in-out;
  652. -o-transition: opacity 0.3s ease-in-out;
  653. }
  654.  
  655. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  656. opacity:1!important;
  657. transition: opacity 0.3s ease-in-out;
  658. -webkit-transition: opacity 0.3s ease-in-out;
  659. -moz-transition: opacity 0.3s ease-in-out;
  660. -o-transition: opacity 0.3s ease-in-out;
  661. }
  662.  
  663.  
  664.  
  665. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  666. box-shadow: 0 0 0 transparent !important;
  667. border-radius: 0!important;
  668. -moz-border-radius: 0!important;
  669. -webkit-border-radius: 0!important;
  670. -o-border-radius: 0!important;
  671.  
  672. }
  673.  
  674.  
  675.  
  676. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  677.  
  678.  
  679. .tumblr-box {cursor:help;}
  680.  
  681. #tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:crosshair;}
  682.  
  683. .tumblr-box {
  684. background-color:rgba(255,255,255,0)!important;
  685. transition: all 0.3s ease-in-out;
  686. -webkit-transition: all 0.3s ease-in-out;
  687. -moz-transition: all 0.3s ease-in-out;
  688. -o-transition: all 0.3s ease-in-out;
  689. }
  690.  
  691. .tumblr-box:hover{
  692. background-color:rgba(255,255,255,0.5)!important;
  693. transition: all 0.3s ease-in-out;
  694. -webkit-transition: all 0.3s ease-in-out;
  695. -moz-transition: all 0.3s ease-in-out;
  696. -o-transition: all 0.3s ease-in-out;
  697. }
  698.  
  699. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  700. .photo-slideshow .count-1 {
  701. margin-bottom:{select:photoset gutter}!important;
  702. }
  703.  
  704. .photo-slideshow .count-2 {
  705. margin-left:{select:photoset gutter}!important;
  706. margin-bottom:{select:photoset gutter}!important;
  707. width:calc(50% - ({select:photoset gutter}/2))!important;
  708. }
  709.  
  710. .photo-slideshow .count-2:first-child {
  711. margin-left:0!important;
  712. }
  713.  
  714. .photo-slideshow .count-3 {
  715. margin-left:{select:photoset gutter}!important;
  716. margin-bottom:{select:photoset gutter}!important;
  717. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  718. }
  719.  
  720. .photo-slideshow .count-3:first-child {
  721. margin-left:0!important;
  722. }
  723. .photo-slideshow {
  724. display:inline-block!important;
  725. margin-bottom:calc(-({select:photoset gutter} - 3px));
  726. position:relative;
  727. width:100%;
  728. }
  729.  
  730. .photo-slideshow.processed {margin-bottom:-{select:photoset gutter} !important;}
  731.  
  732. /*audio posts*/
  733. .flitwick {
  734. width:100%;
  735. display:flex;
  736. display:-webkit-flex;
  737. display:-moz-flex;
  738. display:-ms-flex;
  739. align-items:center;
  740. -webkit-align-items:center;
  741. -moz-align-items:center;
  742. -ms-align-items:center;
  743. display: -webkit-box;
  744. -webkit-box-align: center;
  745. position:relative;
  746. }
  747.  
  748. .grammy {
  749. position:relative;
  750. margin-left:0;
  751. }
  752.  
  753. .post500 .grammy, .post450 .grammy {
  754. width:100px;
  755. height:100px;
  756. }
  757.  
  758. .post400 .grammy, .post350 .grammy, .post300 .grammy {
  759. width:80px;
  760. height:80px;
  761. }
  762.  
  763. .post250 .grammy {
  764. width:50px;
  765. height:50px;
  766. }
  767.  
  768. .mariah {
  769. position:absolute;
  770. background:#fff;
  771. z-index:10;
  772. opacity:0;
  773. text-align:center;
  774. transition: all 0.3s ease-in-out;
  775. -webkit-transition: all 0.3s ease-in-out;
  776. -moz-transition: all 0.3s ease-in-out;
  777. -o-transition: all 0.3s ease-in-out;
  778. }
  779.  
  780. .post500 .mariah, .post450 .mariah {
  781. width:80px;
  782. height:80px;
  783. margin-top:10px;
  784. margin-left:10px;
  785. }
  786.  
  787. .post400 .mariah, .post350 .mariah, .post300 .mariah {
  788. width:60px;
  789. height:60px;
  790. margin-top:10px;
  791. margin-left:10px;
  792. }
  793.  
  794. .post250 .mariah {
  795. width:40px;
  796. height:40px;
  797. margin-top:5px;
  798. margin-left:5px;
  799. }
  800.  
  801. .mariah:hover {
  802. opacity:0.8;
  803. transition: all 0.3s ease-in-out;
  804. -webkit-transition: all 0.3s ease-in-out;
  805. -moz-transition: all 0.3s ease-in-out;
  806. -o-transition: all 0.3s ease-in-out;
  807. }
  808.  
  809. .playbox {
  810. overflow:hidden;
  811. }
  812.  
  813. .post500 .playbox, .post450 .playbox {
  814. width:40px;
  815. height:40px;
  816. margin-top:25px;
  817. margin-left:20px;
  818. }
  819.  
  820. .post400 .playbox, .post350 .playbox, .post300 .playbox {
  821. width:40px;
  822. height:40px;
  823. margin-top:15px;
  824. margin-left:12px;
  825. }
  826.  
  827. .post250 .playbox {
  828. width:25px;
  829. height:25px;
  830. margin-top:5px;
  831. margin-left:8px;
  832. }
  833.  
  834. .taylor {
  835. padding:0;
  836. margin-left:0px;
  837. background:#fafafa;
  838. display:flex;
  839. display:-webkit-flex;
  840. display:-moz-flex;
  841. display:-ms-flex;
  842. align-items:center;
  843. -webkit-align-items:center;
  844. -moz-align-items:center;
  845. -ms-align-items:center;
  846. justify-content:center;
  847. -webkit-justify-content:center;
  848. -moz-justify-content:center;
  849. -ms-justify-content:center;
  850. display: -webkit-box;
  851. -webkit-box-align: center;
  852. -webkit-box-pack:center;
  853.  
  854. }
  855.  
  856. .post500 .taylor, .post450 .taylor {
  857. width:calc(100% - 100px);
  858. height:100px;
  859. }
  860.  
  861. .post400 .taylor, .post350 .taylor,.post300 .taylor {
  862. width:calc(100% - 80px);
  863. height:80px;
  864. }
  865.  
  866. .post250 .taylor {
  867. width:calc(100% - 50px);
  868. height:50px;
  869. }
  870.  
  871. .swift {
  872. color:#000;
  873. font-weight:normal;
  874. text-overflow: ellipsis;
  875. white-space: nowrap;
  876. overflow:hidden;
  877. }
  878.  
  879. .post500 .swift, .post450 .swift {
  880. max-width:calc(100% - 50px);
  881. }
  882.  
  883. .post400 .swift, .post350 .swift,.post300 .swift {
  884. max-width:calc(100% - 50px);
  885. font-size:10px;
  886. }
  887.  
  888. .post250 .swift {
  889. max-width:calc(100% - 30px);
  890. font-size:8px;
  891. line-height:12px;
  892. }
  893.  
  894. .swift b {
  895. font-family:'lato', arial,sans-serif;
  896. font-weight:bold;
  897. color:#000;
  898. }
  899.  
  900. /*chat*/
  901.  
  902. .chats {
  903. line-height:160%;
  904. padding:5px;
  905. }
  906.  
  907. .chats strong {
  908. font-family:'Lato', arial, sans-serif;
  909. text-transform:uppercase;
  910. color:#000;
  911. }
  912.  
  913. .post250 .chats, .post350 .chats, .post300 .chats {
  914. font-size:10px;
  915. padding:3px;
  916. }
  917.  
  918. /*links*/
  919.  
  920. .posts nav *,
  921. .posts nav *:after,
  922. .posts nav *:before {
  923. -webkit-box-sizing: border-box;
  924. -moz-box-sizing: border-box;
  925. box-sizing: border-box;
  926. }
  927.  
  928. .posts nav a {
  929. position: relative;
  930. display: inline-block;
  931. margin: 0 auto;
  932. outline: none;
  933. color: #000;
  934. text-decoration: none;
  935. text-transform: uppercase;
  936. letter-spacing: 1.5px;
  937. font-weight: 400;
  938. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  939. font-size: 1.2em;
  940. }
  941.  
  942. .posts nav a:hover,
  943. .posts nav a:focus {
  944. outline: none;
  945. }
  946.  
  947. .remus a {
  948. color: #000;
  949. text-shadow: 0 0 1px rgba(111,134,134,0.3);
  950. width:100%;
  951. text-align:center;
  952. font-size:1.5em;
  953. background:#fafafa;
  954. padding:15px;
  955. margin-top:0;
  956. margin-bottom:0;
  957. white-space:nowrap;
  958. overflow:hidden;
  959. }
  960.  
  961. .post500 .remus a, .post450 .remus a {font-size:2em;}
  962.  
  963. .remus a::before {
  964. color: #000;
  965. content: attr(data-hover);
  966. position: absolute;
  967. opacity: 0;
  968. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  969. -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  970. -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  971. transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  972. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  973. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  974. transition: transform 0.3s, opacity 0.3s;
  975. pointer-events: none;
  976. }
  977.  
  978. .remus a:hover::before,
  979. .remus a:focus::before {
  980. -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  981. -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  982. transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  983. opacity: 1;
  984. }
  985.  
  986. /*quotes*/
  987.  
  988. .quotes {
  989. font-size:140%;
  990. display:inline;
  991. line-height:160%;
  992. }
  993.  
  994. .speaker {
  995. margin-top:12px;
  996. margin-bottom:12px;
  997. text-align:right;
  998. }
  999.  
  1000. .post250 .speaker,.post300 .speaker, .post350 .speaker {margin-top:8px;margin-bottom:8px;}
  1001.  
  1002. /*Ask*/
  1003.  
  1004. .ask_cont {
  1005. background:#fafafa;
  1006. padding:10px;
  1007. line-height:160%;
  1008. }
  1009.  
  1010. .post350 .ask_cont, .post300 .ask_cont, .post250 .ask_cont {padding:5px 8px;}
  1011.  
  1012. .asker {
  1013. text-transform:uppercase;
  1014. margin-bottom:8px;
  1015. letter-spacing:1px;
  1016. }
  1017.  
  1018. .post350 .asker, .post300 .asker, .post250 .asker {margin-bottom:3px;}
  1019.  
  1020.  
  1021. .asker a {
  1022. border-bottom:1px solid #dedede;
  1023. font-family:'lato',arial,sans-serif;
  1024. color:#000;
  1025. transition: all 0.3s ease-in-out;
  1026. -webkit-transition: all 0.3s ease-in-out;
  1027. -moz-transition: all 0.3s ease-in-out;
  1028. -o-transition: all 0.3s ease-in-out;
  1029.  
  1030. }
  1031.  
  1032. .asker a:hover {
  1033. border-bottom:1px solid {color:highlight};
  1034. color:{color:highlight};
  1035. transition: all 0.3s ease-in-out;
  1036. -webkit-transition: all 0.3s ease-in-out;
  1037. -moz-transition: all 0.3s ease-in-out;
  1038. -o-transition: all 0.3s ease-in-out;
  1039. }
  1040.  
  1041. /*footer*/
  1042.  
  1043. .footer {
  1044. font-weight:300;
  1045. color:#dedede;
  1046. text-transform:uppercase;
  1047. width:100%;
  1048. margin:10px auto 0 auto;
  1049. }
  1050.  
  1051. .footer a {
  1052. color:#666;
  1053. border-bottom:1px solid #dedede;
  1054. transition: all 0.3s ease-in-out;
  1055. -webkit-transition: all 0.3s ease-in-out;
  1056. -moz-transition: all 0.3s ease-in-out;
  1057. -o-transition: all 0.3s ease-in-out;
  1058. }
  1059.  
  1060.  
  1061. .footer a:hover, .footer a:focus {
  1062. color:{color:accent};
  1063. border-bottom:1px solid {color:accent};
  1064. transition: all 0.3s ease-in-out;
  1065. -webkit-transition: all 0.3s ease-in-out;
  1066. -moz-transition: all 0.3s ease-in-out;
  1067. -o-transition: all 0.3s ease-in-out;
  1068. }
  1069.  
  1070. .tags {
  1071. {block:ifnotshowtags}
  1072. {block:indexpage}
  1073. display:none;
  1074. {/block:indexpage}
  1075. {/block:ifnotshowtags}
  1076. font-size:90%;
  1077. width:100%;
  1078. margin-top:5px;
  1079. margin-bottom:-5px;
  1080. {block:permalinkpage}
  1081. font-style:italic;
  1082. {/block:permalinkpage}
  1083. word-wrap:break-word;
  1084. }
  1085.  
  1086. .tags a {
  1087. display:inline;
  1088. margin-left:5px;
  1089. }
  1090.  
  1091. .tags a:first-of-type {margin-left:0;}
  1092.  
  1093. .viasrc {width:100%;margin-top:5px;font-size:90%;text-transform:uppercase;}
  1094.  
  1095. .viasrc a {
  1096. color:{color:links};
  1097. border-bottom:1px solid #eaeaea;
  1098. transition: all 0.3s ease-in-out;
  1099. -webkit-transition: all 0.3s ease-in-out;
  1100. -moz-transition: all 0.3s ease-in-out;
  1101. -o-transition: all 0.3s ease-in-out;
  1102. }
  1103.  
  1104. .viasrc a:hover {
  1105. color:{color:accent};
  1106. border-bottom:1px solid {color:accent};
  1107. transition: all 0.3s ease-in-out;
  1108. -webkit-transition: all 0.3s ease-in-out;
  1109. -moz-transition: all 0.3s ease-in-out;
  1110. -o-transition: all 0.3s ease-in-out;
  1111. }
  1112.  
  1113. .notes h1 {font-weight:400;text-transform:uppercase;font-size:1.5em; text-align:center;}
  1114.  
  1115.  
  1116. div.notes::-webkit-scrollbar {width: 2px; height: 3px; background: #FFFFFF; }
  1117.  
  1118. div.notes::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  1119.  
  1120. ol.notes {
  1121. padding: 0px;
  1122. margin: 0px;
  1123. list-style-type: none;
  1124. }
  1125.  
  1126. ol.notes li.note {padding: 8px; text-indent:10px; line-height:150%;}
  1127.  
  1128. .post350 ol.notes li.note {padding: 6px; text-indent:9px; line-height:160%; font-size:11px;letter-spacing:1px;}
  1129.  
  1130. .post250 ol.notes li.note, .post300 ol.notes li.note {padding: 5px;padding-left:0; line-height:150%; font-size:10px;letter-spacing:1px;}
  1131.  
  1132. ol.notes li.note .action a {
  1133. border-bottom:1px solid #dedede;
  1134. color:#5f5f5f;
  1135. transition: all 0.3s ease-in-out;
  1136. -webkit-transition: all 0.3s ease-in-out;
  1137. -moz-transition: all 0.3s ease-in-out;
  1138. -o-transition: all 0.3s ease-in-out;
  1139. }
  1140.  
  1141. ol.notes li.note .action a:hover {
  1142. border-bottom: 1px solid {color:highlight};
  1143. color:{color:highlight};
  1144. transition: all 0.3s ease-in-out;
  1145. -webkit-transition: all 0.3s ease-in-out;
  1146. -moz-transition: all 0.3s ease-in-out;
  1147. -o-transition: all 0.3s ease-in-out;
  1148. }
  1149.  
  1150. ol.notes li.note:before {content:"―"; position:relative; left:-10px;}
  1151.  
  1152. .post350 ol.notes li.note:before {left:-8px;}
  1153.  
  1154. .post300 ol.notes li.note:before, .post250 ol.notes li.note:before {display:none;}
  1155.  
  1156. .post350 ol.notes li.note:before {left:-8px;}
  1157.  
  1158. ol.notes li.note img.avatar {display:none;}
  1159.  
  1160. li.more_notes_link_container:before {display:none;}
  1161.  
  1162. li.more_notes_link_container {text-indent:0; text-transform:uppercase; font-size:14px; margin-top:10px; margin-bottom:-5px;}
  1163.  
  1164. .post350 li.more_notes_link_container {font-size:12px;padding:0;}
  1165.  
  1166. .post250 li.more_notes_link_container, .post300 li.more_notes_link_container {font-size:12px;padding:0;}
  1167.  
  1168. li.more_notes_link_container a {
  1169. color:#000;
  1170. font-family:'lato',arial,sans-serif;
  1171. transition: all 0.3s ease-in-out;
  1172. -webkit-transition: all 0.3s ease-in-out;
  1173. -moz-transition: all 0.3s ease-in-out;
  1174. -o-transition: all 0.3s ease-in-out;
  1175. }
  1176.  
  1177. li.more_notes_link_container a:hover {
  1178. color:{color:highlight};
  1179. transition: all 0.3s ease-in-out;
  1180. -webkit-transition: all 0.3s ease-in-out;
  1181. -moz-transition: all 0.3s ease-in-out;
  1182. -o-transition: all 0.3s ease-in-out;
  1183. }
  1184.  
  1185.  
  1186. ol.notes li.note blockquote {
  1187. border-color: #eaeaea;
  1188. padding: 4px 10px;
  1189. margin: 10px 0px 0px 25px;
  1190. }
  1191. with_commentary.blockquote {max-width:100%;}
  1192.  
  1193. ol.notes li.note blockquote a {
  1194. text-decoration: none;
  1195. border-bottom:none;
  1196. }
  1197.  
  1198. .pg {
  1199.  
  1200. margin:auto;
  1201. margin-bottom:50px;
  1202. font-size:1.5em;
  1203. line-height:1.6em;
  1204. width:100%;
  1205. z-index:10;
  1206. color:{color:accent};
  1207. text-transform:uppercase;
  1208. letter-spacing:1.5px;
  1209. background:transparent;
  1210. text-align:center;
  1211. word-spacing:20px;
  1212. {block:ifinfinitescroll}
  1213. display:none;
  1214. {/block:ifinfinitescroll}
  1215. }
  1216.  
  1217. .pg a {
  1218. display:inline-block;
  1219. margin-left:15px;
  1220. color:{color:accent};
  1221. font-weight:400;
  1222. transition: all 0.3s ease-in-out;
  1223. -webkit-transition: all 0.3s ease-in-out;
  1224. -moz-transition: all 0.3s ease-in-out;
  1225. -o-transition: all 0.3s ease-in-out;
  1226. }
  1227.  
  1228. .pg a:hover {
  1229. color:{color:highlight};
  1230. transition: all 0.3s ease-in-out;
  1231. -webkit-transition: all 0.3s ease-in-out;
  1232. -moz-transition: all 0.3s ease-in-out;
  1233. -o-transition: all 0.3s ease-in-out;
  1234. }
  1235.  
  1236. span.current {font-style:italic;margin-left:15px;}
  1237.  
  1238. footer {
  1239. margin:0px auto 40px auto;
  1240. width:100%;
  1241. }
  1242.  
  1243. #infscr-loading {display:none !important;}
  1244.  
  1245. .bottom {display:block;text-align:center;text-transform:uppercase;}
  1246. a.append {
  1247. padding-bottom:2px;
  1248. font-size:1.1em;
  1249. cursor:help;
  1250. letter-spacing:1.2px;
  1251. color:#000;
  1252. border-bottom:1px solid #000;
  1253. transition: all 0.3s ease-in-out;
  1254. -webkit-transition: all 0.3s ease-in-out;
  1255. -moz-transition: all 0.3s ease-in-out;
  1256. -o-transition: all 0.3s ease-in-out;
  1257. }
  1258.  
  1259. a.append:hover {
  1260. color:{color:highlight};
  1261. border-bottom:1px solid {color:highlight};
  1262. transition: all 0.3s ease-in-out;
  1263. -webkit-transition: all 0.3s ease-in-out;
  1264. -moz-transition: all 0.3s ease-in-out;
  1265. -o-transition: all 0.3s ease-in-out;
  1266. }
  1267.  
  1268. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1269. #leo {
  1270.  
  1271. font-family: Arial, Sans-Serif;
  1272. text-transform:uppercase;
  1273. text-align:center;
  1274. z-index:7;
  1275. box-sizing:content-box;
  1276. -webkit-box-sizing:content-box;
  1277. -moz-box-sizing:content-box;
  1278. }
  1279.  
  1280.  
  1281. #leo a {
  1282.  
  1283. position:fixed;
  1284. font-size:12px;
  1285. line-height:16px;
  1286. width:18px;
  1287. height:18px;
  1288. font-weight:300;
  1289. bottom:10px;
  1290. right:10px;
  1291. color:#000;
  1292. background:rgba(255,255,255,0.4);
  1293. padding:5px;
  1294. transition: all 1s ease-in-out;
  1295. -webkit-transition: all 1s ease-in-out;
  1296. -o-transition: all 1s ease-in-out;
  1297. -moz-transition: all 1s ease-in-out;
  1298.  
  1299. }
  1300.  
  1301. #leo a:hover {
  1302. background-color:rgba(0,0,0,1);
  1303. color:#fff;
  1304. border-radius:50%;
  1305. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1306. -moz-animation: hermione 1s;
  1307. -o-animation: hermione 1s;
  1308. animation: hermione 1s;
  1309. animation-timing-function: ease-in-out;
  1310. -webkit-animation-timing-function: ease-in-out;
  1311. -moz-animation-timing-function: ease-in-out;
  1312. -o-animation-timing-function: ease-in-out;
  1313.  
  1314. -moz-transform: rotate(720deg); /* IE 9 */
  1315. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1316. transform: rotate(720deg);
  1317.  
  1318. transition: all 1s ease-in-out;
  1319. -webkit-transition: all 1s ease-in-out;
  1320. -o-transition: all 1s ease-in-out;
  1321. -moz-transition: all 1s ease-in-out;
  1322.  
  1323.  
  1324. }
  1325.  
  1326. @-webkit-keyframes hermione {
  1327. 0% {color:#000;}
  1328. 25% {color:#ACE4EA;}
  1329. 50% {color:#FFFBDD;}
  1330. 75% {color:#ACE4EA;}
  1331. 100% {color:#fff;}
  1332. }
  1333. @-moz-keyframes hermione {
  1334. 0% {color:#000;}
  1335. 25% {color:#ACE4EA;}
  1336. 50% {color:#FFFBDD;}
  1337. 75% {color:#ACE4EA;}
  1338. 100% {color:#fff;}
  1339. }
  1340. @-o-keyframes hermione {
  1341. 0% {color:#000;}
  1342. 25% {color:#ACE4EA;}
  1343. 50% {color:#FFFBDD;}
  1344. 75% {color:#ACE4EA;}
  1345. 100% {color:#fff;}
  1346. }
  1347.  
  1348. @keyframes hermione {
  1349. 0% {color:#000;}
  1350. 25% {color:#ACE4EA;}
  1351. 50% {color:#FFFBDD;}
  1352. 75% {color:#ACE4EA;}
  1353. 100% {color:#fff;}
  1354. }
  1355. /*END OF CREDIT*/
  1356. </style>
  1357. {block:indexpage}
  1358. {block:ifinfinitescroll}
  1359. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  1360. {block:ifmanualload}
  1361. <script>
  1362.  
  1363. // Calculate internal height (used for local scroll)
  1364. // this function is from the old localMode I think?
  1365. function infsrc_local_hiddenHeight(element) {
  1366. var height = 0;
  1367. jQuery(element).children().each(function() {
  1368. height = height + jQuery(this).outerHeight(false);
  1369. });
  1370. return height;
  1371. }
  1372.  
  1373. jQuery.extend(jQuery.infinitescroll.prototype,{
  1374. _nearbottom_local: function infscr_nearbottom_local() {
  1375. var opts = this.options, instance = this,
  1376. pixelsFromWindowBottomToBottom = infsrc_local_hiddenHeight(opts.binder)
  1377. - jQuery(opts.binder).scrollTop() - jQuery(opts.binder).height();
  1378.  
  1379. if (opts.local_pixelsFromNavToBottom == undefined){
  1380. opts.local_pixelsFromNavToBottom = infsrc_local_hiddenHeight(opts.binder) +
  1381. jQuery(opts.binder).offset().top - jQuery(opts.navSelector).offset().top;
  1382. }
  1383. instance._debug('local math:', pixelsFromWindowBottomToBottom,
  1384. opts.local_pixelsFromNavToBottom);
  1385.  
  1386. return (pixelsFromWindowBottomToBottom - opts.bufferPx < opts.local_pixelsFromNavToBottom);
  1387. }
  1388. });
  1389. </script>
  1390. {/block:ifmanualload}
  1391.  
  1392. <script>
  1393.  
  1394. // Infinite Scroll
  1395. $(function() {
  1396.  
  1397. var $container = $('section');
  1398. $container.infinitescroll({
  1399.  
  1400. loading: {
  1401. finishedMsg: "<em>No more posts</em>",
  1402. img: null,
  1403. msg: null,
  1404. msgText: "<em>Loading posts...</em>",
  1405. {block:ifmanualload}
  1406. finished: function () {$('.append').text('Load More'); },
  1407. {/block:ifmanualload}
  1408.  
  1409. },
  1410.  
  1411. behavior: 'local',
  1412. binder: $('#entries'),
  1413. navSelector : '.pg',
  1414. nextSelector : '.pg a:last',
  1415. itemSelector : '.posts',
  1416. {block:ifmanualload}
  1417. errorCallback: function () {$('.append').fadeOut();},
  1418. {/block:ifmanualload}
  1419. bufferPx : 600,
  1420.  
  1421. },
  1422.  
  1423. function( newElements ) {
  1424. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  1425. lightbox: true,
  1426. rounded: true,
  1427. gutter: '0px',
  1428. borderRadius: '0px',
  1429. photoset: '.photo-slideshow',
  1430. photoWrap: '.photo-data',
  1431. photo: '.pxu-photo'
  1432. });
  1433.  
  1434. $( newElements ).find('.togglet').click(function(){
  1435.  
  1436. $(this).closest('.posts').find('div.tags').slideToggle();
  1437. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1438. });
  1439.  
  1440. });
  1441.  
  1442. {block:ifmanualload}
  1443. $container.infinitescroll('unbind');
  1444. $('.append').on('click', function(e) {
  1445. e.preventDefault();
  1446. $container.infinitescroll('retrieve');
  1447. });
  1448. {/block:ifmanualload}
  1449. });
  1450. </script>
  1451. {/block:ifinfinitescroll}
  1452. {/block:indexpage}
  1453. </head>
  1454. <body class="animsition {select:bg} {select:post width}">
  1455.  
  1456. <div id="cont">
  1457. <div class="oe_wrapper">
  1458. <div id="oe_overlay" class="oe_overlay"></div>
  1459. <ul id="oe_menu" class="oe_menu">
  1460. <li><a class="a-link" href="/">Home</a>
  1461. <div class="nullbox"></div>
  1462. </li>
  1463.  
  1464. <li><a class="a-link" href="/ask">Ask</a>
  1465. <div class="block1">
  1466.  
  1467. <ul class="oe_full">
  1468. <li class="oe_heading">{AskLabel}</li>
  1469. </ul>
  1470. <center>
  1471. <p> <iframe frameborder="0" height="190" id="ask_form" scrolling="yes" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%" height="100%"></iframe></p>
  1472. </center>
  1473.  
  1474.  
  1475. </div>
  1476. </li>
  1477.  
  1478. <!--This is the description-->
  1479. <li><a class="totop" href="#">Info</a>
  1480. <div class="block2">
  1481. <ul class="oe_full">
  1482. <li class="oe_heading">{text:info}</li>
  1483. </ul>
  1484. {Block:Description} <p>{Description}</p>{/Block:Description}
  1485. </div>
  1486. </li>
  1487.  
  1488.  
  1489. <!--The links go here-->
  1490. <li><a class="totop" href="#">Links</a>
  1491. <div class="block3">
  1492. <ul class="oe_full">
  1493. <li class="oe_heading">Links</li>
  1494. </ul>
  1495. <ul>
  1496. <li><a href="{text:Link1 URL}">{text:Link1}</a></li>
  1497. <li><a href="{text:Link2 URL}">{text:Link2}</a></li>
  1498. <li><a href="{text:Link3 URL}">{text:Link3}</a></li>
  1499. </ul>
  1500. <ul>
  1501. <li><a href="{text:Link4 URL}">{text:Link4}</a></li> <li><a href="{text:Link5 URL}">{text:Link5}</a></li> <li><a href="{text:Link6 URL}">{text:Link6}</a></li>
  1502. </ul>
  1503. <ul>
  1504. <li><a href="{text:Link7 URL}">{text:Link7}</a></li>
  1505. <li><a href="{text:Link8 URL}">{text:Link8}</a></li>
  1506. <li><a href="{text:Link9 URL}">{text:Link9}</a></li>
  1507. </ul>
  1508. </div>
  1509. </li>
  1510.  
  1511.  
  1512. <li><a class="totop" href="#">Updates</a>
  1513. <div class="block4">
  1514. <ul class="oe_full">
  1515. <li class="oe_heading">Updates</li>
  1516. </ul>
  1517. <p>{text:updates}</p>
  1518. </div>
  1519. </li>
  1520. </ul>
  1521. </div>
  1522.  
  1523. <div id="entries">
  1524. <section>
  1525. {block:Posts}
  1526. <div class="posts">
  1527.  
  1528. {block:Photo}
  1529. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  1530. {block:Caption}
  1531. <div class="captions">
  1532. {Caption}
  1533. </div>
  1534. {/block:Caption}
  1535. {/block:Photo}
  1536.  
  1537. {block:Photoset}
  1538. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1539. {block:Caption}
  1540. <div class="captions">
  1541. {Caption}
  1542. </div>
  1543. {/block:Caption}
  1544. {/block:Photoset}
  1545.  
  1546. {block:Video}
  1547. {Video-500}
  1548. {block:Caption}
  1549. <div class="captions">
  1550. {Caption}
  1551. </div>
  1552. {/block:Caption}
  1553. {/block:Video}
  1554.  
  1555. {block:Audio}
  1556. <div class="flitwick">
  1557.  
  1558. <div class="mariah">
  1559. <div class="playbox">{AudioPlayerWhite}</div>
  1560. </div>
  1561.  
  1562. <div class="grammy">
  1563. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1564. {block:AlbumArt}
  1565. <img src="{AlbumArtURL}" style="position:absolute;">
  1566. {/block:AlbumArt}
  1567. </div>
  1568.  
  1569.  
  1570. <div class="taylor">
  1571. <div class="swift">
  1572. {block:TrackName}
  1573. <b>Song:</b> {TrackName}
  1574. {/block:TrackName}<br>
  1575.  
  1576. {block:Artist}
  1577. <b>Artist:</b> {Artist}
  1578. {/block:Artist}<br>
  1579.  
  1580. {block:Album}
  1581. <b>Album:</b> {Album}
  1582. {/block:Album}
  1583.  
  1584. </div>
  1585. </div>
  1586.  
  1587. </div>
  1588. {block:Caption}
  1589. <div class="captions">
  1590. {Caption}
  1591. </div>
  1592. {/block:Caption}
  1593. {/block:Audio}
  1594.  
  1595. {block:Quote}
  1596. <div class="quotes">"{Quote}"</div>
  1597.  
  1598. {block:Source}
  1599. <div class="speaker captions">
  1600. ― {Source}
  1601. </div>
  1602. {/block:Source}
  1603. {/block:Quote}
  1604.  
  1605. {block:Text}
  1606. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1607. <div class="captions">{Body}</div>
  1608. {/block:Text}
  1609.  
  1610. {block:Answer}
  1611. <div class="ask_cont">
  1612. <div class="asker">{Asker} asked:</div>
  1613. {Question}
  1614. </div>
  1615. <div class="captions">{Answer}</div>
  1616. {/block:Answer}
  1617.  
  1618. {block:Chat}
  1619. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1620. {block:Lines}
  1621. <div class="chats">
  1622. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}
  1623. </div>
  1624. {/block:Lines}
  1625. {/block:Chat}
  1626.  
  1627. {block:Link}
  1628. <nav class="remus" id="remus">
  1629. <a href="{URL}" data-hover="{Name}">{Name}</a>
  1630.  
  1631. </nav>
  1632. {block:Description}{Description}{/block:Description}
  1633.  
  1634. {/block:Link}
  1635.  
  1636. {block:date}
  1637.  
  1638. <div class="footer">
  1639.  
  1640. <a class="a-link" href="{Permalink}">{ShortMonth}. {DayOfMonth}{DayOfMonthSuffix} '{ShortYear}</a>
  1641. {block:notecount} / <a class="a-link" href="{Permalink}">{NoteCount}N</a>{/block:notecount} / <a href="{ReblogURL}">reblog</a>
  1642.  
  1643.  
  1644. {block:ifnotshowtags}
  1645. {block:indexpage}
  1646. {block:HasTags}
  1647. / <a class="togglet {PostID}" href="javascript:;">tags</a>
  1648. {/block:HasTags}
  1649. {/block:indexpage}
  1650. {/block:ifnotshowtags}
  1651. </div>
  1652.  
  1653. {block:permalinkpage}
  1654. {block:RebloggedFrom}
  1655. <div class="viasrc">
  1656. via <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1657. {block:ContentSource}
  1658. , by <a href="{SourceURL}">{ReblogRootName}</a>
  1659. {/block:ContentSource}
  1660. </div>
  1661. {/block:RebloggedFrom}
  1662. {/block:permalinkpage}
  1663.  
  1664. {block:HasTags}
  1665. <div class="tags {PostID}">
  1666. {block:Tags}
  1667. <a class="a-link" href="{TagURL}">#{Tag}</a>
  1668. {/block:Tags}
  1669. </div>
  1670. {/block:HasTags}
  1671.  
  1672. {/block:date}
  1673.  
  1674. <!-- {block:NoRebloggedFrom}
  1675. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1676. {/block:NoRebloggedFrom} -->
  1677.  
  1678. {block:ContentSource}<!-- {SourceURL}
  1679. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1680. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1681. {/block:ContentSource}
  1682. </div>
  1683.  
  1684. {block:PermalinkPage}
  1685. {block:date}
  1686. {block:NoteCount}
  1687. <div class="posts">
  1688.  
  1689. <div class="notes">
  1690. <h1>Notes</h1>
  1691. {block:PostNotes}
  1692. {PostNotes}
  1693. {/block:PostNotes}
  1694. </div>
  1695.  
  1696. </div>
  1697. {block:NoteCount}
  1698. {/block:date}
  1699. {/block:PermalinkPage}
  1700.  
  1701. {/block:Posts}
  1702.  
  1703. </section>
  1704.  
  1705. {block:IndexPage}
  1706. {block:Pagination}
  1707.  
  1708. <div class="pg">
  1709.  
  1710. {block:PreviousPage}<a class="a-link" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  1711. {block:JumpPagination length="5"}
  1712. {block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}
  1713. {block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1714. {block:NextPage}<a class="a-link" href="{NextPage}">&raquo;</a>{/block:NextPage}
  1715.  
  1716. </div>
  1717.  
  1718. {/block:Pagination}
  1719. {/block:IndexPage}
  1720.  
  1721. {block:ifmanualload}
  1722. {block:IndexPage}
  1723. {block:Pagination}
  1724.  
  1725. <footer>
  1726. <div class="bottom"><a class="append">Load More</a></div>
  1727. </footer>
  1728. {/block:Pagination}
  1729. {/block:IndexPage}
  1730. {/block:ifmanualload}
  1731.  
  1732. </div>
  1733. </div>
  1734.  
  1735. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1736. <div id="leo">
  1737. <a href="https://hermionegrangcr.tumblr.com">♚</a>
  1738. </div>
  1739. <!--END OF CREDIT-->
  1740.  
  1741. <script>
  1742. $(document).ready(function(){
  1743. $("a.totop").click(function(){
  1744. $('#entries').animate({scrollTop: 0}, 500, 'linear');
  1745. });
  1746. });
  1747. </script>
  1748.  
  1749. <script src="https://static.tumblr.com/xbvpdcx/0Joo5tua9/smoothscroll.js"></script>
  1750.  
  1751. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1752. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1753.  
  1754. <script>
  1755. jQuery.noConflict();
  1756. (function($){
  1757.  
  1758. $(document).ready(function(){
  1759.  
  1760. $("a[title],img[title],[title]").style_my_tooltips({
  1761.  
  1762. tip_follows_cursor:true,
  1763.  
  1764. tip_delay_time:30,
  1765.  
  1766. tip_fade_speed:300,
  1767.  
  1768. attribute:"title"
  1769.  
  1770. });
  1771.  
  1772. });
  1773.  
  1774. })(jQuery);
  1775. </script>
  1776.  
  1777. {block:indexpage}
  1778. {block:ifnotshowtags}
  1779. {block:posts}
  1780. <script>
  1781. $(document).ready(function(){
  1782. $('a.togglet.{PostID}').click(function(e){
  1783. e.preventDefault();
  1784. $('div.tags.{PostID}').slideToggle();
  1785. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1786. });
  1787.  
  1788. });
  1789. </script>
  1790. {/block:posts}
  1791. {/block:ifnotshowtags}
  1792. {/block:indexpage}
  1793.  
  1794. <script>
  1795. $(function() {
  1796. var $oe_menu = $('#oe_menu');
  1797. var $oe_menu_items = $oe_menu.children('li');
  1798. var $oe_overlay = $('#oe_overlay');
  1799.  
  1800. $oe_menu_items.bind('mouseenter',function(){
  1801. var $this = $(this);
  1802. $this.addClass('slided selected');
  1803. $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
  1804. $oe_menu_items.not('.slided').children('div').hide();
  1805. $this.removeClass('slided');
  1806. });
  1807. }).bind('mouseleave',function(){
  1808. var $this = $(this);
  1809. $this.removeClass('selected').children('div').css('z-index','1');
  1810. });
  1811.  
  1812. $oe_menu.bind('mouseenter',function(){
  1813. var $this = $(this);
  1814. $oe_overlay.stop(true,true).fadeTo(200, 0.8).css('z-index','10');
  1815. $this.addClass('hovered');
  1816. }).bind('mouseleave',function(){
  1817. var $this = $(this);
  1818. $this.removeClass('hovered');
  1819. $oe_overlay.stop(true,true).fadeTo(200, 0).css('z-index','0');
  1820. $oe_menu_items.children('div').hide();
  1821. })
  1822. });
  1823. </script>
  1824.  
  1825. </body>
  1826. </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!