API tools faq
paste
hermionemessi

Theme 11

hermionemessi
Jan 6th, 2018
3,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.54 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3.  
  4. <!--THEME 11 Serenade by hermionegrangcr
  5.  
  6. THEME BLOG: grangersdesigns
  7.  
  8. Notes: Previously made for aryapendragxn and now released for public use under her permission c:
  9.  
  10.  
  11. ♛ ♛ ♛
  12. ♛♛♛ ♛♛♛ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  16. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  17.  
  18.  
  19. Important:
  20.  
  21. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  22.  
  23. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  24.  
  25. ♚ Tweak this to your preference as long as the credits remain intact.
  26.  
  27. ♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
  28.  
  29. -->
  30. <head>
  31.  
  32. <meta charset="UTF-8" />
  33. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  34. <meta name="viewport" content="width=device-width, initial-scale=1">
  35.  
  36. <title>{Title}</title>
  37.  
  38. <meta name="image:sidebar" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  39.  
  40. <meta name="image:profile" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  41.  
  42.  
  43. <meta name="image:menu" content="https://static.tumblr.com/f75d88f0d4ca272362db789619827992/xbvpdcx/XEvo9rzwa/tumblr_static_4sw688c0e58g4k4c8kc84oc4k.jpg">
  44.  
  45. <meta name="color:highlight" content="#dedcee">
  46. <meta name="color:accent" content="#efefff">
  47. <meta name="color:grad1"content="#D3CCE3">
  48. <meta name="color:grad2"content="#E9E4F0">
  49.  
  50. <meta name="select:colour scheme"content="simple_sch"title="Simple">
  51. <meta name="select:colour scheme"content="colour_sch"title="Colour">
  52. <meta name="select:colour scheme"content="grad_sch"title="Gradient">
  53. <meta name="select:colour scheme"content="white_sch"title="White">
  54.  
  55. <meta name="select:photoset gutter"content="5px"title="5px">
  56. <meta name="select:photoset gutter"content="10px"title="10px">
  57. <meta name="select:photoset gutter"content="2px"title="2px">
  58. <meta name="select:photoset gutter"content="1px"title="1px">
  59. <meta name="select:photoset gutter"content="0px"title="0px">
  60.  
  61. <meta name="select:post width"content="post500"title="500px"/>
  62. <meta name="select:post width"content="post540"title="540px"/>
  63. <meta name="select:post width"content="post450"title="450px"/>
  64. <meta name="select:post width"content="post400"title="400px"/>
  65.  
  66. <meta name="select:post spacing" content="150px">
  67. <meta name="select:post spacing" content="60px">
  68. <meta name="select:post spacing" content="80px">
  69. <meta name="select:post spacing" content="100px">
  70. <meta name="select:post spacing" content="120px">
  71.  
  72. <meta name="select:font size" content="12px" title="12px">
  73. <meta name="select:font size" content="11px" title="11px">
  74. <meta name="select:font size" content="10px" title="10px">
  75. <meta name="select:font size" content="9px" title="9px">
  76.  
  77. <meta name="select:notes display" content="def_notes" title="default">
  78. <meta name="select:notes display" content="grid_notes" title="grid">
  79.  
  80. <meta name="if:unnested captions" content="">
  81. <meta name="if:infinite scroll" content="">
  82. <meta name="if:manual load" content="">
  83.  
  84. <meta name="text:name" content="Name.">
  85. <meta name="text:info1" content="Write">
  86. <meta name="text:info2" content="Something">
  87. <meta name="text:info3" content="Cool">
  88. <meta name="text:info4" content="Over">
  89. <meta name="text:info5" content="Here">
  90.  
  91.  
  92.  
  93.  
  94. <meta name="text:askpage" content="/ask">
  95.  
  96. <meta name="text:Link1" content="Link1">
  97. <meta name="text:link1 URL" content="/">
  98. <meta name="text:Link2" content="Link2">
  99. <meta name="text:link2 URL" content="/">
  100. <meta name="text:Link3" content="Link3">
  101. <meta name="text:link3 URL" content="/">
  102. <meta name="text:Link4" content="">
  103. <meta name="text:link4 URL" content="/">
  104. <meta name="text:Link5" content="">
  105. <meta name="text:link5 URL" content="/">
  106.  
  107.  
  108. <link rel="shortcut icon" href="{Favicon}">
  109.  
  110.  
  111. <link rel="stylesheet" href="https://static.tumblr.com/xbvpdcx/58Ro6ymkf/centurygothic.css">
  112.  
  113. <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
  114.  
  115. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  116. <!--
  117. <script type="text/javascript" src="https://dl.dropboxusercontent.com/s/50606hpqv30pt7m/jquery.square_menu.js"></script>
  118. -->
  119.  
  120. <script type="text/javascript" src="https://static.tumblr.com/xbvpdcx/Z9mp1z4j7/square-menu.js"></script>
  121.  
  122.  
  123. <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
  124.  
  125. <script type="text/javascript">
  126. $(document).ready( function() {
  127. $(".sidemenu").square_menu({
  128. flyDirection: "bottom",
  129. animationStyle: "vertical",
  130. button: false,
  131. });
  132.  
  133. $(".open-menu").click(function() {
  134. $(".sidemenu").openMenu();
  135. });
  136. });
  137. </script>
  138.  
  139. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  140.  
  141. <!-- animsition.css -->
  142. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  143.  
  144. <!-- animsition.js -->
  145. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  146.  
  147. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  148. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  149.  
  150. <script>
  151. $(document).ready(function() {
  152.  
  153. $(".animsition").animsition({
  154. inClass: 'fade-in',
  155. outClass: 'fade-out',
  156. inDuration: 1500,
  157. outDuration: 800,
  158. linkElement: '.a-link',
  159. loading: true,
  160. loadingParentElement: 'body',
  161. loadingClass: 'animsition-loading',
  162. loadingInner: '',
  163. timeout: true,
  164. timeoutCountdown: 200,
  165. onLoadEvent: true,
  166. browser: [ 'animation-duration', '-webkit-animation-duration'],
  167. overlay : false,
  168. overlayClass : 'animsition-overlay-slide',
  169. overlayParentElement : 'body',
  170. transition: function(url){ window.location.href = url; }
  171. });
  172.  
  173. $('.photo-slideshow').pxuPhotoset({
  174. lightbox: true,
  175. rounded: false,
  176. gutter: '0px',
  177. borderRadius: '0px',
  178. photoset: '.photo-slideshow',
  179. photoWrap: '.photo-data',
  180. photo: '.pxu-photo'
  181. });
  182.  
  183. $(function() {
  184. $('.captions a').addClass('a-link');
  185. });
  186.  
  187.  
  188. });
  189.  
  190. </script>
  191.  
  192. <link href="https://static.tumblr.com/xbvpdcx/rk6o68ue4/squaremenu.css" rel="stylesheet" type="text/css"/>
  193.  
  194.  
  195. <style type="text/css">
  196.  
  197. /*Tumblr Controls*/
  198. .tmblr-iframe{
  199. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  200. -webkit-transform:scale(0.8);
  201. -webkit-transform-origin:right;
  202. -moz-transform:scale(0.8);
  203. -moz-transform-origin:right;
  204. -o-transform:scale(0.8);
  205. -o-transform-origin:right;
  206. -ms-transform:scale(0.8);
  207. -ms-transform-origin:right;
  208. transform:scale(0.8);
  209. transform-origin:right;
  210.  
  211. }
  212.  
  213.  
  214. .animsition-loading {display:none;}
  215.  
  216.  
  217. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  218. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  219. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  220. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  221.  
  222.  
  223. *,
  224. *::before,
  225. *::after {
  226. box-sizing: inherit;
  227. -webkit-box-sizing: inherit;
  228. -moz-box-sizing: inherit;
  229. }
  230.  
  231. html {
  232. box-sizing: border-box;
  233. -webkit-box-sizing: border-box;
  234. -moz-box-sizing: border-box;
  235. }
  236.  
  237. ::selection {background:#fafafa; color:#000;}
  238. ::-moz-selection {background:#fafafa;color:#000;}
  239. ::-webkit-selection {background:#fafafa;color:#000;}
  240.  
  241. ::-webkit-scrollbar {
  242. width:12px;
  243. background:inherit;
  244. }
  245.  
  246. ::-webkit-scrollbar:horizontal {display:none;}
  247.  
  248. ::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:5px solid #fff; }
  249.  
  250. #s-m-t-tooltip{
  251. position:absolute;
  252. margin-top: 10px!important;
  253. z-index:9999999999;
  254. padding:2px 5px 2px 5px;
  255. color:#5f5f5f;
  256. font-weight:300;
  257. max-width:500px;
  258. font-size:80%;
  259. letter-spacing:1.5px;
  260. background: #fff;
  261. border-left:2px solid {color:highlight};
  262. font-size:12px;
  263. text-transform:uppercase;
  264.  
  265. }
  266.  
  267. body {
  268.  
  269. font-family:'century gothic';
  270. font-size:{select:font size};
  271. font-weight:300;
  272. line-height:160%;
  273. color:#5f5f5f;
  274.  
  275. }
  276.  
  277. a {
  278. text-decoration:none;
  279. cursor:help;
  280. color:#ababab;
  281. -webkit-transition: all 0.3s ease-in-out;
  282. transition:all 0.3s ease-in-out;
  283. }
  284.  
  285. a:hover
  286. {
  287. color:{color:highlight};
  288. -webkit-transition: all 0.3s ease-in-out;
  289. transition:all 0.3s ease-in-out;
  290. }
  291.  
  292. #content a:focus, #content a:active {color:{color:highlight};}
  293.  
  294. b, strong {font-weight:bold;}
  295. i, em {font-style:italic;}
  296.  
  297. pre {
  298. white-space: pre-wrap;
  299. white-space: -moz-pre-wrap;
  300. white-space: -pre-wrap;
  301. white-space: -o-pre-wrap;
  302. word-wrap: break-word;
  303. background:#fafafa;
  304. padding:5px;
  305. }
  306.  
  307.  
  308.  
  309.  
  310. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  311.  
  312.  
  313.  
  314.  
  315. /*sidebar*/
  316. #sidebar {
  317. width:400px;
  318. height:100%;
  319. position:fixed;
  320. top:0;
  321. left:0;
  322. z-index:10;
  323. display: -webkit-box;
  324. display: -webkit-flex;
  325. display: -ms-flexbox;
  326. display: flex;
  327. -webkit-box-align:center;
  328. -webkit-align-items:center;
  329. -ms-flex-align:center;
  330. align-items:center;
  331. -webkit-box-pack: center;
  332. -webkit-justify-content: center;
  333. -ms-flex-pack: center;
  334. justify-content: center;
  335. -webkit-box-orient:vertical;
  336. -webkit-box-direction:normal;
  337. -webkit-flex-direction:column;
  338. -ms-flex-direction:column;
  339. flex-direction:column;
  340. -webkit-transition: all 0.3s ease-in-out;
  341. transition:all 0.3s ease-in-out;
  342.  
  343. }
  344.  
  345. body.simple_sch #sidebar {background:#fafafa;}
  346. body.colour_sch #sidebar {background:{color:accent};}
  347. body.grad_sch #sidebar {
  348. background: -webkit-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  349. background: -moz-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  350. background: -ms-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  351. background: -o-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  352. background: linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  353. }
  354. body.white_sch #sidebar {background:#fff;}
  355.  
  356. #sbinfo {
  357. font-size:120%;
  358. line-height:160%;
  359. color:#5f5f5f;
  360. text-transform:uppercase;
  361. letter-spacing:1.2px;
  362. text-align:center;
  363. font-weight:100;
  364. max-width:250px;
  365. margin-bottom:5px;
  366. -webkit-transition: all 0.3s ease-in-out;
  367. transition:all 0.3s ease-in-out;
  368. }
  369.  
  370.  
  371. #sbimg {
  372. border-radius:5%;
  373. background:#fff;
  374. position:relative;
  375. width:120px;
  376. height:120px;
  377. padding:5px;
  378. -webkit-transition: all 0.3s ease-in-out;
  379. transition:all 0.3s ease-in-out;
  380. position:relative;
  381. line-height:0;
  382. font-size:0;
  383.  
  384. }
  385.  
  386. body.white_sch #sbimg {background:#fafafa;}
  387.  
  388. #sbimg img {
  389. width:100%;
  390. height:100%;
  391. position:relative;
  392. opacity:1;
  393. display:inline;
  394. -webkit-transition: all 0.3s ease-in-out;
  395. transition:all 0.3s ease-in-out;
  396. }
  397.  
  398. #sbimg a {
  399. position:absolute;
  400. width:100%;
  401. height:100%;
  402. top:0;
  403. left:0;
  404. }
  405.  
  406. #sbimg:hover img {
  407. opacity:0.7;
  408. -webkit-transition: all 0.3s ease-in-out;
  409. transition:all 0.3s ease-in-out;
  410. }
  411.  
  412.  
  413. #sbnav {
  414. width:120px;
  415. margin:5px auto;
  416. -webkit-transition: all 0.3s ease-in-out;
  417. transition:all 0.3s ease-in-out;
  418. }
  419.  
  420. #sbnav a {
  421. width:100%;
  422. display:block;
  423. margin-top:5px;
  424. text-align:center;
  425. padding:5px;
  426. line-height:160%;
  427. letter-spacing: 1.2px;
  428. font-size:100%;
  429. color:#7f7f7f;
  430. background:#fff;
  431. text-transform:uppercase;
  432. -webkit-transition: all 0.3s ease-in-out;
  433. transition:all 0.3s ease-in-out;
  434. }
  435.  
  436. body.white_sch #sbnav a {background:#fafafa;}
  437.  
  438. #sbnav a:hover {
  439. color:{color:highlight};
  440. -webkit-transition: all 0.3s ease-in-out;
  441. transition:all 0.3s ease-in-out;
  442. }
  443.  
  444. /*Navi Menu customisation*/
  445. .sm-menu .sm-nav:nth-child(2) .nav-inner > a:hover{
  446. color: {color:highlight};
  447. }
  448.  
  449. /*Navi Menu Desc*/
  450. img.menuprof {width:250px;}
  451.  
  452. /*content*/
  453.  
  454. section#content {
  455. position:relative;
  456. font-family: 'Lora', serif;
  457. line-height:calc({select:font size} * 2);
  458. font-weight:400;
  459. -webkit-font-smoothing: antialiased;
  460. -moz-osx-font-smoothing: grayscale;
  461. margin:30px auto;
  462. left:8%;
  463. -webkit-transition: all 0.3s ease-in-out;
  464. transition:all 0.3s ease-in-out;
  465. }
  466.  
  467. body.post500 section#content {width:500px;}
  468. body.post540 section#content {width:540px;}
  469. body.post450 section#content {width:450px;}
  470. body.post400 section#content {width:400px;}
  471.  
  472. main#entries {
  473. width:100%;
  474. display:block;
  475. margin-bottom:calc({select:post spacing} / 2);
  476. }
  477.  
  478. /*posts*/
  479. article.posts {
  480. width:100%;
  481. margin:{select:post spacing} auto;
  482. position:relative;
  483. text-align:justify;
  484. }
  485.  
  486. article.posts:first-of-type {
  487. margin-top:0px;
  488. }
  489.  
  490.  
  491. .posts h1 {font-size:calc({select:font size} * 2);}
  492. .posts h1:not(.plink):first-letter{border-bottom:3px solid {color:highlight};}
  493. .posts h2 {font-size:calc({select:font size} * 1.5);}
  494.  
  495. .posts ol, .posts ul {
  496. list-style: none;
  497. margin-top: 0;
  498. padding-left: 0;
  499. }
  500. .posts ol {
  501. list-style: decimal inside;
  502. }
  503.  
  504. .posts ul {
  505. list-style: circle inside;
  506. }
  507.  
  508. .posts li {margin-bottom:calc({select:font size} / 2);}
  509.  
  510. .posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  511. margin:{select:font size} 0 {select:font size} 0;
  512. }
  513.  
  514. article.posts .captions {word-wrap:break-word;}
  515.  
  516. .captions *:not(ul):not(li):not(ol):not(h2):not(figure) {font-size:inherit;}
  517.  
  518. .captions a, span.qsource a, .ask_cont span a {
  519. border-bottom:1px solid #eaeaea;
  520. -webkit-transition: all 0.3s ease-in-out;
  521. transition:all 0.3s ease-in-out;
  522. }
  523.  
  524. .captions a:hover, span.qsource a:hover, .ask_cont span a:hover {
  525. color:{color:highlight};
  526. border-bottom:1px solid {color:highlight};
  527. -webkit-transition: all 0.3s ease-in-out;
  528. transition:all 0.3s ease-in-out;
  529. }
  530.  
  531. .posts img.photop {display:block;line-height:0;}
  532.  
  533. .unnested .posts img.photop {margin-bottom:{select:font size};}
  534.  
  535. .posts video, .posts .tumblr_video_container {
  536. width: 100% !important;
  537. height: auto !important;
  538. }
  539.  
  540. {block:ifinfinitescroll}
  541. .posts {
  542. -webkit-animation:fadeIn ease-in 1s;
  543. -o-animation:fadeIn ease-in 1s;
  544. -moz-animation:fadeIn ease-in 1s;
  545. animation:fadeIn ease-in 1s;
  546. }
  547. {/block:ifinfinitescroll}
  548.  
  549. body.defcap .captions blockquote {
  550. border-left: 1px #eaeaea solid;
  551. padding-left: calc({select:font size} * 2);
  552. margin-left: 10px;
  553. max-width: 100%;
  554. margin:0;
  555. }
  556.  
  557.  
  558. body.defcap .captions blockquote blockquote {
  559. padding: 0 0 0 0;
  560. margin: 0 0 0 0;
  561. border-left:none;
  562.  
  563. }
  564.  
  565. .captions figure {
  566. margin:calc({select:font size} * 2) 0;
  567. }
  568.  
  569. blockquote.tumblr_parent {
  570. max-width:100%;
  571. margin:0;
  572. }
  573.  
  574. .tumblr_parent blockquote {
  575. padding: 0 0 0 calc({select:font size} * 2);
  576. margin: 0 0 0 0;
  577. border-left:1px {color:accent} solid;
  578. }
  579.  
  580. .tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}
  581.  
  582. .unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a):not(span) {vertical-align:middle;}
  583.  
  584. img.tumblr_avatar {border-radius:5%;margin-right:12px;margin-top:8px;margin-bottom:8px;width:36px;height:36px;}
  585.  
  586. img.tumblr_avatar + a.tumblr_blog {
  587. font-weight:bold;
  588. vertical-align:middle;
  589. text-transform:uppercase;
  590. letter-spacing:1.2px;
  591. color:inherit;
  592. border-bottom:1px solid #5f5f5f;
  593. -webkit-transition: all 0.3s ease-in-out;
  594. transition:all 0.3s ease-in-out;
  595. }
  596.  
  597. h1.plink a {
  598. color:inherit;
  599. border-bottom:1px solid #5f5f5f;
  600. }
  601.  
  602. img.tumblr_avatar + a:hover.tumblr_blog, h1.plink a:hover {
  603. color:{color:accent};
  604. border-bottom:1px solid {color:accent};
  605. -webkit-transition: all 0.3s ease-in-out;
  606. transition:all 0.3s ease-in-out;
  607. }
  608.  
  609. blockquote.tumblr_parent .captions.txtps p:first-child:not(:empty){margin-top:0;}
  610.  
  611. div.ask_cont {
  612. padding-bottom:calc({select:font size} * 2);
  613. border-bottom:1px solid {color:accent};
  614. margin-bottom:calc({select:font size} * 2);
  615. }
  616.  
  617. div.ask_cont span {font-weight:bold;}
  618.  
  619.  
  620. a.read_more {
  621. color:inherit;
  622. font-style:italic;
  623. font-weight:bold;
  624. font-size:calc({select:font size} * 1.5) !important;
  625. border-bottom:1px solid #5f5f5f;
  626. }
  627.  
  628. /*chats*/
  629. ul.chatlines {list-style:none;}
  630. li.clines {padding:8px;margin-top:0;margin-bottom:0;}
  631. .chatlines li.odd {background:#fafafa;}
  632.  
  633. /*quotes*/
  634.  
  635. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin-bottom:0;font-weight:400;}
  636.  
  637. h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}
  638.  
  639. h1.qshort {line-height:140%;font-size:calc({select:font size} * 2);}
  640. h1.qmedium, h1.qlong {line-height:160%;}
  641.  
  642. h1.qmedium {font-size:calc({select:font size} * 1.5);}
  643.  
  644. h1.qlong {font-size:calc({select:font size} * 1.2);}
  645.  
  646. span.qsource {width:100%;display:block;text-align:right;margin-top:16px;}
  647.  
  648. /*lightbox*/
  649. #tumblr_lightbox,.tmblr-lightbox {background:#fafafa!important;}
  650.  
  651.  
  652. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  653. opacity:0;
  654. -webkit-box-shadow:none!important;
  655. box-shadow:none!important;
  656. }
  657.  
  658. #tumblr_lightbox_center_image {
  659. opacity: 1!important;
  660. background-color: #fff!important;
  661. }
  662.  
  663. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  664. -webkit-transition: all 0.3s ease-in-out;
  665. transition:all 0.3s ease-in-out;
  666. }
  667.  
  668. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  669. opacity:1!important;
  670. -webkit-transition: all 0.3s ease-in-out;
  671. transition:all 0.3s ease-in-out;
  672. }
  673.  
  674.  
  675. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  676. box-shadow: 0 0 0 transparent !important;
  677. }
  678.  
  679. #tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  680. border-radius:0!important;
  681. -moz-border-radius: 0!important;
  682. -webkit-border-radius: 0!important;
  683. -o-border-radius: 0!important;
  684. background:#fff !important;
  685. padding:{select:photoset gutter} !important;
  686. }
  687.  
  688.  
  689.  
  690. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  691.  
  692. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  693. .photo-slideshow .count-1 {
  694. margin-bottom:{select:photoset gutter}!important;
  695. }
  696.  
  697.  
  698. .photo-slideshow .count-2 {
  699. margin-left:{select:photoset gutter}!important;
  700. margin-bottom:{select:photoset gutter}!important;
  701. width:calc(50% - ({select:photoset gutter}/2))!important;
  702. }
  703.  
  704. .photo-slideshow .count-2:first-child {
  705. margin-left:0!important;
  706. }
  707.  
  708. .photo-slideshow .count-3 {
  709. margin-left:{select:photoset gutter}!important;
  710. margin-bottom:{select:photoset gutter}!important;
  711. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  712. }
  713.  
  714. .photo-slideshow .count-3:first-child {
  715. margin-left:0!important;
  716. }
  717. .photo-slideshow {
  718. display:block!important;
  719. margin-bottom:calc(-({select:photoset gutter} - 3px));
  720. position:relative;
  721. width:100%;
  722. }
  723.  
  724. .defcap .photo-slideshow.processed {margin-bottom:0!important;}
  725.  
  726. .defcap .row:last-of-type .count-1 {margin-bottom:0!important;}
  727.  
  728. .unnested .photo-slideshow.processed {margin-bottom:calc({select:font size} * (2/3)) !important;}
  729.  
  730. .unnested .photo-slideshow.processed .row:last-of-type .count-1 {margin-bottom:0!important;}
  731.  
  732. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  733.  
  734. /*audio posts*/
  735. .flitwick {
  736. font-size:90%;
  737. width:100%;
  738. display:flex;
  739. display:-webkit-flex;
  740. display:-moz-flex;
  741. display:-ms-flex;
  742. align-items:center;
  743. -webkit-align-items:center;
  744. -moz-align-items:center;
  745. -ms-align-items:center;
  746. display: -webkit-box;
  747. -webkit-box-align: center;
  748. position:relative;
  749. }
  750.  
  751. .unnested .flitwick {margin-bottom:calc({select:font size} * (2/3));}
  752.  
  753. .grammy {
  754. position:relative;
  755. margin-left:0;
  756. width:100px;
  757. height:100px;
  758. }
  759.  
  760.  
  761. .mariah {
  762. position:absolute;
  763. background:#fff;
  764. z-index:10;
  765. opacity:0;
  766. text-align:center;
  767. width:80px;
  768. height:80px;
  769. margin-top:10px;
  770. margin-left:10px;
  771. -webkit-transition: all 0.3s ease-in-out;
  772. transition:all 0.3s ease-in-out;
  773. }
  774.  
  775.  
  776. .mariah:hover {
  777. opacity:0.8;
  778. -webkit-transition: all 0.3s ease-in-out;
  779. transition:all 0.3s ease-in-out;
  780. }
  781.  
  782. .playbox {
  783. overflow:hidden;
  784. width:40px;
  785. height:40px;
  786. margin-top:25px;
  787. margin-left:20px;
  788. }
  789.  
  790.  
  791.  
  792. .taylor {
  793. padding:0;
  794. margin-left:0px;
  795. background:#fafafa;
  796. display:flex;
  797. display:-webkit-flex;
  798. display:-moz-flex;
  799. display:-ms-flex;
  800. align-items:center;
  801. -webkit-align-items:center;
  802. -moz-align-items:center;
  803. -ms-align-items:center;
  804. justify-content:center;
  805. -webkit-justify-content:center;
  806. -moz-justify-content:center;
  807. -ms-justify-content:center;
  808. display: -webkit-box;
  809. -webkit-box-align: center;
  810. -webkit-box-pack:center;
  811. width:calc(100% - 100px);
  812. height:100px;
  813. }
  814.  
  815.  
  816. .swift {
  817. font-weight:normal;
  818. text-overflow: ellipsis;
  819. white-space: nowrap;
  820. overflow:hidden;
  821. max-width:calc(100% - 50px);
  822. line-height:2;
  823. }
  824.  
  825.  
  826.  
  827. .swift b {font-weight:bold;}
  828.  
  829. div.post_footer {
  830. margin-top:calc({select:font size} * 1.5);
  831. font-family:'century gothic',sans-serif;
  832. text-transform:uppercase;
  833. letter-spacing:1.2px;
  834. display:-webkit-box;
  835. display:-ms-flexbox;
  836. display:flex;
  837. -ms-flex-pack:justify;
  838. justify-content:space-between;
  839. }
  840.  
  841. div.datesourcetag {
  842. display:-webkit-box;
  843. display:-ms-flexbox;
  844. display:flex;
  845. align-items:center;
  846. -webkit-align-items:center;
  847. -moz-align-items:center;
  848. -ms-align-items:center;
  849. }
  850.  
  851. div.datesourcetag > span + span {
  852. margin-left:20px;
  853. }
  854.  
  855. span.dtls:first-of-type {margin-left:0;}
  856.  
  857.  
  858. .tags {
  859. {block:indexpage}
  860. display:none;
  861. {/block:indexpage}
  862. width:100%;
  863. margin-top:calc({select:font size}/2);
  864. font-style:italic;
  865. word-wrap:break-word;
  866. }
  867.  
  868. .tags a {
  869. display:inline;
  870. margin-left:8px;
  871. }
  872.  
  873. .tags a:first-of-type {margin-left:0;}
  874.  
  875. div.socs {
  876. display:-webkit-box;
  877. display:-ms-flexbox;
  878. display:flex;
  879. display:-webkit-flex;
  880. display:-moz-flex;
  881. display:-ms-flex;
  882. -webkit-box-align:center;
  883. -ms-flex-align:center;
  884. align-items:center;
  885. -webkit-align-items:center;
  886. -moz-align-items:center;
  887. -ms-align-items:center;
  888. margin-left:auto;
  889. }
  890.  
  891. div.soc_obj {
  892. margin-left:8px;
  893. }
  894.  
  895. .custom-like-button {
  896. position: relative;
  897. display: block;
  898. width: {select:font size};
  899. height: {select:font size};
  900. }
  901.  
  902. /* class for the Tumblr Like Button iframe */
  903. .like_button {
  904. position: absolute;
  905. cursor:pointer;
  906. top: 0;
  907. left: 0;
  908. right: 0;
  909. bottom: 0;
  910. width: 100%;
  911. height: 100%;
  912. opacity: 0;
  913. z-index: 3;
  914. }
  915. /* Force iframe to fill button */
  916. .like_button iframe {
  917. width: 100% !important;
  918. height: 100% !important;
  919. }
  920. /* class for Our Like Button */
  921. .our_button {
  922. position: absolute;
  923. margin-top:calc(-{select:font size}/2);
  924. top: 0;
  925. left: 0;
  926. right: 0;
  927. bottom: 0;
  928. width: 100%;
  929. height: 100%;
  930. z-index: 1;
  931. }
  932.  
  933. .our_button span {color:#ababab;}
  934.  
  935. .like_button:hover + .our_button span, .like_button.liked + .our_button span {
  936. color:red;
  937. -webkit-transition: all 0.3s ease-in-out;
  938. transition:all 0.3s ease-in-out;
  939. }
  940.  
  941. .posts .lnr {width:100%;height:100%;}
  942.  
  943. /*pagination*/
  944. .pg {
  945. {block:ifinfinitescroll}
  946. display:none;
  947. {/block:ifinfinitescroll}
  948.  
  949. margin:auto;
  950. margin-top:calc(-{select:post spacing} / 2);
  951. margin-bottom:calc({select:post spacing} / 2);
  952. width:100%;
  953. color:inherit;
  954. text-transform:uppercase;
  955. letter-spacing:1.5px;
  956. background:transparent;
  957. text-align:center;
  958. word-spacing:20px;
  959. }
  960.  
  961. .pg a {
  962. display:inline-block;
  963. color:inherit;
  964. border-bottom:1px solid #eaeaea;
  965. }
  966.  
  967. .pg a:hover {
  968. color:{color:highlight};
  969. border-bottom:1px solid {color:highlight};
  970. }
  971.  
  972. .pg a.arrs {border-bottom:none!important;}
  973.  
  974.  
  975. .pg a:hover {
  976. color:{color:highlight};
  977. }
  978.  
  979.  
  980. .pg > * + * {margin:6px;}
  981.  
  982. #infscr-loading {display:none !important;}
  983.  
  984.  
  985. .bottom {display:block;text-align:center;text-transform:uppercase;margin-bottom:calc({select:post spacing} / 2);}
  986. a.append {
  987. padding-bottom:2px;
  988. cursor:help;
  989. letter-spacing:1.2px;
  990. color:inherit;
  991. border-bottom:1px solid #eaeaea;
  992. font-weight:bold;
  993. }
  994.  
  995. a.append:hover {
  996. color:{color:highlight};
  997. border-bottom:1px solid {color:highlight};
  998.  
  999. }
  1000.  
  1001. /*Grid notes*/
  1002. .grid_notes .postnotes *{ margin:0; padding:0; }
  1003.  
  1004. .grid_notes .postnotes { text-align: center; }
  1005.  
  1006. .grid_notes ol.notes {margin-top:calc({select:font size} * 2);}
  1007.  
  1008. .grid_notes .postnotes li{ list-style-type:none; display:inline-block; width:calc({select:font size} * 2); height:calc({select:font size} * 2); margin:5px; overflow:hidden; }
  1009.  
  1010. .grid_notes .postnotes img{ width:calc({select:font size} * 2); height:calc({select:font size} * 2); border-radius:5%;}
  1011.  
  1012. .grid_notes li.more_notes_link_container{
  1013. width:100%!important;
  1014. }
  1015.  
  1016. /*def notes*/
  1017.  
  1018. h1.notehead {font-size:140%;margin:calc({select:font size}) 0 calc({select:font size} * 2) 0;border-bottom:none!important;}
  1019.  
  1020. .def_notes h1.notehead {margin-left:calc({select:font size}/3);}
  1021.  
  1022. .def_notes .postnotes ol.notes {list-style:none;margin:0;padding-left:5px;}
  1023.  
  1024. .def_notes .postnotes ol.notes li.note {
  1025. display:flex;
  1026. display:-webkit-flex;
  1027. display:-moz-flex;
  1028. display:-ms-flex;
  1029. align-items:center;
  1030. -webkit-align-items:center;
  1031. -moz-align-items:center;
  1032. -ms-align-items:center;
  1033. margin:{select:font size} 0 {select:font size} 0;
  1034. }
  1035.  
  1036. .def_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}
  1037.  
  1038. .def_notes .postnotes li.note:last-of-type {margin-bottom:8px;}
  1039.  
  1040. .def_notes .postnotes ol.notes li.note a.avatar_frame {height:48px;margin-right:{select:font size};}
  1041.  
  1042.  
  1043. .def_notes .postnotes ol.notes li.note img.avatar {
  1044. border-radius:5%;
  1045. width:48px;
  1046. height:48px;
  1047. opacity:1;
  1048. -webkit-transition: all 0.3s ease-in-out;
  1049. transition:all 0.3s ease-in-out;
  1050. }
  1051.  
  1052. .def_notes .postnotes ol.notes li.note img.avatar:hover {
  1053. opacity:0.7;
  1054. -webkit-transition: all 0.3s ease-in-out;
  1055. transition:all 0.3s ease-in-out;
  1056. }
  1057.  
  1058. .def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 70px);}
  1059.  
  1060. .def_notes .postnotes li.with_commentary blockquote {
  1061. display:none;
  1062. }
  1063.  
  1064.  
  1065. li.note span.action a {
  1066. color:inherit;
  1067. border-bottom:1px solid #eaeaea;
  1068. -webkit-transition: all 0.3s ease-in-out;
  1069. transition:all 0.3s ease-in-out;
  1070. }
  1071.  
  1072.  
  1073. li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
  1074. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a {
  1075. font-size:calc({select:font size} * 1.2);
  1076. margin:auto;
  1077. cursor:help;
  1078. color:inherit;
  1079. }
  1080.  
  1081. li.more_notes_link_container a:hover {color:{color:highlight};}
  1082.  
  1083. li.note span.action a:hover{
  1084. color:{color:highlight};
  1085. border-bottom:1px solid {color:highlight};
  1086. -webkit-transition: all 0.3s ease-in-out;
  1087. transition:all 0.3s ease-in-out;
  1088. }
  1089.  
  1090. /*Media Queries*/
  1091.  
  1092. img.menuprof {
  1093. -webkit-transition: all 0.3s ease-in-out;
  1094. transition:all 0.3s ease-in-out;
  1095. }
  1096.  
  1097. @media screen and (max-width: 1400px) {
  1098.  
  1099. #sidebar {
  1100. width:300px;
  1101. -webkit-transition: all 0.3s ease-in-out;
  1102. transition:all 0.3s ease-in-out;
  1103. }
  1104.  
  1105. }
  1106.  
  1107. @media screen and (max-width: 1200px) {
  1108.  
  1109. #sbinfo {
  1110. font-size:100%;
  1111. -webkit-transition: all 0.3s ease-in-out;
  1112. transition:all 0.3s ease-in-out;
  1113. }
  1114. #sidebar {
  1115. width:250px;
  1116. -webkit-transition: all 0.3s ease-in-out;
  1117. transition:all 0.3s ease-in-out;
  1118. }
  1119. #sbimg {
  1120. width:100px;
  1121. height:100px;
  1122. -webkit-transition: all 0.3s ease-in-out;
  1123. transition:all 0.3s ease-in-out;
  1124. }
  1125. #sbnav {
  1126. margin-top:0;
  1127. width:100px;
  1128. -webkit-transition: all 0.3s ease-in-out;
  1129. transition:all 0.3s ease-in-out;
  1130. }
  1131. #sbnav a {
  1132. font-size:80%;
  1133. -webkit-transition: all 0.3s ease-in-out;
  1134. transition:all 0.3s ease-in-out;
  1135. }
  1136.  
  1137. .sm-menu {
  1138. width: 800px;
  1139. height: 450px;
  1140. margin-left: -400px;
  1141. margin-top: -225px;
  1142. }
  1143.  
  1144.  
  1145. }
  1146.  
  1147. @media screen and (max-width: 1000px) {
  1148.  
  1149. section#content {
  1150. left:14%;
  1151. -webkit-transition: all 0.3s ease-in-out;
  1152. transition:all 0.3s ease-in-out;
  1153. }
  1154. }
  1155.  
  1156.  
  1157. @media screen and (max-width: 800px) {
  1158.  
  1159. .sm-menu {
  1160. width:80%;
  1161. height:45%;
  1162. margin-left:-40%;
  1163. margin-top:-22.5%;
  1164. }
  1165.  
  1166. img.menuprof {
  1167. width:160px;
  1168. -webkit-transition: all 0.3s ease-in-out;
  1169. transition:all 0.3s ease-in-out;
  1170. }
  1171. }
  1172.  
  1173.  
  1174. body.colour_sch .sm-overlay {background:{color:accent};}
  1175. body.grad_sch .sm-overlay {
  1176. background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  1177. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  1178. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  1179. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  1180. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  1181. }
  1182.  
  1183. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1184. #leo {
  1185.  
  1186. font-family: Arial, Sans-Serif;
  1187. text-transform:uppercase;
  1188. text-align:center;
  1189. z-index:99;
  1190. box-sizing:content-box;
  1191. -webkit-box-sizing:content-box;
  1192. -moz-box-sizing:content-box;
  1193.  
  1194. }
  1195.  
  1196. #leo a {
  1197. z-index:99;
  1198. position:fixed;
  1199. font-size:12px;
  1200. line-height:16px;
  1201. width:18px;
  1202. height:18px;
  1203. font-weight:300;
  1204. bottom:10px;
  1205. right:5px;
  1206. color:#000;
  1207. background:rgba(255,255,255,0.4);
  1208. padding:5px;
  1209. transition: all 1s ease-in-out;
  1210. -webkit-transition: all 1s ease-in-out;
  1211. -o-transition: all 1s ease-in-out;
  1212. -moz-transition: all 1s ease-in-out;
  1213. box-sizing:content-box;
  1214. -webkit-box-sizing:content-box;
  1215. -moz-box-sizing:content-box;
  1216. }
  1217.  
  1218. #leo a:hover {
  1219. background-color:rgba(0,0,0,1);
  1220. color:#fff;
  1221. border-radius:50%;
  1222. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1223. -moz-animation: hermione 1s;
  1224. -o-animation: hermione 1s;
  1225. animation: hermione 1s;
  1226. animation-timing-function: ease-in-out;
  1227. -webkit-animation-timing-function: ease-in-out;
  1228. -moz-animation-timing-function: ease-in-out;
  1229. -o-animation-timing-function: ease-in-out;
  1230.  
  1231. -moz-transform: rotate(720deg); /* IE 9 */
  1232. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1233. transform: rotate(720deg);
  1234.  
  1235. transition: all 1s ease-in-out;
  1236. -webkit-transition: all 1s ease-in-out;
  1237. -o-transition: all 1s ease-in-out;
  1238. -moz-transition: all 1s ease-in-out;
  1239.  
  1240.  
  1241. }
  1242.  
  1243. @-webkit-keyframes hermione {
  1244. 0% {color:#000;}
  1245. 25% {color:#ACE4EA;}
  1246. 50% {color:#FFFBDD;}
  1247. 75% {color:#ACE4EA;}
  1248. 100% {color:#fff;}
  1249. }
  1250. @-moz-keyframes hermione {
  1251. 0% {color:#000;}
  1252. 25% {color:#ACE4EA;}
  1253. 50% {color:#FFFBDD;}
  1254. 75% {color:#ACE4EA;}
  1255. 100% {color:#fff;}
  1256. }
  1257. @-o-keyframes hermione {
  1258. 0% {color:#000;}
  1259. 25% {color:#ACE4EA;}
  1260. 50% {color:#FFFBDD;}
  1261. 75% {color:#ACE4EA;}
  1262. 100% {color:#fff;}
  1263. }
  1264.  
  1265. @keyframes hermione {
  1266. 0% {color:#000;}
  1267. 25% {color:#ACE4EA;}
  1268. 50% {color:#FFFBDD;}
  1269. 75% {color:#ACE4EA;}
  1270. 100% {color:#fff;}
  1271. }
  1272. /*END OF CREDIT*/
  1273.  
  1274.  
  1275. </style>
  1276.  
  1277. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1278.  
  1279. <script>
  1280.  
  1281. $(function(){ $('.unnested .posts').unnest({
  1282. yourCaption: ".captions", //your caption selector, the div wrapping
  1283. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1284. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1285. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1286. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1287. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1288. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1289. }); });
  1290.  
  1291. </script>
  1292.  
  1293. {block:indexpage}
  1294. {block:ifinfinitescroll}
  1295. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  1296.  
  1297. <script>
  1298.  
  1299. // Infinite Scroll
  1300. $(function() {
  1301.  
  1302. var $container = $('#entries');
  1303. $container.infinitescroll({
  1304.  
  1305. loading: {
  1306. finishedMsg: "<em>No more posts</em>",
  1307. img: null,
  1308. msg: null,
  1309. msgText: "<em>Loading posts...</em>",
  1310. {block:ifmanualload}
  1311. finished: function () {$('.append').text('Load More'); },
  1312. {/block:ifmanualload}
  1313.  
  1314. },
  1315.  
  1316. navSelector : '.pg',
  1317. nextSelector : '.pg a:last',
  1318. itemSelector : '.posts',
  1319. {block:ifmanualload}
  1320. errorCallback: function () {$('.append').fadeOut();},
  1321. {/block:ifmanualload}
  1322. bufferPx : 200,
  1323.  
  1324. },
  1325.  
  1326. function( newElements ) {
  1327. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  1328. lightbox: true,
  1329. rounded: true,
  1330. gutter: '0px',
  1331. borderRadius: '0px',
  1332. photoset: '.photo-slideshow',
  1333. photoWrap: '.photo-data',
  1334. photo: '.pxu-photo'
  1335. });
  1336.  
  1337.  
  1338. var $newElems = $(newElements);
  1339. var $newElemsIDs = $newElems.map(function(){
  1340. return this.id;
  1341. }).get();
  1342. console.log($newElems, $newElemsIDs);
  1343. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1344.  
  1345. {block:ifunnestedcaptions}
  1346. $newElems.unnest({
  1347.  
  1348. yourCaption: ".captions",
  1349. wrapName: ".tumblr_parent",
  1350. newCaptionUsername: false,
  1351. originalPostCaptionUsername: false,
  1352. tumblrAvatars: true,
  1353. tumblrAvatarClass: ".tumblr_avatar",
  1354. usernameColon: false
  1355.  
  1356. });
  1357.  
  1358. {/block:ifunnestedcaptions}
  1359.  
  1360. $( newElements ).find('.togglet').click(function(){
  1361.  
  1362. $(this).closest('.posts').find('div.tags').slideToggle();
  1363. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1364. });
  1365.  
  1366.  
  1367. });
  1368.  
  1369. {block:ifmanualload}
  1370. $container.infinitescroll('unbind');
  1371. $('.append').on('click', function(e) {
  1372. e.preventDefault();
  1373. $container.infinitescroll('retrieve');
  1374. });
  1375. {/block:ifmanualload}
  1376. });
  1377. </script>
  1378. {/block:ifinfinitescroll}
  1379. {/block:indexpage}
  1380.  
  1381. </head>
  1382. <body class="animsition {select:colour scheme} {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display}">
  1383.  
  1384. <div id="sidebar">
  1385. <div id="sbinfo">{text:name}. <span data-typer-targets='{text:info1}, {text:info2}, {text:info3}, {text:info4}, {text:info5}'></span></div>
  1386. <div id="sbimg">
  1387.  
  1388. <img src="{image:profile}">
  1389.  
  1390. <a class="a-link" href="/" title="refresh"></a>
  1391. </div>
  1392. <div id="sbnav">
  1393. <a href="{text:askpage}"class="a-link">Message</a>
  1394. <a class="open-menu">Navigation</a>
  1395. <a href="/archive"class="a-link">Archive</a>
  1396. </div>
  1397. </div>
  1398.  
  1399. <section id="content">
  1400. <main id="entries">
  1401. {block:NoPosts} {/block:NoPosts}
  1402. {block:posts}
  1403. <article class="posts" id="{PostID}">
  1404.  
  1405. <!--Chat-->
  1406. {block:chat}
  1407. {block:title}<h1>{Title}</h1>{/block:title}
  1408. <ul class="chatlines">
  1409. {block:Lines}
  1410. <li class="clines {Alt}">
  1411. {block:Label}<b>{Label}</b>{/block:Label}
  1412. {Line}
  1413. </li>
  1414. {/block:Lines}
  1415. </ul>
  1416. {/block:chat}
  1417. <!--/Chat-->
  1418.  
  1419. <!--Ask post-->
  1420. {block:Answer}
  1421. <div class="ask_cont">
  1422.  
  1423. <span>{Asker}:</span> {Question}
  1424.  
  1425. </div>
  1426. <div class="captions">
  1427. {Answer}
  1428. </div>
  1429. {/block:Answer}
  1430. <!--/Ask post-->
  1431.  
  1432. <!--Text-->
  1433. {block:text}
  1434. {block:title}<h1>{Title}</h1>{/block:title}
  1435. <div class="captions">{body}</div>
  1436. {/block:text}
  1437. <!--Text-->
  1438.  
  1439. <!--Link-->
  1440. {block:link}
  1441. <h1 class="plink"><a href="{URL}">{Name}</a></h1>
  1442. {block:Description}
  1443. <div class="captions">{Description}</div>
  1444. {/block:Description}
  1445. {/block:link}
  1446. <!--/Link-->
  1447.  
  1448. <!--Quote-->
  1449. {block:Quote}
  1450. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  1451.  
  1452. {block:Source}
  1453. <span class="qsource">— {Source}</span>{/block:Source}
  1454. {/block:Quote}
  1455. <!--/Quote-->
  1456.  
  1457. <!--Video-->
  1458. {block:Video}
  1459. {Video-500}
  1460. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1461. {/block:Video}
  1462. <!--/Video-->
  1463.  
  1464.  
  1465. <!--Photo post-->
  1466. {block:photo}
  1467. {LinkOpenTag}
  1468. <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">
  1469. <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">
  1470. </a>
  1471. {LinkCloseTag}
  1472.  
  1473. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1474. {/block:photo}
  1475. <!--/Photo post-->
  1476.  
  1477. <!--Photoset post-->
  1478. {block:Photoset}
  1479. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1480.  
  1481. {block:Photos}
  1482. <div class="photo-data">
  1483. <div class="pxu-photo">
  1484. <img class="pffft" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1485. </div>
  1486. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1487. </div>
  1488. {/block:Photos}
  1489.  
  1490. </div>
  1491.  
  1492. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  1493. {/block:Photoset}
  1494. <!--/Photoset post-->
  1495.  
  1496.  
  1497. <!--Audio post-->
  1498. {block:Audio}
  1499. <div class="flitwick">
  1500.  
  1501. <div class="mariah">
  1502. <div class="playbox">{AudioPlayerWhite}</div>
  1503. </div>
  1504.  
  1505. <div class="grammy">
  1506. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1507. {block:AlbumArt}
  1508. <img src="{AlbumArtURL}" style="position:absolute;">
  1509. {/block:AlbumArt}
  1510. </div>
  1511.  
  1512.  
  1513. <div class="taylor">
  1514. <div class="swift">
  1515. {block:TrackName}
  1516. <b>Song:</b> {TrackName}
  1517. {/block:TrackName}<br>
  1518.  
  1519. {block:Artist}
  1520. <b>Artist:</b> {Artist}
  1521. {/block:Artist}<br>
  1522.  
  1523. {block:Album}
  1524. <b>Album:</b> {Album}
  1525. {/block:Album}
  1526.  
  1527. </div>
  1528. </div>
  1529.  
  1530. </div>
  1531. {block:Caption}
  1532. <div class="captions">{Caption}</div>
  1533. {/block:Caption}
  1534. {/block:Audio}
  1535. <!--/ Audio Post-->
  1536.  
  1537. {block:date}
  1538.  
  1539. <div class="post_footer">
  1540. <div class="datesourcetag">
  1541.  
  1542. <span class="dtls">
  1543. <a class="a-link" title="{TimeAgo}" href="{Permalink}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a> </span>
  1544.  
  1545. <span class="dtls">
  1546. {block:RebloggedFrom}
  1547. <a class="a-link" href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
  1548. {block:ContentSource}
  1549. / <a class="a-link" href="{SourceURL}" title="{ReblogRootName}" target="_blank">src</a>
  1550. {/block:ContentSource}
  1551. {/block:RebloggedFrom}
  1552. </span>
  1553.  
  1554. {block:indexpage}
  1555. {block:HasTags}
  1556. <span class="dtls"><a class="togglet {PostID}" href="javascript:;">tags</a></span>
  1557. {/block:HasTags}
  1558. {/block:indexpage}
  1559.  
  1560. </div>
  1561. <div class="socs">
  1562.  
  1563. <div class="soc_obj">
  1564. <a title="reblog"class="a-link"href="{ReblogURL}"><span class="lnr lnr-sync"></span></a>
  1565. </div>
  1566.  
  1567. <div class="custom-like-button soc_obj">
  1568. {LikeButton size="12"}
  1569. <span class="our_button">
  1570. <span class="lnr lnr-heart"></span>
  1571. </span>
  1572. </div>
  1573.  
  1574. </div>
  1575. </div>
  1576.  
  1577. {block:HasTags}
  1578. <div class="tags {PostID}">
  1579. {block:Tags}
  1580. <a class="a-link" href="{TagURL}">#{Tag}</a>
  1581. {/block:Tags}
  1582. </div>
  1583. {/block:HasTags}
  1584.  
  1585.  
  1586. {/block:date}
  1587.  
  1588.  
  1589. </article>
  1590.  
  1591. <!-- {block:NoRebloggedFrom}
  1592. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1593. {/block:NoRebloggedFrom} -->
  1594.  
  1595. {block:ContentSource}<!-- {SourceURL}
  1596. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1597. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1598. {/block:ContentSource}
  1599.  
  1600. {block:permalinkpage}
  1601. {block:NoteCount}
  1602. <article class="posts postnotes">
  1603. <h1 class="notehead">{NoteCountWithLabel}</h1>
  1604. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  1605. </article>
  1606. {/block:NoteCount}
  1607. {/block:permalinkpage}
  1608.  
  1609.  
  1610. {/block:posts}
  1611. </main>
  1612.  
  1613. {block:indexpage}
  1614. <!--pagination-->
  1615. {block:pagination}
  1616. <div class="pg">
  1617. {block:PreviousPage}<a class="a-link arrs" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  1618. {block:JumpPagination length="5"}
  1619. {block:CurrentPage}<span class="current"><em>{PageNumber}</em></span>{/block:CurrentPage}
  1620. {block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1621. {block:NextPage}<a class="a-link arrs" href="{NextPage}">&raquo;</a>{/block:NextPage}
  1622. </div>
  1623. {/block:pagination}
  1624. <!--/pagination-->
  1625.  
  1626. {block:ifmanualload}
  1627. {block:Pagination}
  1628.  
  1629. <div class="bottom"><a class="append">Load More</a></div>
  1630. {/block:Pagination}
  1631. {/block:ifmanualload}
  1632.  
  1633. {/block:indexpage}
  1634.  
  1635.  
  1636.  
  1637. </section>
  1638.  
  1639.  
  1640. <div class="sidemenu">
  1641. <nav class="left">
  1642. <img class="menuprof" src="{image:menu}">
  1643.  
  1644. </nav>
  1645. <nav class="right">
  1646. <a class="a-link" href="{text:link1 URL}">{text:link1}</a>
  1647. <a class="a-link" href="{text:link2 URL}">{text:link2}</a>
  1648. <a class="a-link" href="{text:link3 URL}">{text:link3}</a>
  1649. <a class="a-link" href="{text:link4 URL}">{text:link4}</a>
  1650. <a class="a-link" href="{text:link5 URL}">{text:link5}</a>
  1651. </nav>
  1652. </div>
  1653.  
  1654.  
  1655. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1656. <div id="leo">
  1657. <a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
  1658. </div>
  1659. <!--END OF CREDIT-->
  1660.  
  1661. <script>
  1662. $(function () {
  1663. $('[data-typer-targets]').typer();
  1664. });
  1665. </script>
  1666. <script>// Typer.js is built by Layervault
  1667. // Link: https://github.com/layervault/jquery.typer.js
  1668.  
  1669. String.prototype.rightChars = function(n){
  1670. if (n <= 0) {
  1671. return "";
  1672. }
  1673. else if (n > this.length) {
  1674. return this;
  1675. }
  1676. else {
  1677. return this.substring(this.length, this.length - n);
  1678. }
  1679. };
  1680.  
  1681. (function($) {
  1682. var
  1683. options = {
  1684. highlightSpeed : 30,
  1685. typeSpeed : 100,
  1686. clearDelay : 500,
  1687. typeDelay : 200,
  1688. clearOnHighlight : true,
  1689. typerDataAttr : 'data-typer-targets',
  1690. typerInterval : 2000
  1691. },
  1692. highlight,
  1693. clearText,
  1694. backspace,
  1695. type,
  1696. spanWithColor,
  1697. clearDelay,
  1698. typeDelay,
  1699. clearData,
  1700. isNumber,
  1701. typeWithAttribute,
  1702. getHighlightInterval,
  1703. getTypeInterval,
  1704. typerInterval;
  1705.  
  1706. spanWithColor = function(color, backgroundColor) {
  1707. if (color === 'rgba(0, 0, 0, 0)') {
  1708. color = 'rgb(255, 255, 255)';
  1709. }
  1710.  
  1711. return $('<span></span>')
  1712. .css('color', color)
  1713. .css('background-color', backgroundColor);
  1714. };
  1715.  
  1716. isNumber = function (n) {
  1717. return !isNaN(parseFloat(n)) && isFinite(n);
  1718. };
  1719.  
  1720. clearData = function ($e) {
  1721. $e.removeData([
  1722. 'typePosition',
  1723. 'highlightPosition',
  1724. 'leftStop',
  1725. 'rightStop',
  1726. 'primaryColor',
  1727. 'backgroundColor',
  1728. 'text',
  1729. 'typing'
  1730. ]);
  1731. };
  1732.  
  1733. type = function ($e) {
  1734. var
  1735. // position = $e.data('typePosition'),
  1736. text = $e.data('text'),
  1737. oldLeft = $e.data('oldLeft'),
  1738. oldRight = $e.data('oldRight');
  1739.  
  1740. // if (!isNumber(position)) {
  1741. // position = $e.data('leftStop');
  1742. // }
  1743.  
  1744. if (!text || text.length === 0) {
  1745. clearData($e);
  1746. return;
  1747. }
  1748.  
  1749.  
  1750. $e.text(
  1751. oldLeft +
  1752. text.charAt(0) +
  1753. oldRight
  1754. ).data({
  1755. oldLeft: oldLeft + text.charAt(0),
  1756. text: text.substring(1)
  1757. });
  1758.  
  1759. // $e.text($e.text() + text.substring(position, position + 1));
  1760.  
  1761. // $e.data('typePosition', position + 1);
  1762.  
  1763. setTimeout(function () {
  1764. type($e);
  1765. }, getTypeInterval());
  1766. };
  1767.  
  1768. clearText = function ($e) {
  1769. $e.find('span').remove();
  1770.  
  1771. setTimeout(function () {
  1772. type($e);
  1773. }, typeDelay());
  1774. };
  1775.  
  1776. highlight = function ($e) {
  1777. var
  1778. position = $e.data('highlightPosition'),
  1779. leftText,
  1780. highlightedText,
  1781. rightText;
  1782.  
  1783. if (!isNumber(position)) {
  1784. position = $e.data('rightStop') + 1;
  1785. }
  1786.  
  1787. if (position <= $e.data('leftStop')) {
  1788. setTimeout(function () {
  1789. clearText($e);
  1790. }, clearDelay());
  1791. return;
  1792. }
  1793.  
  1794. leftText = $e.text().substring(0, position - 1);
  1795. highlightedText = $e.text().substring(position - 1, $e.data('rightStop') + 1);
  1796. rightText = $e.text().substring($e.data('rightStop') + 1);
  1797.  
  1798. $e.html(leftText)
  1799. .append(
  1800. spanWithColor(
  1801. $e.data('backgroundColor'),
  1802. $e.data('primaryColor')
  1803. )
  1804. .append(highlightedText)
  1805. )
  1806. .append(rightText);
  1807.  
  1808. $e.data('highlightPosition', position - 1);
  1809.  
  1810. setTimeout(function () {
  1811. return highlight($e);
  1812. }, getHighlightInterval());
  1813. };
  1814.  
  1815. typeWithAttribute = function ($e) {
  1816. var targets;
  1817.  
  1818. if ($e.data('typing')) {
  1819. return;
  1820. }
  1821.  
  1822. try {
  1823. targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets;
  1824. } catch (e) {}
  1825.  
  1826. if (typeof targets === "undefined") {
  1827. targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) {
  1828. return $.trim(e);
  1829. });
  1830. }
  1831.  
  1832. $e.typeTo(targets[Math.floor(Math.random()*targets.length)]);
  1833. };
  1834.  
  1835. // Expose our options to the world.
  1836. $.typer = (function () {
  1837. return { options: options };
  1838. })();
  1839.  
  1840. $.extend($.typer, {
  1841. options: options
  1842. });
  1843.  
  1844. //-- Methods to attach to jQuery sets
  1845.  
  1846. $.fn.typer = function() {
  1847. var $elements = $(this);
  1848.  
  1849. return $elements.each(function () {
  1850. var $e = $(this);
  1851.  
  1852. if (typeof $e.attr($.typer.options.typerDataAttr) === "undefined") {
  1853. return;
  1854. }
  1855.  
  1856. typeWithAttribute($e);
  1857. setInterval(function () {
  1858. typeWithAttribute($e);
  1859. }, typerInterval());
  1860. });
  1861. };
  1862.  
  1863. $.fn.typeTo = function (newString) {
  1864. var
  1865. $e = $(this),
  1866. currentText = $e.text(),
  1867. i = 0,
  1868. j = 0;
  1869.  
  1870. if (currentText === newString) {
  1871. console.log("Our strings our equal, nothing to type");
  1872. return $e;
  1873. }
  1874.  
  1875. if (currentText !== $e.html()) {
  1876. console.error("Typer does not work on elements with child elements.");
  1877. return $e;
  1878. }
  1879.  
  1880. $e.data('typing', true);
  1881.  
  1882. while (currentText.charAt(i) === newString.charAt(i)) {
  1883. i++;
  1884. }
  1885.  
  1886. while (currentText.rightChars(j) === newString.rightChars(j)) {
  1887. j++;
  1888. }
  1889.  
  1890. newString = newString.substring(i, newString.length - j + 1);
  1891.  
  1892. $e.data({
  1893. oldLeft: currentText.substring(0, i),
  1894. oldRight: currentText.rightChars(j - 1),
  1895. leftStop: i,
  1896. rightStop: currentText.length - j,
  1897. primaryColor: $e.css('color'),
  1898. backgroundColor: $e.css('background-color'),
  1899. text: newString
  1900. });
  1901.  
  1902. highlight($e);
  1903.  
  1904. return $e;
  1905. };
  1906.  
  1907. //-- Helper methods. These can one day be customized further to include things like ranges of delays.
  1908.  
  1909. getHighlightInterval = function () {
  1910. return $.typer.options.highlightSpeed;
  1911. };
  1912.  
  1913. getTypeInterval = function () {
  1914. return $.typer.options.typeSpeed;
  1915. },
  1916.  
  1917. clearDelay = function () {
  1918. return $.typer.options.clearDelay;
  1919. },
  1920.  
  1921. typeDelay = function () {
  1922. return $.typer.options.typeDelay;
  1923. };
  1924.  
  1925. typerInterval = function () {
  1926. return $.typer.options.typerInterval;
  1927. };
  1928. })(jQuery);
  1929.  
  1930. </script>
  1931.  
  1932. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1933.  
  1934. {block:indexpage}
  1935. {block:posts}
  1936. <script>
  1937. $(document).ready(function(){
  1938. $('a.togglet.{PostID}').click(function(e){
  1939. e.preventDefault();
  1940. $('div.tags.{PostID}').slideToggle();
  1941. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1942. });
  1943.  
  1944. });
  1945. </script>
  1946. {/block:posts}
  1947. {/block:indexpage}
  1948.  
  1949. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1950.  
  1951. <script>
  1952. jQuery.noConflict();
  1953. (function($){
  1954.  
  1955. $(document).ready(function(){
  1956.  
  1957. $("a[title],img[title],[title]").style_my_tooltips({
  1958.  
  1959. tip_follows_cursor:true,
  1960.  
  1961. tip_delay_time:30,
  1962.  
  1963. tip_fade_speed:300,
  1964.  
  1965. attribute:"title"
  1966.  
  1967. });
  1968.  
  1969. });
  1970.  
  1971. })(jQuery);
  1972. </script>
  1973.  
  1974.  
  1975. </body>
  1976. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!