API tools faq
paste
Advertisement
hermionemessi

Theme 07

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