API tools faq
paste
Advertisement
hermionemessi

Theme 12 v1

hermionemessi
Jun 26th, 2018
2,888
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 60.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lte IE 9]><html class="no-js old-browser"> <![endif]-->
  3. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  4.  
  5. <!--THEME 12 I Know Places v1 by hermionegrangcr
  6.  
  7. THEME BLOG: grangersdesigns
  8.  
  9.  
  10. ♛ ♛ ♛
  11. ♛♛♛ ♛♛♛ ♛♛♛
  12. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  13. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  16.  
  17.  
  18. Important:
  19.  
  20. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  21.  
  22. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  23.  
  24. ♚ Tweak this to your preference as long as the credits remain intact.
  25.  
  26. ♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.comf/faq
  27.  
  28. -->
  29.  
  30. <head>
  31. <title>{Title}</title>
  32.  
  33. <title>{Title}</title>
  34.  
  35. <meta charset="UTF-8" />
  36. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  37. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  38. <link rel="shortcut icon" href="{Favicon}">
  39.  
  40. <meta name="color:accent"content="#C04848">
  41. <meta name="color:highlight"content="#40E0D0">
  42.  
  43. <meta name="select:post width"content="post500"title="500px"/>
  44. <meta name="select:post width"content="post540"title="540px"/>
  45. <meta name="select:post width"content="post450"title="450px"/>
  46. <meta name="select:post width"content="post400"title="400px"/>
  47. <meta name="select:post width"content="post350"title="350px"/>
  48.  
  49.  
  50. <meta name="select:post spacing" content="150px">
  51. <meta name="select:post spacing" content="60px">
  52. <meta name="select:post spacing" content="80px">
  53. <meta name="select:post spacing" content="100px">
  54. <meta name="select:post spacing" content="120px">
  55.  
  56.  
  57. <meta name="select:font size" content="14px" title="14px">
  58. <meta name="select:font size" content="12px" title="12px">
  59. <meta name="select:font size" content="11px" title="11px">
  60. <meta name="select:font size" content="10px" title="10px">
  61. <meta name="select:font size" content="9px" title="9px">
  62.  
  63.  
  64. <meta name="select:photoset gutter"content="5px"title="5px">
  65. <meta name="select:photoset gutter"content="10px"title="10px">
  66. <meta name="select:photoset gutter"content="2px"title="2px">
  67. <meta name="select:photoset gutter"content="1px"title="1px">
  68. <meta name="select:photoset gutter"content="0px"title="0px">
  69.  
  70. <meta name="select:notes display" content="def_notes" title="default">
  71. <meta name="select:notes display" content="grid_notes" title="grid">
  72.  
  73. <meta name="text:basics"content="Name, Age, MBTI">
  74.  
  75. <meta name="text:Link1" content="Link1">
  76. <meta name="text:link1 URL" content="/">
  77. <meta name="text:Link2" content="Link2">
  78. <meta name="text:link2 URL" content="/">
  79. <meta name="text:Link3" content="Link3">
  80. <meta name="text:link3 URL" content="/">
  81. <meta name="text:Link4" content="Link4">
  82. <meta name="text:link4 URL" content="/">
  83. <meta name="text:Link5" content="Link5">
  84. <meta name="text:link5 URL" content="/">
  85.  
  86. <meta name="text:info text" content="Lorem Ipsum">
  87.  
  88. <meta name="text:question 1" content="This is a question?">
  89. <meta name="text:answer 1" content="This is an answer.">
  90. <meta name="text:question 2" content="This is a question?">
  91. <meta name="text:answer 2" content="This is an answer.">
  92. <meta name="text:question 3" content="This is a question?">
  93. <meta name="text:answer 3" content="This is an answer.">
  94.  
  95.  
  96. <meta name="if:unnested captions" content="">
  97. <meta name="if:infinite scroll" content="">
  98. <meta name="if:manual load" content="">
  99.  
  100.  
  101. <meta name="text:nav category 1" content="category 1">
  102. <meta name="text:nav category 2" content="category 2">
  103. <meta name="text:nav category 3" content="category 3">
  104.  
  105. <meta name="text:navilink 1" content="link">
  106. <meta name="text:navilink 1 URL" content="/">
  107. <meta name="text:navilink 2" content="link">
  108. <meta name="text:navilink 2 URL" content="/">
  109. <meta name="text:navilink 3" content="link">
  110. <meta name="text:navilink 3 URL" content="/">
  111. <meta name="text:navilink 4" content="link">
  112. <meta name="text:navilink 4 URL" content="/">
  113. <meta name="text:navilink 5" content="link">
  114. <meta name="text:navilink 5 URL" content="/">
  115. <meta name="text:navilink 6" content="link">
  116. <meta name="text:navilink 6 URL" content="/">
  117. <meta name="text:navilink 7" content="link">
  118. <meta name="text:navilink 7 URL" content="/">
  119. <meta name="text:navilink 8" content="link">
  120. <meta name="text:navilink 8 URL" content="/">
  121. <meta name="text:navilink 9" content="link">
  122. <meta name="text:navilink 9 URL" content="/">
  123. <meta name="text:navilink 10" content="link">
  124. <meta name="text:navilink 10 URL" content="/">
  125. <meta name="text:navilink 11" content="link">
  126. <meta name="text:navilink 11 URL" content="/">
  127. <meta name="text:navilink 12" content="link">
  128. <meta name="text:navilink 12 URL" content="/">
  129.  
  130. <meta name="image:sidebar img" content="https://static.tumblr.com/703cb29f667e704a88da8986cb1310bf/xbvpdcx/cGWoa8yrs/tumblr_static_5kgl3qy89j40k048k80kgwws0.png">
  131.  
  132. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  133.  
  134. <link href='https://fonts.googleapis.com/css?family=Muli:400' rel='stylesheet' type='text/css'>
  135. <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet">
  136.  
  137. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  138.  
  139. <style type="text/css">
  140. .animsition-loading {display:none;}
  141.  
  142. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  143. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  144. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  145. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  146.  
  147. ::selection {background:{color:highlight}; color:#fff;}
  148. ::-moz-selection {background:{color:highlight};color:#fff;}
  149. ::-webkit-selection {background:{color:highlight};color:#fff;}
  150.  
  151. ::-webkit-scrollbar {
  152. width:6px;
  153. background:#fff;
  154. }
  155.  
  156. ::-webkit-scrollbar:horizontal {display:none;}
  157.  
  158. ::-webkit-scrollbar-thumb { background-color: {color:accent}; border-radius:1ex;}
  159.  
  160.  
  161. #s-m-t-tooltip{
  162. position:absolute;
  163. margin-top: 10px!important;
  164. z-index:9999999999;
  165. font-family:'muli';
  166. padding:2px 5px 2px 5px;
  167. color:#5f5f5f;
  168. font-weight:300;
  169. max-width:500px;
  170. font-size:80%;
  171. letter-spacing:1.5px;
  172. background: #fff;
  173. border-left:2px solid {color:accent};
  174. font-size:12px;
  175. text-transform:uppercase;
  176. -webkit-box-shadow: 1px 1px 2px 0px #eaeaea;
  177. -moz-box-shadow: 1px 1px 2px 0px #eaeaea;
  178. box-shadow: 1px 1px 2px 0px #eaeaea;
  179. border-radius:1%;
  180.  
  181. }
  182.  
  183.  
  184.  
  185. iframe.tmblr-iframe.iframe-controls--desktop.tmblr-iframe--loaded {
  186. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  187. -webkit-transform:scale(0.8);
  188. -webkit-transform-origin:right;
  189. -moz-transform:scale(0.8);
  190. -moz-transform-origin:right;
  191. -o-transform:scale(0.8);
  192. -o-transform-origin:right;
  193. -ms-transform:scale(0.8);
  194. -ms-transform-origin:right;
  195. transform:scale(0.8);
  196. transform-origin:right;
  197. top:60px!important;
  198. }
  199.  
  200. .tmblr-iframe.tmblr-iframe--app-cta-button.tmblr-iframe--loaded,iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded:not(.iframe-controls--desktop) {display:none!important;}
  201.  
  202. *,
  203. *::before,
  204. *::after {
  205. box-sizing: inherit;
  206. -webkit-box-sizing: inherit;
  207. -moz-box-sizing: inherit;
  208. }
  209.  
  210. html {
  211. box-sizing: border-box;
  212. -webkit-box-sizing: border-box;
  213. -moz-box-sizing: border-box;
  214. }
  215.  
  216. body,html,main {height:100%;}
  217.  
  218. body {
  219. color:#222;
  220. font-family:'pt serif',serif;
  221. font-size:{select:font size};
  222. line-height:160%;
  223. background:#fafafa;
  224. margin:0;
  225. overflow-x:hidden;
  226. background-attachment:fixed;
  227. -webkit-font-smoothing: antialiased;
  228. -moz-osx-font-smoothing: grayscale;
  229. }
  230.  
  231. html,
  232. body {
  233. overflow: hidden;
  234. position: relative;
  235. height: 100%;
  236. }
  237.  
  238. a {
  239. text-decoration:none;
  240. color:#999;
  241. cursor:help;
  242. -webkit-transition: all 0.3s ease-in-out;
  243. transition:all 0.3s ease-in-out;
  244. }
  245.  
  246. a:hover {
  247. color:{color:highlight};
  248. -webkit-transition: all 0.3s ease-in-out;
  249. transition:all 0.3s ease-in-out;
  250. }
  251.  
  252. /*main wrapper*/
  253. main{
  254. position:relative;
  255. width:100%;
  256. display:block;
  257. }
  258.  
  259.  
  260. /*topbar*/
  261. header {
  262. position:fixed;
  263. top:0;
  264. left:0;
  265. width:100%;
  266. height:60px;
  267. background:#fff;
  268. z-index:200;
  269. border-bottom:1px solid #f5f5f5;
  270. -webkit-box-shadow: 0 1px 2px 0px #eaeaea;
  271. -moz-box-shadow: 0 1px 2px 0px #eaeaea;
  272. box-shadow: 0 1px 2px 0px #eaeaea;
  273.  
  274. display:-webkit-box;
  275. display:-webkit-flex;
  276. display:-ms-flexbox;
  277. display:flex;
  278. -webkit-box-align:center;
  279. -webkit-align-items:center;
  280. -ms-flex-align:center;
  281. align-items:center;
  282. -webkit-box-orient:center;
  283. -webkit-box-pack: justify;
  284. -webkit-justify-content: space-between;
  285. -ms-flex-pack: justify;
  286. justify-content: space-between;
  287.  
  288. }
  289.  
  290.  
  291.  
  292. nav.mobtabs {display:none;}
  293.  
  294. .desktop_menu {
  295. display:flex;
  296. display:-webkit-flex;
  297. display:-moz-flex;
  298. display:-ms-flex;
  299. display: -webkit-box;
  300. align-items:center;
  301. -webkit-align-items:center;
  302. -moz-align-items:center;
  303. -ms-align-items:center;
  304. justify-content:center;
  305. }
  306.  
  307.  
  308. a.tbtitle {padding-left:20px;margin-right:24px;}
  309.  
  310. a.tbtitle, .ttl a, .mobile-sb h1 a {color:{color:accent};font-size:16px;font-family:'muli',arial;
  311. -webkit-transition: all 0.3s ease-in-out;
  312. transition:all 0.3s ease-in-out;
  313. }
  314.  
  315. a:hover.ttt {
  316. color:{color:highlight};
  317. -webkit-transition: all 0.3s ease-in-out;
  318. transition:all 0.3s ease-in-out;
  319. }
  320.  
  321. .mobile-sb h1 {font-size:24px;text-transform:uppercase;letter-spacing:1.5px;}
  322.  
  323. header > div.searchblog {
  324. padding-right:20px;
  325. }
  326.  
  327. div.sbexplore {
  328. display:flex;
  329. display:-webkit-flex;
  330. display:-moz-flex;
  331. display:-ms-flex;
  332. align-items:center;
  333. -webkit-align-items:center;
  334. -moz-align-items:center;
  335. -ms-align-items:center;
  336. display: -webkit-box;
  337. -webkit-box-align: center;
  338. transition: all 0.3s ease-in-out;
  339. -webkit-transition: all 0.3s ease-in-out;
  340. -o-transition: all 0.3s ease-in-out;
  341. -moz-transition: all 0.3s ease-in-out;
  342. }
  343.  
  344. div.sbexplore span {
  345. font-size:12px;margin-right:5px;
  346. transition: all 0.3s ease-in-out;
  347. -webkit-transition: all 0.3s ease-in-out;
  348. -o-transition: all 0.3s ease-in-out;
  349. -moz-transition: all 0.3s ease-in-out;
  350. }
  351.  
  352.  
  353. .search .query {
  354. border: 0;
  355. outline: 0;
  356. padding: 0 5px 0 5px;
  357. font-family: 'muli';
  358. font-size: {select:font size};
  359. font-weight:300;
  360. text-transform:uppercase;
  361. width:100%;
  362. letter-spacing:2px;
  363. display:inline-block;
  364. padding:2px;
  365. background:transparent;
  366. transition: all 0.3s ease-in-out;
  367. -webkit-transition: all 0.3s ease-in-out;
  368. -o-transition: all 0.3s ease-in-out;
  369. -moz-transition: all 0.3s ease-in-out;
  370. }
  371.  
  372. .search .query {color:#999;}
  373.  
  374. ::-webkit-input-placeholder {color: inherit;}
  375. :-moz-placeholder {color: inherit; opacity:1;}
  376. ::-moz-placeholder {color: inherit; opacity:1;}
  377. :-ms-input-placeholder {color: inherit;}
  378.  
  379. input:focus::-webkit-input-placeholder {color: transparent;}
  380. input:focus:-moz-placeholder {color: transparent;}
  381. input:focus::-moz-placeholder {color: transparent;}
  382. input:focus:-ms-input-placeholder { color: transparent;}
  383.  
  384. /*content container*/
  385.  
  386. div.contwrap {
  387. position:relative;
  388. margin:0 auto;
  389. left:16%;
  390. height:100%;
  391. }
  392.  
  393. .post500 div.contwrap {width:calc(500px + 4rem);}
  394. .post540 div.contwrap {width:calc(540px + 4rem);}
  395. .post450 div.contwrap {width:calc(450px + 4rem);}
  396. .post400 div.contwrap {width:calc(400px + 4rem);}
  397. .post350 div.contwrap {width:calc(350px + 4rem);}
  398.  
  399.  
  400. /*sidebar*/
  401.  
  402. aside, #sidebar .ttl, #sidebar nav{
  403. display:flex;
  404. display:-webkit-flex;
  405. display:-moz-flex;
  406. display:-ms-flex;
  407. display: -webkit-box;
  408. align-items:center;
  409. -webkit-align-items:center;
  410. -moz-align-items:center;
  411. -ms-align-items:center;
  412. justify-content:center;
  413. -webkit-justify-content:center;
  414. -moz-justify-content:center;
  415. -ms-justify-content:center;
  416. -webkit-box-align: center;
  417. -webkit-box-pack:center;
  418. }
  419.  
  420. aside {
  421. position:fixed;
  422. height:100%;
  423. width:300px;
  424. top:0;
  425. margin-left:-450px;
  426. z-index:100;
  427. -webkit-transition: all 0.3s ease-in-out;
  428. transition:all 0.3s ease-in-out;
  429. }
  430.  
  431.  
  432. .mobile-sb, div#sidebar {
  433. position:relative;
  434. background:#fff;
  435. -webkit-box-shadow: 1px 1px 2px 0px #eaeaea;
  436. -moz-box-shadow: 1px 1px 2px 0px #eaeaea;
  437. box-shadow: 1px 1px 2px 0px #eaeaea;
  438. border-radius:1%;
  439. }
  440.  
  441.  
  442. .mobile-sb {
  443. display:none;
  444. width:100%;
  445. margin:auto;
  446. margin-bottom:150px;
  447. padding:30px;
  448. text-align:center;
  449. }
  450.  
  451.  
  452. .mobile-sb img {
  453. display:block;
  454. margin:auto;
  455. width:128px;
  456. border-radius:5%;
  457. }
  458.  
  459. .mobile-sb h2 {
  460. margin-top:24px;
  461. font-size:18px;
  462. font-weight:bold;
  463. }
  464.  
  465. .mobile-sb p {margin-top:1rem;}
  466.  
  467. div#sidebar {width:300px;
  468. -webkit-transition: all 0.3s ease-in-out;
  469. transition:all 0.3s ease-in-out;
  470. }
  471.  
  472. #sidebar img {
  473. width:100%;
  474. display:block;
  475. }
  476.  
  477. #sidebar .ttl, #sidebar nav {height:50px;}
  478.  
  479. .mobile-sb .ttl {height:60px;}
  480.  
  481. #sidebar .ttl {
  482. border-bottom:1px solid #eaeaea;
  483. width:100%;
  484. text-align:center;
  485. overflow:hidden;
  486. text-overflow:ellipsis;
  487. white-space:nowrap;
  488.  
  489. }
  490.  
  491.  
  492. #sidebar nav ul li, .mobtabs ul li, .desktop_menu ul li {display:inline;margin-right:12px;font-size:12px;cursor:help;}
  493.  
  494. #sidebar nav ul li, .mobtabs ul li {
  495. -webkit-transition: all 0.3s ease-in-out;
  496. transition:all 0.3s ease-in-out;
  497. }
  498.  
  499. #sidebar nav ul li:hover, .mobtabs ul li:hover {
  500. color:{color:accent};
  501. -webkit-transition: all 0.3s ease-in-out;
  502. transition:all 0.3s ease-in-out;
  503. }
  504.  
  505. .desktop_menu ul li {display:inline-block;}
  506. .desktop_menu ul li a {font-family:'muli';}
  507. .desktop_menu ul li a:empty {display:none;}
  508.  
  509. .mobtabs ul li {font-size:1rem;margin-right:24px;}
  510. .mobtabs ul li:last-of-type {margin-right:0;}
  511.  
  512. .currentPage {color:{color:accent};}
  513.  
  514. #sidebar nav ul li:last-of-type {margin-right:0;}
  515.  
  516. #sidebar nav ul li:before , .mobtabs ul li:before {
  517. font-family: 'Linearicons-Free';
  518. margin-right:8px;
  519. }
  520.  
  521. .mobtabs ul li:before {margin-right:12px;}
  522.  
  523. #sidebar nav ul li:first-of-type:before, .mobtabs ul li:first-of-type:before {
  524. content: "\e800";
  525.  
  526. }
  527.  
  528. #sidebar nav ul li:nth-of-type(2):before, .mobtabs ul li:nth-of-type(2):before {
  529. content: "\e818";
  530.  
  531. }
  532.  
  533. #sidebar nav ul li:nth-of-type(3):before, .mobtabs ul li:nth-of-type(3):before {
  534. content: "\e871";
  535.  
  536. }
  537.  
  538. #sidebar nav ul li:nth-of-type(4):before, .mobtabs ul li:nth-of-type(4):before {
  539. content: "\e82b";
  540.  
  541. }
  542.  
  543.  
  544. header a, #sidebar .ttl {
  545. text-transform:uppercase;
  546. letter-spacing:2px;
  547. font-weight:400;
  548. line-height:0;
  549. }
  550.  
  551. .sbhover {width:100%;}
  552.  
  553. .hovere {
  554. width: 100%;
  555. height: 100%;
  556. overflow: hidden;
  557. position: relative;
  558. text-align: center;
  559. cursor: default;
  560. font-family:'muli';
  561. }
  562.  
  563. .hovere .overlay {
  564. width: 100%;
  565. height: 100%;
  566. position: absolute;
  567. overflow: hidden;
  568. top: 0;
  569. left: 0;
  570. background-color: rgba(0,0,0,0.6);
  571. opacity: 0;
  572. filter: alpha(opacity=0);
  573. -webkit-transform: translate(460px, -100px) rotate(180deg);
  574. -ms-transform: translate(460px, -100px) rotate(180deg);
  575. transform: translate(460px, -100px) rotate(180deg);
  576. -webkit-transition: all 0.3s 0.4s ease-in-out;
  577. transition: all 0.3s 0.4s ease-in-out;
  578. }
  579.  
  580. .hovere img {
  581. display: block;
  582. position: relative;
  583. width:100%;
  584. height:auto;
  585. -webkit-transition: all 0.4s ease-in;
  586. transition: all 0.4s ease-in;
  587. }
  588.  
  589. .hovere h2 {
  590. margin-top:1em;
  591. margin-bottom:1em;
  592. text-transform: uppercase;
  593. letter-spacing:2px;
  594. color: #fff;
  595. text-align: center;
  596. position: relative;
  597. font-size: {select:font size};
  598. padding: 8px;
  599. font-weight:400;
  600. background: rgba(0, 0, 0, 0.6);
  601. }
  602.  
  603. .hovere .info {
  604. display: inline-block;
  605. text-decoration: none;
  606. padding: 8px;
  607. color: #fff;
  608. margin: 0;
  609. background-color: transparent;
  610. -webkit-transform: translateY(-200px);
  611. -ms-transform: translateY(-200px);
  612. transform: translateY(-200px);
  613. -webkit-transition: all 0.4s ease-in-out;
  614. transition: all 0.4s ease-in-out;
  615. }
  616.  
  617.  
  618.  
  619. .hovere:hover .overlay {
  620. opacity: 1;
  621. filter: alpha(opacity=100);
  622. -webkit-transition-delay: 0s;
  623. transition-delay: 0s;
  624. -webkit-transform: translate(0px, 0px);
  625. -ms-transform: translate(0px, 0px);
  626. transform: translate(0px, 0px);
  627. }
  628.  
  629. .hovere:hover h2 {
  630. -webkit-transform: translateY(0px);
  631. -ms-transform: translateY(0px);
  632. transform: translateY(0px);
  633. -webkit-transition-delay: 0.8s;
  634. transition-delay: 0.8s;
  635. }
  636.  
  637. .hovere:hover .info {
  638. -webkit-transform: translateY(0px);
  639. -ms-transform: translateY(0px);
  640. transform: translateY(0px);
  641. -webkit-transition-delay: 0.3s;
  642. transition-delay: 0.3s;
  643. }
  644.  
  645.  
  646. /*entries wrap*/
  647.  
  648. #contents {
  649. position: relative;
  650. height: 100%;
  651. width: 100%;
  652. top: 0;
  653. left: 0;
  654. overflow: hidden;
  655.  
  656. }
  657.  
  658. article {
  659. position: absolute;
  660. top:120px;
  661. height: calc(100% - 180px);
  662. width: 100%;
  663. padding: 2rem;
  664. background:#fafafa;
  665. bottom: 60px;
  666. left: -100%;
  667. overflow:auto;
  668. }
  669.  
  670. article.hide {
  671. -webkit-transition: left 0s 0.5s;
  672. transition: left 0s 0.5s;
  673. }
  674. article:nth-of-type(1) {
  675. z-index: 89;
  676. }
  677. article:nth-of-type(2) {
  678. z-index: 88;
  679. }
  680.  
  681. article:nth-of-type(3) {
  682. z-index: 87;
  683. }
  684.  
  685. article:nth-of-type(4) {
  686. z-index: 86;
  687. }
  688.  
  689.  
  690. article.show {
  691. -webkit-transition: left 0.5s;
  692. transition: left 0.5s;
  693. left: 0;
  694. z-index: 90;
  695. }
  696. article section {
  697. width: 100%;
  698. }
  699. article section h1 {
  700. font-size: 1.5rem;
  701. margin: 0 0 2rem 0;
  702. }
  703.  
  704. section {
  705. padding-top:0;
  706. }
  707.  
  708.  
  709.  
  710.  
  711. /*contents*/
  712.  
  713. div.posts, div.tabstuff {
  714.  
  715. margin:{select:post spacing} auto;
  716. background:#fff;
  717. border-radius:1%;
  718. text-align:justify;
  719. border:1px solid #f5f5f5;
  720. position:relative;
  721. -webkit-box-shadow: 1px 1px 2px 0px #eaeaea;
  722. -moz-box-shadow: 1px 1px 2px 0px #eaeaea;
  723. box-shadow: 1px 1px 2px 0px #eaeaea;
  724.  
  725. }
  726.  
  727. {block:ifinfinitescroll}
  728. .posts {
  729. -webkit-animation:fadeIn ease-in 1s;
  730. -o-animation:fadeIn ease-in 1s;
  731. -moz-animation:fadeIn ease-in 1s;
  732. animation:fadeIn ease-in 1s;
  733. }
  734. {/block:ifinfinitescroll}
  735.  
  736. div.tabstuff {
  737. margin-top:0;
  738. padding:20px;
  739. }
  740.  
  741. div.tabstuff h2 {margin-top:1em;font-style:italic;}
  742.  
  743. p.tabq {margin-top:1.5em!important;font-weight:bold;}
  744. p.taba {padding-left:1em;border-left:1px solid #222;}
  745.  
  746. .posts b, .posts strong, .tabstuff b, .tabstuff strong {font-weight:bold;}
  747. .posts em, .posts i, .tabstuff em, .tabstuff i {font-style:italic;}
  748.  
  749. .posts h1, .tabstuff h1 {font-size:calc({select:font size} * 1.6);}
  750. .posts h2, .tabstuff h2 {font-size:calc({select:font size} * 1.2);}
  751.  
  752. .tabstuff h1 {margin-bottom:1em;}
  753.  
  754. .posts .captions, .posts .pads {
  755. padding:20px;
  756. width:100%;
  757. border-bottom:1px solid #eaeaea;
  758. word-wrap:break-word;
  759. }
  760.  
  761.  
  762. /*navigation tab*/
  763.  
  764. .navigrid {
  765. display: grid;
  766. grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
  767. }
  768.  
  769. .post350 .navigrid {
  770. grid-template-columns: 100%;
  771. }
  772.  
  773. .navi-items {
  774. padding:16px;
  775. padding-top:0;
  776. padding-bottom:0;
  777. }
  778.  
  779. .navi-items h6 {
  780. font-style:italic;
  781. margin-bottom:8px;
  782. }
  783.  
  784. .navi-items:first-of-type {padding-left:0;}
  785. .navi-items:last-of-type {padding-right:0;}
  786.  
  787. .post350 .navi-items {padding-left:0;margin-top:16px;}
  788.  
  789. .navi-items > ul > li {
  790. margin-top:0.5em;
  791. padding-left:1em;
  792. position:relative;
  793. -webkit-transition: all 0.3s ease-in-out;
  794. transition:all 0.3s ease-in-out;
  795. }
  796.  
  797. .navi-items > ul > li > a {margin-left:calc({select:font size}/2);}
  798.  
  799. .navi-items > ul > li:before {
  800. content:'';
  801. position:absolute;
  802. top:50%;
  803. height:1px;
  804. margin-left:-1em;
  805. width:1em;
  806. background:#999;
  807. -webkit-transition: all 0.3s ease-in-out;
  808. transition:all 0.3s ease-in-out;
  809. }
  810.  
  811. .navi-items > ul > li:hover {
  812. padding-left:1.8em;
  813. -webkit-transition: all 0.3s ease-in-out;
  814. transition:all 0.3s ease-in-out;
  815. }
  816.  
  817. .navi-items > ul > li:hover:before {
  818. margin-left:-1.8em;
  819. width:1.8em;
  820. -webkit-transition: all 0.3s ease-in-out;
  821. transition:all 0.3s ease-in-out;
  822. }
  823.  
  824.  
  825. /*blogroll*/
  826.  
  827. .brollcont {
  828. display:grid;
  829. grid-template-columns:20% 20% 20% 20% 20%;
  830. }
  831.  
  832. .brollstuff {max-width:100%;padding:8px;}
  833.  
  834. .brollstuff img {
  835. display:block;border-radius:5%;max-width:100%;
  836. opacity:1;
  837. -webkit-transition: all 0.3s ease-in-out;
  838. transition:all 0.3s ease-in-out;
  839. }
  840.  
  841. .brollstuff:hover img {
  842. border-radius:50%;
  843. opacity:0.6;
  844. -webkit-transition: all 0.3s ease-in-out;
  845. transition:all 0.3s ease-in-out;
  846. }
  847.  
  848. .captions a:not(.tumblr_blog):not(.read_more),span.qsource a, .ask_cont span a, .tabstuff p a, .navi-items a {border-bottom:1px solid #eaeaea;}
  849.  
  850. .captions a:not(.tumblr_blog):not(.read_more):hover,span.qsource a:hover, .ask_cont span a:hover, .tabstuff p a:hover, .navi-items a:hover {border-bottom:1px solid {color:highlight};color:{color:highlight};}
  851.  
  852. a.read_more {color:inherit;border-bottom:1px solid #222;font-style:italic;font-weight:bold;vertical-align:middle;}
  853.  
  854. a:hover.read_more {color:{color:accent};border-bottom:1px solid {color:accent};}
  855.  
  856. .posts p, .tabstuff p {margin-top:1em;}
  857. .posts p:empty {display:none;}
  858.  
  859. .posts figure {margin:1em 0 1em 0 !important;}
  860.  
  861. pre {
  862. white-space: pre-wrap;
  863. white-space: -moz-pre-wrap;
  864. white-space: -pre-wrap;
  865. white-space: -o-pre-wrap;
  866. word-wrap: break-word;
  867. background:#fafafa;
  868. padding:5px;
  869. }
  870.  
  871.  
  872. div.posts:first-of-type {margin-top:0;}
  873. div.posts:last-of-type {margin-bottom:calc({select:post spacing}/2);}
  874.  
  875. .posts img.photop {
  876. display:block;
  877. }
  878.  
  879. .posts img {
  880. max-width:100%;
  881. height:auto;
  882. }
  883.  
  884. .posts ol, .posts ul {
  885. list-style: none;
  886. margin-top: 0;
  887. padding-left: 0;
  888. }
  889. .posts ol {
  890. list-style: decimal inside;
  891. }
  892.  
  893. .posts ul {
  894. list-style: circle inside;
  895. }
  896.  
  897. .posts li:first-of-type {margin-top:{select:font size};}
  898.  
  899. .posts li {margin-bottom:calc({select:font size} / 2);}
  900.  
  901. .posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  902. margin:{select:font size} 0 {select:font size} 0;
  903. }
  904.  
  905. body.defcap blockquote {
  906. border-left: 1px solid #eaeaea;
  907. margin-left: 0;
  908. margin-right: 0;
  909. padding-left: calc({select:font size} * 1.5);
  910. }
  911.  
  912. body.defcap blockquote *:last-of-type{
  913. margin-bottom: 0;
  914. }
  915.  
  916.  
  917. body.defcap .captions > *:first-of-type {
  918. margin-top:0;
  919. }
  920.  
  921. body.defcap blockquote blockquote {
  922. padding: 0 0 0 0;
  923. margin: 0 0 0 0;
  924. border-left:none;
  925.  
  926. }
  927.  
  928. blockquote.tumblr_parent {
  929. max-width:100%;
  930. margin:0;
  931. }
  932.  
  933. blockquote.tumblr_parent > p:first-child {margin-top:0;}
  934.  
  935. .tumblr_parent blockquote {
  936. padding: 0 0 0 calc({select:font size} * 2);
  937. margin: 0 0 0 0;
  938. margin-top:1em;
  939. border-left:1px #eaeaea solid;
  940. }
  941.  
  942. .tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}
  943.  
  944. .unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a):not(span) {vertical-align:middle;}
  945.  
  946. img.tumblr_avatar {border-radius:5%;margin-right:12px;width:36px;height:36px;}
  947.  
  948. img.tumblr_avatar + a.tumblr_blog {
  949. font-weight:bold;
  950. vertical-align:middle;
  951. text-transform:uppercase;
  952. letter-spacing:1.2px;
  953. color:inherit;
  954. border-bottom:1px solid #222;
  955. -webkit-transition: all 0.3s ease-in-out;
  956. transition:all 0.3s ease-in-out;
  957. }
  958.  
  959. img.tumblr_avatar + a.tumblr_blog:hover {
  960. border-bottom:1px solid {color:accent};
  961. color:{color:accent};
  962. -webkit-transition: all 0.3s ease-in-out;
  963. transition:all 0.3s ease-in-out;
  964. }
  965.  
  966. .posts video, .posts .tumblr_video_container {
  967. width: 100% !important;
  968. height: auto !important;
  969. }
  970.  
  971. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin:0;font-weight:400;}
  972.  
  973. h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}
  974.  
  975. h1.qshort {line-height:140%;font-size:calc({select:font size} * 2);}
  976. h1.qmedium, h1.qlong {line-height:160%;}
  977.  
  978. h1.qmedium {font-size:calc({select:font size} * 1.5);}
  979.  
  980. h1.qlong {font-size:calc({select:font size} * 1.2);}
  981.  
  982. span.qsource {width:100%;display:block;text-align:center;margin-top:16px;}
  983.  
  984. .divider {
  985. margin-top:16px;
  986. text-align:center;
  987. }
  988.  
  989. .sb .divider {margin-top:12px;}
  990.  
  991. .divider::before {
  992. width:20%;
  993. height:1px;
  994. background-color:{color:highlight};
  995. content:"";
  996. display:inline-block;
  997. vertical-align:middle;
  998. }
  999.  
  1000. .txttitle {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  1001.  
  1002. .txttitle h1 {margin-bottom:0;}
  1003.  
  1004. /*link posts*/
  1005. .link_cont {
  1006. border-bottom:1px solid #eaeaea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  1007. -webkit-transition: all 0.3s ease-in-out;
  1008. transition:all 0.3s ease-in-out;
  1009. }
  1010.  
  1011. .link_cont:hover {
  1012. background:{color:accent};
  1013. -webkit-transition: all 0.3s ease-in-out;
  1014. transition:all 0.3s ease-in-out;
  1015. }
  1016.  
  1017. .link_cont span {margin-right:{select:font size};}
  1018.  
  1019. .link_cont:hover .plink a {color:#fff;}
  1020.  
  1021. h1.plink {margin:0;font-style:italic;}
  1022.  
  1023. h1.plink a {color:inherit;}
  1024.  
  1025. /*ask posts*/
  1026.  
  1027. .ask_cont {line-height: 1.8;min-height:124px;border-bottom:1px solid #eaeaea;}
  1028.  
  1029. .ask_cont > img {float:left;border-radius:5%;margin-right:24px;}
  1030.  
  1031. .ask_cont > span {font-weight:bold;}
  1032. .ask_cont > span a {color:inherit;}
  1033.  
  1034. /*chats*/
  1035. ul.chatlines {list-style:none;}
  1036. li.clines {padding:10px;padding-left:20px;padding-right:20px;margin-top:0;margin-bottom:0;}
  1037. .chatlines li.odd {background:#fafafa;}
  1038. li.clines:last-of-type {border-bottom:1px solid #eaeaea;}
  1039.  
  1040. /*lightbox*/
  1041. #tumblr_lightbox,.tmblr-lightbox {background:#f5f5f5!important; }
  1042.  
  1043.  
  1044. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  1045. opacity:0;
  1046. border-radius:0!important;
  1047. -moz-border-radius: 0!important;
  1048. -webkit-border-radius: 0!important;
  1049. -o-border-radius: 0!important;
  1050. -webkit-box-shadow:none!important;
  1051. box-shadow:none!important;
  1052. }
  1053.  
  1054. #tumblr_lightbox_center_image {
  1055. opacity: 1!important;
  1056. background-color: #fff!important;
  1057. }
  1058.  
  1059. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  1060. transition: opacity 0.3s ease-in-out;
  1061. -webkit-transition: opacity 0.3s ease-in-out;
  1062. -moz-transition: opacity 0.3s ease-in-out;
  1063. -o-transition: opacity 0.3s ease-in-out;
  1064. }
  1065.  
  1066. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  1067. opacity:1!important;
  1068. transition: opacity 0.3s ease-in-out;
  1069. -webkit-transition: opacity 0.3s ease-in-out;
  1070. -moz-transition: opacity 0.3s ease-in-out;
  1071. -o-transition: opacity 0.3s ease-in-out;
  1072. }
  1073.  
  1074.  
  1075. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  1076. background-color: #fff!important;
  1077. border:1px solid #f5f5f5 !important;
  1078. border-radius: 1%!important;
  1079. -moz-border-radius: 1%!important;
  1080. -webkit-border-radius: 1%!important;
  1081. -o-border-radius: 0!important;
  1082. -webkit-box-shadow: 1px 1px 2px 0px #eaeaea!important;
  1083. -moz-box-shadow: 1px 1px 2px 0px #eaeaea!important;
  1084. box-shadow: 1px 1px 2px 0px #eaeaea!important;
  1085.  
  1086. }
  1087.  
  1088.  
  1089.  
  1090. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  1091.  
  1092.  
  1093. .tumblr-box {cursor:help;}
  1094.  
  1095. #tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:crosshair;}
  1096.  
  1097. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  1098. .photo-slideshow .count-1 {
  1099. margin-bottom:{select:photoset gutter}!important;
  1100. }
  1101.  
  1102.  
  1103. .photo-slideshow .count-2 {
  1104. margin-left:{select:photoset gutter}!important;
  1105. margin-bottom:{select:photoset gutter}!important;
  1106. width:calc(50% - ({select:photoset gutter}/2))!important;
  1107. }
  1108.  
  1109. .photo-slideshow .count-2:first-child {
  1110. margin-left:0!important;
  1111. }
  1112.  
  1113. .photo-slideshow .count-3 {
  1114. margin-left:{select:photoset gutter}!important;
  1115. margin-bottom:{select:photoset gutter}!important;
  1116. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  1117. }
  1118.  
  1119. .photo-slideshow .count-3:first-child {
  1120. margin-left:0!important;
  1121. }
  1122. .photo-slideshow {
  1123. display:block!important;
  1124. margin-bottom:calc(-({select:photoset gutter} - 3px));
  1125. position:relative;
  1126. width:100%;
  1127. }
  1128.  
  1129. .photo-slideshow.processed {margin-bottom:0!important;}
  1130. .row:last-of-type .count-1{margin-bottom:0!important;}
  1131. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  1132.  
  1133. .audio_cont {
  1134. position:relative;
  1135. width:100%;
  1136. font-size:90%;
  1137. margin-bottom:0;
  1138. border-bottom:1px solid #eaeaea;
  1139. display:-webkit-box;
  1140. display:-ms-flexbox;
  1141. display:flex;
  1142. -webkit-box-align:center;
  1143. -ms-flex-align:center;
  1144. align-items:center;
  1145. }
  1146.  
  1147.  
  1148. .playback {
  1149. position:absolute;
  1150. background:#fff;
  1151. z-index:10;
  1152. opacity:0;
  1153. text-align:center;
  1154. width:80px;
  1155. height:80px;
  1156. margin-top:10px;
  1157. margin-left:10px;
  1158. margin-bottom:10px;
  1159. -webkit-transition: all 0.3s ease-in-out;
  1160. transition:all 0.3s ease-in-out;
  1161. }
  1162.  
  1163.  
  1164. .playback:hover {
  1165. opacity:0.8;
  1166. -webkit-transition: all 0.3s ease-in-out;
  1167. transition:all 0.3s ease-in-out;
  1168. }
  1169.  
  1170. .playbox {
  1171. overflow:hidden;
  1172. width:40px;
  1173. height:40px;
  1174. margin-top:25px;
  1175. margin-left:20px;
  1176. }
  1177.  
  1178.  
  1179. .audio_cover {
  1180. position:relative;
  1181. margin-left:0;
  1182. width:100px;
  1183. height:100px;
  1184. }
  1185.  
  1186. .audio_info {
  1187. padding:0;
  1188. margin-left:0px;
  1189. background:#fff;
  1190. display:-webkit-box;
  1191. display:-ms-flexbox;
  1192. display:flex;
  1193. -webkit-box-pack:center;
  1194. -ms-flex-pack:center;
  1195. justify-content:center;
  1196. -webkit-box-align:center;
  1197. -ms-flex-align:center;
  1198. align-items:center;
  1199. width:calc(100% - 100px);
  1200. height:100px;
  1201. }
  1202.  
  1203. .audio_info > div {
  1204. font-weight:normal;
  1205. text-overflow: ellipsis;
  1206. white-space: nowrap;
  1207. overflow:hidden;
  1208. max-width:calc(100% - 50px);
  1209. }
  1210.  
  1211. .tags {
  1212. width:100%;
  1213. height:50px;
  1214. padding:0 20px 0 20px;
  1215. line-height:0;
  1216. white-space:nowrap;
  1217. display:-webkit-box;
  1218. display:-webkit-flex;
  1219. display:-ms-flexbox;
  1220. display:flex;
  1221. -webkit-box-align:center;
  1222. -webkit-align-items:center;
  1223. -ms-flex-align:center;
  1224. align-items:center;
  1225. -webkit-box-orient:center;
  1226. }
  1227.  
  1228. .tagwrap {overflow:hidden;}
  1229.  
  1230. .tags a {margin:0 8px 0 8px;}
  1231. {block:indexpage}
  1232. .tags a:first-of-type {margin-left:0;}
  1233. {/block:indexpage}
  1234.  
  1235. .postinfo {
  1236. width:100%;
  1237. height:50px;
  1238. /*background:#222;*/
  1239. border-radius:1% 1% 0 0;
  1240. border-bottom:1px solid #f5f5f5;
  1241. display:-webkit-box;
  1242. display:-webkit-flex;
  1243. display:-ms-flexbox;
  1244. display:flex;
  1245. -webkit-box-align:center;
  1246. -webkit-align-items:center;
  1247. -ms-flex-align:center;
  1248. align-items:center;
  1249. -webkit-box-orient:center;
  1250. -webkit-box-pack: justify;
  1251. -webkit-justify-content: space-between;
  1252. -ms-flex-pack: justify;
  1253. justify-content: space-between;
  1254. }
  1255.  
  1256. .tags, .postinfo {
  1257. font-family:'muli';
  1258. text-transform:uppercase;
  1259. letter-spacing:1.2px;
  1260. }
  1261.  
  1262. div.pdate {text-transform:uppercase;padding-left:20px;}
  1263. div.pdate span {margin-right:5px;}
  1264.  
  1265. .socactions {
  1266. display:-webkit-box;
  1267. display:-ms-flexbox;
  1268. display:flex;
  1269. display:-webkit-flex;
  1270. display:-moz-flex;
  1271. display:-ms-flex;
  1272. -webkit-box-align:center;
  1273. -ms-flex-align:center;
  1274. align-items:center;
  1275. -webkit-align-items:center;
  1276. -moz-align-items:center;
  1277. -ms-align-items:center;
  1278. margin-left:auto;
  1279. padding-right:20px;
  1280. }
  1281.  
  1282. .socactions svg {
  1283. fill:#999;
  1284. -webkit-transition: all 0.3s ease-in-out;
  1285. transition:all 0.3s ease-in-out;
  1286. }
  1287.  
  1288. .rihrih svg:hover {
  1289. fill:{color:highlight};
  1290. -webkit-transition: all 0.3s ease-in-out;
  1291. transition:all 0.3s ease-in-out;
  1292. }
  1293.  
  1294. .rihrih {
  1295. position: relative;
  1296. display: block;
  1297. width: 16px;
  1298. height: 16px;
  1299. margin-right:12px;
  1300. }
  1301.  
  1302. .custom-like-button {
  1303. position: relative;
  1304. display: block;
  1305. width: 16px;
  1306. height: 16px;
  1307. }
  1308.  
  1309. /* class for the Tumblr Like Button iframe */
  1310. .like_button {
  1311. position: absolute;
  1312. cursor:pointer;
  1313. top: 0;
  1314. left: 0;
  1315. right: 0;
  1316. bottom: 0;
  1317. width: 100%;
  1318. height: 100%;
  1319. opacity: 0;
  1320. z-index: 3;
  1321. }
  1322. /* Force iframe to fill button */
  1323. .like_button iframe {
  1324. width: 100% !important;
  1325. height: 100% !important;
  1326. }
  1327. /* class for Our Like Button */
  1328. .our_button {
  1329. position: absolute;
  1330. top: 0;
  1331. left: 0;
  1332. right: 0;
  1333. bottom: 0;
  1334. width: 100%;
  1335. height: 100%;
  1336. z-index: 1;
  1337. }
  1338.  
  1339. .like_button:hover + .our_button svg, .like_button.liked + .our_button svg {
  1340. fill: red;
  1341. -webkit-transition: all 0.3s ease-in-out;
  1342. transition:all 0.3s ease-in-out;
  1343. }
  1344.  
  1345. .posts .lnr {width:100%;height:100%;}
  1346.  
  1347. /*pagination*/
  1348. .pg {
  1349. {block:ifinfinitescroll}
  1350. display:none;
  1351. {/block:ifinfinitescroll}
  1352.  
  1353. margin:auto;
  1354. margin-bottom:calc({select:post spacing}/2);
  1355. width:100%;
  1356. color:inherit;
  1357. text-transform:uppercase;
  1358. letter-spacing:1.5px;
  1359. background:transparent;
  1360. text-align:center;
  1361. word-spacing:20px;
  1362. }
  1363.  
  1364. .pg a {
  1365. display:inline-block;
  1366. color:inherit;
  1367. border-bottom:1px solid #eaeaea;
  1368. }
  1369.  
  1370. .pg a:hover {
  1371. color:{color:highlight};
  1372. border-bottom:1px solid {color:highlight};
  1373. }
  1374.  
  1375. .pg a.arrs {border-bottom:none!important;}
  1376.  
  1377.  
  1378. .pg a:hover {
  1379. color:{color:highlight};
  1380. }
  1381.  
  1382.  
  1383. .pg > * + * {margin:6px;}
  1384.  
  1385. #infscr-loading {display:none !important;}
  1386.  
  1387.  
  1388. .bottom {display:block;text-align:center;text-transform:uppercase;margin-bottom:calc({select:post spacing} / 2);}
  1389. a.append {
  1390. padding-bottom:2px;
  1391. cursor:help;
  1392. letter-spacing:1.2px;
  1393. color:inherit;
  1394. border-bottom:1px solid #eaeaea;
  1395. font-weight:bold;
  1396. }
  1397.  
  1398. a.append:hover {
  1399. color:{color:highlight};
  1400. border-bottom:1px solid {color:highlight};
  1401.  
  1402. }
  1403.  
  1404.  
  1405. div.postnotes {padding:30px;margin-top:0;}
  1406.  
  1407. /*Grid notes*/
  1408. .grid_notes .postnotes *{ margin:0; padding:0; }
  1409.  
  1410. .grid_notes .postnotes { text-align: center; }
  1411.  
  1412. .grid_notes ol.notes {margin-top:calc({select:font size} * 2);}
  1413.  
  1414. .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; }
  1415.  
  1416. .grid_notes .postnotes img{ width:calc({select:font size} * 2); height:calc({select:font size} * 2); border-radius:5%;}
  1417.  
  1418. .grid_notes li.more_notes_link_container{
  1419. width:100%!important;
  1420. }
  1421.  
  1422. /*def notes*/
  1423.  
  1424. h1.notehead {font-size:140%;margin:0 0 calc({select:font size} * 2) 0;border-bottom:none!important;}
  1425.  
  1426. .def_notes h1.notehead {margin-left:calc({select:font size}/3);}
  1427.  
  1428. .def_notes .postnotes ol.notes {list-style:none;margin:0;padding-left:5px;}
  1429.  
  1430. .def_notes .postnotes ol.notes li.note {
  1431. display:flex;
  1432. display:-webkit-flex;
  1433. display:-moz-flex;
  1434. display:-ms-flex;
  1435. align-items:center;
  1436. -webkit-align-items:center;
  1437. -moz-align-items:center;
  1438. -ms-align-items:center;
  1439. margin:{select:font size} 0 {select:font size} 0;
  1440. }
  1441.  
  1442. .def_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}
  1443.  
  1444. .def_notes .postnotes li.note:last-of-type {margin-bottom:8px;}
  1445.  
  1446. .def_notes .postnotes ol.notes li.note a.avatar_frame {height:48px;margin-right:{select:font size};}
  1447.  
  1448.  
  1449. .postnotes ol.notes li.note img.avatar {
  1450. border-radius:5%;
  1451. width:48px;
  1452. height:48px;
  1453. opacity:1;
  1454. -webkit-transition: all 0.3s ease-in-out;
  1455. transition:all 0.3s ease-in-out;
  1456. }
  1457.  
  1458.  
  1459.  
  1460. .postnotes ol.notes li.note img.avatar:hover {
  1461. opacity:0.7;
  1462. -webkit-transition: all 0.3s ease-in-out;
  1463. transition:all 0.3s ease-in-out;
  1464. }
  1465.  
  1466. .def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 70px);}
  1467.  
  1468. .def_notes .postnotes li.with_commentary blockquote {
  1469. display:none;
  1470. }
  1471.  
  1472.  
  1473. li.note span.action a {
  1474. color:inherit;
  1475. border-bottom:1px solid #eaeaea;
  1476. -webkit-transition: all 0.3s ease-in-out;
  1477. transition:all 0.3s ease-in-out;
  1478. }
  1479.  
  1480.  
  1481. li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
  1482. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a {
  1483. font-size:calc({select:font size} * 1.2);
  1484. border-bottom:1px solid #222;
  1485. margin:auto;
  1486. cursor:help;
  1487. color:inherit;
  1488. }
  1489.  
  1490. li.more_notes_link_container a:hover {color:{color:accent};border-bottom:1px solid {color:accent};}
  1491.  
  1492. li.note span.action a:hover{
  1493. color:{color:highlight};
  1494. border-bottom:1px solid {color:highlight};
  1495. -webkit-transition: all 0.3s ease-in-out;
  1496. transition:all 0.3s ease-in-out;
  1497. }
  1498.  
  1499. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1500. #leo {
  1501.  
  1502. font-family: Arial, Sans-Serif;
  1503. text-transform:uppercase;
  1504. text-align:center;
  1505. z-index:99;
  1506. box-sizing:content-box;
  1507. -webkit-box-sizing:content-box;
  1508. -moz-box-sizing:content-box;
  1509.  
  1510. }
  1511.  
  1512. #leo a {
  1513. z-index:99;
  1514. position:fixed;
  1515. font-size:12px;
  1516. line-height:16px;
  1517. width:18px;
  1518. height:18px;
  1519. font-weight:300;
  1520. bottom:10px;
  1521. right:10px;
  1522. color:#000;
  1523. background:rgba(255,255,255,0.4);
  1524. padding:5px;
  1525. transition: all 1s ease-in-out;
  1526. -webkit-transition: all 1s ease-in-out;
  1527. -o-transition: all 1s ease-in-out;
  1528. -moz-transition: all 1s ease-in-out;
  1529. box-sizing:content-box;
  1530. -webkit-box-sizing:content-box;
  1531. -moz-box-sizing:content-box;
  1532. }
  1533.  
  1534. #leo a:hover {
  1535. background-color:rgba(0,0,0,1);
  1536. color:#fff;
  1537. border-radius:50%;
  1538. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1539. -moz-animation: hermione 1s;
  1540. -o-animation: hermione 1s;
  1541. animation: hermione 1s;
  1542. animation-timing-function: ease-in-out;
  1543. -webkit-animation-timing-function: ease-in-out;
  1544. -moz-animation-timing-function: ease-in-out;
  1545. -o-animation-timing-function: ease-in-out;
  1546.  
  1547. -moz-transform: rotate(720deg); /* IE 9 */
  1548. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1549. transform: rotate(720deg);
  1550.  
  1551. transition: all 1s ease-in-out;
  1552. -webkit-transition: all 1s ease-in-out;
  1553. -o-transition: all 1s ease-in-out;
  1554. -moz-transition: all 1s ease-in-out;
  1555.  
  1556.  
  1557. }
  1558.  
  1559. @-webkit-keyframes hermione {
  1560. 0% {color:#000;}
  1561. 25% {color:#ACE4EA;}
  1562. 50% {color:#FFFBDD;}
  1563. 75% {color:#ACE4EA;}
  1564. 100% {color:#fff;}
  1565. }
  1566. @-moz-keyframes hermione {
  1567. 0% {color:#000;}
  1568. 25% {color:#ACE4EA;}
  1569. 50% {color:#FFFBDD;}
  1570. 75% {color:#ACE4EA;}
  1571. 100% {color:#fff;}
  1572. }
  1573. @-o-keyframes hermione {
  1574. 0% {color:#000;}
  1575. 25% {color:#ACE4EA;}
  1576. 50% {color:#FFFBDD;}
  1577. 75% {color:#ACE4EA;}
  1578. 100% {color:#fff;}
  1579. }
  1580.  
  1581. @keyframes hermione {
  1582. 0% {color:#000;}
  1583. 25% {color:#ACE4EA;}
  1584. 50% {color:#FFFBDD;}
  1585. 75% {color:#ACE4EA;}
  1586. 100% {color:#fff;}
  1587. }
  1588. /*END OF CREDIT*/
  1589.  
  1590. </style>
  1591.  
  1592. <link href="https://static.tumblr.com/qp1dgt3/4Sppaxuyp/th12-1-res.css" rel="stylesheet" type="text/css"/>
  1593.  
  1594. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  1595.  
  1596. <script>
  1597. var elems = document.querySelectorAll('html,body');
  1598. window.addEventListener('resize', function(e) {
  1599. elems.forEach(function(elem){
  1600. elem.clientHeight = window.innerHeight;
  1601. });
  1602. });
  1603. </script>
  1604.  
  1605. <script>
  1606. $(document).ready(function(){
  1607. $('.search').submit(function(event){
  1608. var value = $('input:first').val();
  1609. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  1610. });
  1611.  
  1612. });
  1613. </script>
  1614.  
  1615. <script>
  1616. $(document).ready(function(){
  1617. var item_num = $('#sidebar nav li').length + 1;
  1618. var btn_state = true;
  1619.  
  1620. $('#sidebar nav li').hover(function(){
  1621. $(this).addClass('hover');
  1622. },function(){
  1623. $(this).removeClass('hover');
  1624. });
  1625.  
  1626. $('#sidebar nav li').on('click',function(){
  1627. if(btn_state){
  1628. btn_state = !btn_state;
  1629. $('#sidebar nav li').removeClass('currentPage');
  1630. $(this).addClass('currentPage');
  1631.  
  1632. var i = $('#sidebar nav li').index(this);
  1633. $('article').removeClass('show');
  1634. $('article').addClass('hide');
  1635. $('article').eq(i).addClass('show');
  1636.  
  1637. setTimeout(function(){
  1638. btn_state = !btn_state;
  1639. },500);
  1640. }
  1641. });
  1642.  
  1643.  
  1644. });
  1645. </script>
  1646.  
  1647. <script>
  1648. $(document).ready(function(){
  1649. var item_num = $('#sidebar nav li').length + 1;
  1650. var btn_state = true;
  1651.  
  1652. $('#sidebar nav li').hover(function(){
  1653. $(this).addClass('hover');
  1654. },function(){
  1655. $(this).removeClass('hover');
  1656. });
  1657.  
  1658. $('#sidebar nav li').on('click',function(){
  1659. if(btn_state){
  1660. btn_state = !btn_state;
  1661. $('#sidebar nav li').removeClass('currentPage');
  1662. $(this).addClass('currentPage');
  1663.  
  1664. var i = $('#sidebar nav li').index(this);
  1665. $('article').removeClass('show');
  1666. $('article').addClass('hide');
  1667. $('article').eq(i).addClass('show');
  1668.  
  1669. setTimeout(function(){
  1670. btn_state = !btn_state;
  1671. },500);
  1672. }
  1673. });
  1674.  
  1675.  
  1676. });
  1677. </script>
  1678.  
  1679. <script>
  1680. $(document).ready(function(){
  1681. var item_num = $('.mobtabs li').length + 1;
  1682. var btn_state = true;
  1683.  
  1684. $('.mobtabs li').hover(function(){
  1685. $(this).addClass('hover');
  1686. },function(){
  1687. $(this).removeClass('hover');
  1688. });
  1689.  
  1690. $('.mobtabs li').on('click',function(){
  1691. if(btn_state){
  1692. btn_state = !btn_state;
  1693. $('.mobtabs li').removeClass('currentPage');
  1694. $(this).addClass('currentPage');
  1695.  
  1696. var i = $('.mobtabs li').index(this);
  1697. $('article').removeClass('show');
  1698. $('article').addClass('hide');
  1699. $('article').eq(i).addClass('show');
  1700.  
  1701. setTimeout(function(){
  1702. btn_state = !btn_state;
  1703. },500);
  1704. }
  1705. });
  1706.  
  1707.  
  1708. });
  1709. </script>
  1710.  
  1711. <!-- animsition.css -->
  1712. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  1713.  
  1714. <!-- animsition.js -->
  1715. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  1716.  
  1717.  
  1718. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1719. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1720.  
  1721. <script>
  1722. $(document).ready(function() {
  1723.  
  1724. $(".animsition").animsition({
  1725. inClass: 'fade-in',
  1726. outClass: 'fade-out',
  1727. inDuration: 1500,
  1728. outDuration: 800,
  1729. linkElement: '.a-link',
  1730. loading: true,
  1731. loadingParentElement: 'body',
  1732. loadingClass: 'animsition-loading',
  1733. loadingInner: '',
  1734. timeout: true,
  1735. timeoutCountdown: 200,
  1736. onLoadEvent: true,
  1737. browser: [ 'animation-duration', '-webkit-animation-duration'],
  1738. overlay : false,
  1739. overlayClass : 'animsition-overlay-slide',
  1740. overlayParentElement : 'body',
  1741. transition: function(url){ window.location.href = url; }
  1742. });
  1743.  
  1744. $('.photo-slideshow').pxuPhotoset({
  1745. lightbox: true,
  1746. rounded: false,
  1747. gutter: '0px',
  1748. borderRadius: '0px',
  1749. photoset: '.photo-slideshow',
  1750. photoWrap: '.photo-data',
  1751. photo: '.pxu-photo'
  1752. });
  1753. });
  1754. </script>
  1755.  
  1756. {block:indexpage}
  1757. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  1758.  
  1759. <script>
  1760. $(function() {
  1761. $( ".dragtags" ).draggable({
  1762. axis: "x",
  1763. revert: true,
  1764. revertDuration: 300
  1765. });
  1766. });
  1767. </script>
  1768. {/block:indexpage}
  1769.  
  1770.  
  1771.  
  1772.  
  1773.  
  1774.  
  1775. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1776.  
  1777. <script>
  1778.  
  1779. $(function(){
  1780.  
  1781. $('.unnested .posts').unnest({
  1782. yourCaption: ".captions", //your caption selector, the div wrapping
  1783. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1784. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1785. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1786. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1787. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1788. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1789. });
  1790.  
  1791.  
  1792.  
  1793. });
  1794.  
  1795. </script>
  1796.  
  1797. {block:indexpage}
  1798. {block:ifinfinitescroll}
  1799. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  1800.  
  1801. <script>
  1802.  
  1803. // Infinite Scroll
  1804. $(function() {
  1805.  
  1806. var $container = $('#postwrapper');
  1807. $container.infinitescroll({
  1808.  
  1809. loading: {
  1810. finishedMsg: "<em>No more posts</em>",
  1811. img: null,
  1812. msg: null,
  1813. msgText: "<em>Loading posts...</em>",
  1814. {block:ifmanualload}
  1815. finished: function () {$('.append').text('Load More'); },
  1816. {/block:ifmanualload}
  1817.  
  1818. },
  1819.  
  1820. navSelector : '.pg',
  1821. nextSelector : '.pg a:last',
  1822. itemSelector : '.posts',
  1823. {block:ifmanualload}
  1824. errorCallback: function () {$('.append').fadeOut();},
  1825. {/block:ifmanualload}
  1826. bufferPx : 200,
  1827.  
  1828. },
  1829.  
  1830. function( newElements ) {
  1831. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  1832. lightbox: true,
  1833. rounded: true,
  1834. gutter: '0px',
  1835. borderRadius: '0px',
  1836. photoset: '.photo-slideshow',
  1837. photoWrap: '.photo-data',
  1838. photo: '.pxu-photo'
  1839. });
  1840.  
  1841. $( newElements ).find('.dragtags').draggable({
  1842. axis: "x",
  1843. revert: true,
  1844. revertDuration: 300
  1845. });
  1846.  
  1847.  
  1848.  
  1849.  
  1850. var $newElems = $(newElements);
  1851. var $newElemsIDs = $newElems.map(function(){
  1852. return this.id;
  1853. }).get();
  1854. console.log($newElems, $newElemsIDs);
  1855. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1856.  
  1857. {block:ifunnestedcaptions}
  1858. $newElems.unnest({
  1859.  
  1860. yourCaption: ".captions",
  1861. wrapName: ".tumblr_parent",
  1862. newCaptionUsername: false,
  1863. originalPostCaptionUsername: false,
  1864. tumblrAvatars: true,
  1865. tumblrAvatarClass: ".tumblr_avatar",
  1866. usernameColon: false
  1867.  
  1868. });
  1869.  
  1870. {/block:ifunnestedcaptions}
  1871.  
  1872.  
  1873.  
  1874. });
  1875.  
  1876. {block:ifmanualload}
  1877. $container.infinitescroll('unbind');
  1878. $('.append').on('click', function(e) {
  1879. e.preventDefault();
  1880. $container.infinitescroll('retrieve');
  1881. });
  1882. {/block:ifmanualload}
  1883. });
  1884. </script>
  1885. {/block:ifinfinitescroll}
  1886. {/block:indexpage}
  1887.  
  1888. </head>
  1889. <body class="animsition {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display}">
  1890.  
  1891. <main>
  1892.  
  1893. <header>
  1894. <nav class="desktop_menu">
  1895. <a class="a-link tbtitle" href="/">{Title}</a>
  1896. <ul>
  1897. <li><a href="{text:link1 URL}">{text:link1}</a></li>
  1898. <li><a href="{text:link2 URL}">{text:link2}</a></li>
  1899. <li><a href="{text:link3 URL}">{text:link3}</a></li>
  1900. <li><a href="{text:link4 URL}">{text:link4}</a></li>
  1901. <li><a href="{text:link5 URL}">{text:link5}</a></li>
  1902. </ul>
  1903. </nav>
  1904.  
  1905. <nav class="mobtabs">
  1906. <ul>
  1907. <li class="gnav1">Posts</li>
  1908. <li class="gnav2">FAQ</li>
  1909. <li class="gnav3">Links</li>
  1910. {block:following}<li class="gnav4">Blogroll</li>{/block:following}
  1911. </ul>
  1912. </nav>
  1913.  
  1914.  
  1915.  
  1916. <div class="searchblog">
  1917.  
  1918. <div class="sbexplore">
  1919.  
  1920. <span class="lnr lnr-magnifier"></span>
  1921. <form class="search" action="javascript:return false">
  1922. <input type="text" name="q" value="" class="query" placeholder="explore">
  1923.  
  1924. </form>
  1925. </div>
  1926. </div>
  1927.  
  1928. </header>
  1929.  
  1930.  
  1931. <div class="contwrap">
  1932.  
  1933. <aside>
  1934. <div id="sidebar">
  1935.  
  1936. <div class="ttl"><a href="/"class="a-link">{Title}</a></div>
  1937.  
  1938.  
  1939. <div class="sbhover">
  1940. <div class="hovere">
  1941. <img src ="{image:sidebar img}">
  1942.  
  1943. <div class="overlay">
  1944. <h2>{text:basics}</h2>
  1945. <div class="info">
  1946. {block:description}
  1947. <p>{Description}</p>
  1948. {/block:description}
  1949. </div>
  1950. </div>
  1951.  
  1952. </div>
  1953. </div>
  1954.  
  1955. <nav>
  1956. <ul>
  1957. <li class="gnav1">Posts</li>
  1958. <li class="gnav2">FAQ</li>
  1959. <li class="gnav3">Links</li>
  1960. {block:following} <li class="gnav4">Blogroll</li>{/block:following}
  1961. </ul>
  1962. </nav>
  1963.  
  1964.  
  1965. </div>
  1966. </aside>
  1967.  
  1968. <div class="contents"id="contents">
  1969. <div class="tabcont">
  1970.  
  1971. <!--Posts-->
  1972. <article id="page1" class="show top">
  1973. <section>
  1974.  
  1975. <div class="mobile-sb">
  1976. <h1><a href="/"class="a-link">{Title}</a></h1>
  1977. <div class="profs">
  1978. <img src="{Favicon}">
  1979. </div>
  1980. <h2>{text:basics}</h2>
  1981. {block:description}
  1982. <p>{Description}</p>
  1983. {/block:description}
  1984.  
  1985. </div>
  1986.  
  1987. <div id="postwrapper">
  1988.  
  1989. {block:posts}
  1990.  
  1991. <div class="posts" id="{PostID}">
  1992.  
  1993.  
  1994. {block:date}
  1995. <div class="postinfo">
  1996. <div class="pdate">
  1997. <a href="{Permalink}"class="a-link"title="{TimeAgo}">
  1998. <span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}
  1999. </a>
  2000. </div>
  2001.  
  2002. <div class="socactions">
  2003. <div class="rihrih">
  2004.  
  2005. <a href="{ReblogURL}" target="_blank" title="Reblog">
  2006. <svg class="lnr lnr-redo"><use xlink:href="#lnr-redo">
  2007. <symbol id="lnr-redo" viewBox="0 0 1024 1024"><path class="path1" d="M127.467 229.867c82.198-82.198 191.488-127.467 307.733-127.467 116.246 0 225.534 45.269 307.733 127.467s127.467 191.486 127.467 307.733v66.197l109.899-109.899c9.997-9.997 26.206-9.997 36.203 0 9.998 9.997 9.998 26.206 0 36.203l-153.6 153.6c-5 5-11.55 7.499-18.102 7.499s-13.102-2.499-18.101-7.499l-153.6-153.6c-9.998-9.997-9.998-26.206 0-36.203 9.997-9.997 26.206-9.997 36.203 0l109.898 109.899v-66.197c0-211.738-172.262-384-384-384-211.739 0-384 172.262-384 384 0 211.739 172.261 384 384 384 14.139 0 25.6 11.461 25.6 25.6s-11.461 25.6-25.6 25.6c-116.245 0-225.534-45.269-307.733-127.467s-127.467-191.488-127.467-307.733c0-116.246 45.269-225.534 127.467-307.733z"></path></symbol>
  2008. </use></svg>
  2009. </a>
  2010. </div>
  2011.  
  2012. <div class="custom-like-button">
  2013. {LikeButton size="16"}
  2014. <span class="our_button">
  2015. <svg class="lnr lnr-heart"><use xlink:href="#lnr-heart">
  2016. <symbol id="lnr-heart" viewBox="0 0 1024 1024"><path class="path1" d="M486.4 972.8c-4.283 0-8.566-1.074-12.434-3.222-4.808-2.67-119.088-66.624-235.122-171.376-68.643-61.97-123.467-125.363-162.944-188.418-50.365-80.443-75.901-160.715-75.901-238.584 0-148.218 120.582-268.8 268.8-268.8 50.173 0 103.462 18.805 150.051 52.952 27.251 19.973 50.442 44.043 67.549 69.606 17.107-25.565 40.299-49.634 67.55-69.606 46.589-34.147 99.878-52.952 150.050-52.952 148.218 0 268.8 120.582 268.8 268.8 0 77.869-25.538 158.141-75.901 238.584-39.478 63.054-94.301 126.446-162.944 188.418-116.034 104.754-230.314 168.706-235.122 171.376-3.867 2.149-8.15 3.222-12.434 3.222zM268.8 153.6c-119.986 0-217.6 97.614-217.6 217.6 0 155.624 120.302 297.077 221.224 388.338 90.131 81.504 181.44 138.658 213.976 158.042 32.536-19.384 123.845-76.538 213.976-158.042 100.922-91.261 221.224-232.714 221.224-388.338 0-119.986-97.616-217.6-217.6-217.6-87.187 0-171.856 71.725-193.314 136.096-3.485 10.453-13.267 17.504-24.286 17.504s-20.802-7.051-24.286-17.504c-21.456-64.371-106.125-136.096-193.314-136.096z"></path></symbol>
  2017. </use></svg>
  2018. </span>
  2019. </div>
  2020. </div>
  2021.  
  2022. </div>
  2023.  
  2024. {/block:date}
  2025.  
  2026.  
  2027. <!--Photo post-->
  2028. {block:photo}
  2029. {LinkOpenTag}
  2030. <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">
  2031. <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">
  2032. </a>
  2033. {LinkCloseTag}
  2034.  
  2035. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2036. {/block:photo}
  2037. <!--/Photo post-->
  2038.  
  2039. <!--Photoset post-->
  2040. {block:Photoset}
  2041. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2042.  
  2043. {block:Photos}
  2044. <div class="photo-data">
  2045. <div class="pxu-photo">
  2046. <img class="pffft" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  2047. </div>
  2048. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2049. </div>
  2050. {/block:Photos}
  2051.  
  2052. </div>
  2053.  
  2054. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2055. {/block:Photoset}
  2056. <!--/Photoset post-->
  2057.  
  2058. <!--Chat-->
  2059. {block:chat}
  2060. {block:title}<h1>{Title}</h1>{/block:title}
  2061. <ul class="chatlines">
  2062. {block:Lines}
  2063. <li class="clines {Alt}">
  2064. {block:Label}<b>{Label}</b>{/block:Label}
  2065. {Line}
  2066. </li>
  2067. {/block:Lines}
  2068. </ul>
  2069. {/block:chat}
  2070.  
  2071. <!--Quote-->
  2072. {block:Quote}
  2073. <div class="pads">
  2074. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  2075.  
  2076. {block:Source}
  2077.  
  2078. <div class="divider"></div>
  2079.  
  2080. <span class="qsource">{Source}</span>{/block:Source}
  2081. </div>
  2082. {/block:Quote}
  2083. <!--/Quote-->
  2084.  
  2085. <!--Ask post-->
  2086. {block:Answer}
  2087. <div class="ask_cont pads">
  2088.  
  2089. <img src="{AskerPortraitURL-64}">
  2090.  
  2091. <span>{Asker}:</span> {Question}
  2092.  
  2093. </div>
  2094. <div class="captions">
  2095. {Answer}
  2096. </div>
  2097. {/block:Answer}
  2098. <!--/Ask post-->
  2099.  
  2100. <!--Text-->
  2101. {block:text}
  2102. {block:title}<div class="pads txttitle"><h1>{Title}</h1></div>{/block:title}
  2103. <div class="captions">{body}</div>
  2104. {/block:text}
  2105. <!--Text-->
  2106.  
  2107. <!--Video-->
  2108. {block:Video}
  2109. <div class="video">{Video-500}</div>
  2110. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2111. {/block:Video}
  2112. <!--/Video-->
  2113.  
  2114. <!--Audio-->
  2115. {block:Audio}
  2116. <div class="audio_cont">
  2117. <div class="audio_cover">
  2118.  
  2119. <div class="playback">
  2120. <div class="playbox">{AudioPlayerWhite}</div>
  2121. </div>
  2122.  
  2123. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2124.  
  2125. {block:AlbumArt}
  2126. <img src="{AlbumArtURL}" style="position:absolute;">
  2127. {/block:AlbumArt}
  2128. </div>
  2129. <div class="audio_info">
  2130. <div>
  2131. {block:TrackName}
  2132. <b>Song:</b> {TrackName}
  2133. {/block:TrackName}<br>
  2134.  
  2135. {block:Artist}
  2136. <b>Artist:</b> {Artist}
  2137. {/block:Artist}<br>
  2138.  
  2139. {block:Album}
  2140. <b>Album:</b> {Album}
  2141. {/block:Album}
  2142. </div>
  2143. </div>
  2144.  
  2145. </div>
  2146. {block:Caption}
  2147. <div class="captions">{Caption}</div>
  2148. {/block:Caption}
  2149. {/block:Audio}
  2150. <!--/Audio-->
  2151.  
  2152. <!--Link-->
  2153. {block:link}
  2154. <div class="pads link_cont">
  2155. <h1 class="plink"><a href="{URL}"><span class="lnr lnr-link"></span> {Name}</a></h1>
  2156. </div>
  2157. {block:Description}
  2158. <div class="captions">{Description}</div>
  2159. {/block:Description}
  2160. {/block:link}
  2161. <!--/Link-->
  2162.  
  2163.  
  2164. {block:indexpage}
  2165. {block:hastags}
  2166. <div class="tagwrap">
  2167. <div class="tags dragtags">
  2168.  
  2169. {block:tags}<a href="{TagURL}"class="a-link">#{Tag}</a>{/block:tags}
  2170. </div>
  2171. </div>
  2172. {/block:hastags}
  2173. {/block:indexpage}
  2174.  
  2175. <!-- {block:NoRebloggedFrom}
  2176. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2177. {/block:NoRebloggedFrom} -->
  2178.  
  2179. {block:ContentSource}<!-- {SourceURL}
  2180. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  2181. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2182. {/block:ContentSource}
  2183. </div>
  2184.  
  2185. {block:permalinkpage}
  2186. {block:NoteCount}
  2187. <div class="posts postnotes">
  2188. <h1 class="notehead">{NoteCountWithLabel}</h1>
  2189. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  2190. </div>
  2191. {/block:NoteCount}
  2192. {/block:permalinkpage}
  2193.  
  2194.  
  2195. {/block:posts}
  2196.  
  2197. </div>
  2198.  
  2199. {block:indexpage}
  2200. <!--pagination-->
  2201. {block:pagination}
  2202. <div class="pg">
  2203. {block:PreviousPage}<a class="a-link arrs" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  2204. {block:JumpPagination length="5"}
  2205. {block:CurrentPage}<span class="current"><em>{PageNumber}</em></span>{/block:CurrentPage}
  2206. {block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  2207. {block:NextPage}<a class="a-link arrs" href="{NextPage}">&raquo;</a>{/block:NextPage}
  2208. </div>
  2209. {/block:pagination}
  2210. <!--/pagination-->
  2211.  
  2212. {block:ifmanualload}
  2213. {block:Pagination}
  2214.  
  2215. <div class="bottom"><a class="append">Load More</a></div>
  2216. {/block:Pagination}
  2217. {/block:ifmanualload}
  2218.  
  2219. {/block:indexpage}
  2220.  
  2221.  
  2222. </section>
  2223. </article>
  2224. <!--/Posts-->
  2225.  
  2226.  
  2227. <!--Info + FAQ-->
  2228. <article id="page2">
  2229. <section>
  2230. <div class="tabstuff">
  2231.  
  2232. <h1>Info + FAQ</h1>
  2233.  
  2234. <p>{text:info text}</p>
  2235.  
  2236. <p class="tabq">{text:question 1}</p>
  2237.  
  2238. <p class="taba">{text:answer 1}</p>
  2239.  
  2240. <p class="tabq">{text:question 2}</p>
  2241.  
  2242. <p class="taba">{text:answer 2}</p>
  2243.  
  2244. <p class="tabq">{text:question 3}</p>
  2245.  
  2246. <p class="taba">{text:answer 3}</p>
  2247.  
  2248.  
  2249.  
  2250. <h2>{AskLabel}</h2>
  2251. <p>
  2252.  
  2253. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  2254.  
  2255. </p>
  2256.  
  2257. </div>
  2258. </section>
  2259. </article>
  2260. <!--/Info + FAQ-->
  2261.  
  2262. <!--Mobile Links-->
  2263. <article id="page3">
  2264. <section>
  2265. <div class="tabstuff">
  2266. <h1>Navigation</h1>
  2267. <div class="navigrid">
  2268.  
  2269. <div class="navi-items">
  2270. <h6>{text:nav category 1}</h6>
  2271.  
  2272. <ul>
  2273. <li><a href="{text:navilink 1 URL}">{text:navilink 1}</a></li>
  2274. <li><a href="{text:navilink 2 URL}">{text:navilink 2}</a></li>
  2275. <li><a href="{text:navilink 3 URL}">{text:navilink 3}</a></li>
  2276. <li><a href="{text:navilink 4 URL}">{text:navilink 4}</a></li>
  2277. </ul>
  2278.  
  2279.  
  2280.  
  2281.  
  2282. </div>
  2283.  
  2284. <div class="navi-items">
  2285. <h6>{text:nav category 2}</h6>
  2286.  
  2287. <ul>
  2288. <li><a href="{text:navilink 5 URL}">{text:navilink 5}</a></li>
  2289. <li><a href="{text:navilink 6 URL}">{text:navilink 6}</a></li>
  2290. <li><a href="{text:navilink 7 URL}">{text:navilink 7}</a></li>
  2291. <li><a href="{text:navilink 8 URL}">{text:navilink 8}</a></li>
  2292. </ul>
  2293. </div>
  2294.  
  2295. <div class="navi-items">
  2296. <h6>{text:nav category 3}</h6>
  2297.  
  2298. <ul>
  2299. <li><a href="{text:navilink 9 URL}">{text:navilink 9}</a></li>
  2300. <li><a href="{text:navilink 10 URL}">{text:navilink 10}</a></li>
  2301. <li><a href="{text:navilink 11 URL}">{text:navilink 11}</a></li>
  2302. <li><a href="{text:navilink 12 URL}">{text:navilink 12}</a></li>
  2303. </ul>
  2304.  
  2305. </div>
  2306.  
  2307. </div>
  2308. </div>
  2309. </section>
  2310. </article>
  2311. <!--/Mobile Links-->
  2312.  
  2313. {block:Following}
  2314.  
  2315.  
  2316. <article id="page4">
  2317. <section>
  2318. <div class="tabstuff">
  2319. <h1>Blogroll</h1>
  2320. <div class="brollcont">
  2321.  
  2322.  
  2323. {block:Followed}
  2324.  
  2325. <div class="brollstuff">
  2326. <a href="{FollowedURL}"title="{FollowedName}"><img src="{FollowedPortraitURL-128}"></a>
  2327. </div>
  2328.  
  2329. {/block:Followed}
  2330.  
  2331.  
  2332.  
  2333.  
  2334. </div>
  2335. </div>
  2336. </section>
  2337. </article>
  2338.  
  2339.  
  2340. {/block:Following}
  2341.  
  2342. </div>
  2343. </div>
  2344.  
  2345. </div>
  2346.  
  2347. </main>
  2348.  
  2349.  
  2350.  
  2351. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  2352. <div id="leo">
  2353. <a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
  2354. </div>
  2355. <!--END OF CREDIT-->
  2356.  
  2357.  
  2358. <script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>
  2359.  
  2360. <script>
  2361. $(document).ready(function(){
  2362.  
  2363. $("a[title],img[title],[title]").style_my_tooltips({
  2364.  
  2365. tip_follows_cursor:true,
  2366.  
  2367. tip_delay_time:30,
  2368.  
  2369. tip_fade_speed:300,
  2370.  
  2371. attribute:"title"
  2372.  
  2373. });
  2374.  
  2375. });
  2376.  
  2377. </script>
  2378.  
  2379. </body>
  2380. </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!