API tools faq
paste
hermionemessi

Theme 14

hermionemessi
Sep 29th, 2018
1,541
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--THEME 14 Fugue 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. <meta charset="UTF-8" />
  30. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32. <link rel="shortcut icon" href="{Favicon}">
  33.  
  34. <meta name="image:sidebar" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  35.  
  36. <meta name="if:show block 4"content="">
  37. <meta name="if:show block 5"content="">
  38. <meta name="if:show block 6"content="">
  39. <meta name="if:show blogroll"content="">
  40.  
  41. <meta name="color:accent"content="#C04848">
  42. <meta name="color:highlight"content="#40E0D0">
  43. <meta name="color:grad1" content="#fafafa">
  44. <meta name="color:grad2" content="#cdcdcd">
  45.  
  46. <meta name="select:background"content="simple_bg" title="simple">
  47. <meta name="select:background"content="grad_bg" title="gradient">
  48. <meta name="select:background"content="white_bg" title="white">
  49.  
  50. <meta name="select:font size" content="16px" title="16px">
  51. <meta name="select:font size" content="14px" title="14px">
  52. <meta name="select:font size" content="12px" title="12px">
  53. <meta name="select:font size" content="11px" title="11px">
  54. <meta name="select:font size" content="10px" title="10px">
  55. <meta name="select:font size" content="9px" title="9px">
  56.  
  57. <meta name="select:post width"content="post500"title="500px"/>
  58. <meta name="select:post width"content="post700"title="700px"/>
  59. <meta name="select:post width"content="post540"title="540px"/>
  60. <meta name="select:post width"content="post450"title="450px"/>
  61. <meta name="select:post width"content="post400"title="400px"/>
  62. <meta name="select:post width"content="post350"title="350px"/>
  63.  
  64.  
  65. <meta name="select:post spacing" content="150px">
  66. <meta name="select:post spacing" content="60px">
  67. <meta name="select:post spacing" content="80px">
  68. <meta name="select:post spacing" content="100px">
  69. <meta name="select:post spacing" content="120px">
  70.  
  71. <meta name="select:photoset gutter"content="5px"title="5px">
  72. <meta name="select:photoset gutter"content="10px"title="10px">
  73. <meta name="select:photoset gutter"content="2px"title="2px">
  74. <meta name="select:photoset gutter"content="1px"title="1px">
  75. <meta name="select:photoset gutter"content="0px"title="0px">
  76.  
  77. <meta name="select:notes display" content="def_notes" title="default">
  78. <meta name="select:notes display" content="grid_notes" title="grid">
  79.  
  80. <meta name="text:basic info" content="name, age, mbti">
  81.  
  82. <meta name="text:info text" content="Lorem Ipsum">
  83.  
  84. <meta name="text:question 1" content="This is a question?">
  85. <meta name="text:answer 1" content="This is an answer.">
  86. <meta name="text:question 2" content="This is a question?">
  87. <meta name="text:answer 2" content="This is an answer.">
  88. <meta name="text:question 3" content="This is a question?">
  89. <meta name="text:answer 3" content="This is an answer.">
  90.  
  91. <meta name="text:nav category 1" content="category 1">
  92. <meta name="text:nav category 2" content="category 2">
  93. <meta name="text:nav category 3" content="category 3">
  94. <meta name="text:nav category 4" content="category 4">
  95. <meta name="text:nav category 5" content="category 5">
  96. <meta name="text:nav category 6" content="category 6">
  97.  
  98. <meta name="text:navilink 1" content="link">
  99. <meta name="text:navilink 1 URL" content="/">
  100. <meta name="text:navilink 2" content="link">
  101. <meta name="text:navilink 2 URL" content="/">
  102. <meta name="text:navilink 3" content="link">
  103. <meta name="text:navilink 3 URL" content="/">
  104. <meta name="text:navilink 4" content="link">
  105. <meta name="text:navilink 4 URL" content="/">
  106. <meta name="text:navilink 5" content="link">
  107. <meta name="text:navilink 5 URL" content="/">
  108. <meta name="text:navilink 6" content="link">
  109. <meta name="text:navilink 6 URL" content="/">
  110. <meta name="text:navilink 7" content="link">
  111. <meta name="text:navilink 7 URL" content="/">
  112. <meta name="text:navilink 8" content="link">
  113. <meta name="text:navilink 8 URL" content="/">
  114. <meta name="text:navilink 9" content="link">
  115. <meta name="text:navilink 9 URL" content="/">
  116. <meta name="text:navilink 10" content="link">
  117. <meta name="text:navilink 10 URL" content="/">
  118. <meta name="text:navilink 11" content="link">
  119. <meta name="text:navilink 11 URL" content="/">
  120. <meta name="text:navilink 12" content="link">
  121. <meta name="text:navilink 12 URL" content="/">
  122. <meta name="text:navilink 13" content="link">
  123. <meta name="text:navilink 13 URL" content="/">
  124. <meta name="text:navilink 14" content="link">
  125. <meta name="text:navilink 14 URL" content="/">
  126. <meta name="text:navilink 15" content="link">
  127. <meta name="text:navilink 15 URL" content="/">
  128. <meta name="text:navilink 16" content="link">
  129. <meta name="text:navilink 16 URL" content="/">
  130. <meta name="text:navilink 17" content="link">
  131. <meta name="text:navilink 17 URL" content="/">
  132. <meta name="text:navilink 18" content="link">
  133. <meta name="text:navilink 18 URL" content="/">
  134. <meta name="text:navilink 19" content="link">
  135. <meta name="text:navilink 19 URL" content="/">
  136. <meta name="text:navilink 20" content="link">
  137. <meta name="text:navilink 20 URL" content="/">
  138. <meta name="text:navilink 21" content="link">
  139. <meta name="text:navilink 21 URL" content="/">
  140. <meta name="text:navilink 22" content="link">
  141. <meta name="text:navilink 22 URL" content="/">
  142. <meta name="text:navilink 23" content="link">
  143. <meta name="text:navilink 23 URL" content="/">
  144. <meta name="text:navilink 24" content="link">
  145. <meta name="text:navilink 24 URL" content="/">
  146.  
  147. <link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i" rel="stylesheet">
  148.  
  149. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  150.  
  151. <link href="https://static.tumblr.com/0podkko/bwepdyarh/photosets.css" rel="stylesheet">
  152.  
  153. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  154.  
  155. <style type="text/css">
  156.  
  157. /*Tumblr Controls*/
  158. .iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  159. -webkit-transform:scale(0.8);
  160. -webkit-transform-origin:right;
  161. -moz-transform:scale(0.8);
  162. -moz-transform-origin:right;
  163. -o-transform:scale(0.8);
  164. -o-transform-origin:right;
  165. -ms-transform:scale(0.8);
  166. -ms-transform-origin:right;
  167. transform:scale(0.8);
  168. transform-origin:right;
  169.  
  170. }
  171.  
  172. .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;}
  173.  
  174. .tmblr-iframe-pushdown {padding-top: 0 !important;}
  175.  
  176. {block:permalinkpage}
  177. iframe.tmblr-iframe--unified-controls {max-width:500px!important;}
  178. {/block:permalinkpage}
  179.  
  180. #loading_overlay {
  181. position:fixed;
  182. width:100%;
  183. height:100%;
  184. z-index:200;
  185. top:-100%;
  186. left:0;
  187. display:flex;
  188. display:-webkit-flex;
  189. display:-moz-flex;
  190. display:-ms-flex;
  191. display: -webkit-box;
  192. align-items:center;
  193. -webkit-align-items:center;
  194. -moz-align-items:center;
  195. -ms-align-items:center;
  196. justify-content:center;
  197. -webkit-justify-content:center;
  198. -moz-justify-content:center;
  199. -ms-justify-content:center;
  200. -webkit-box-align: center;
  201. -webkit-box-pack:center;
  202. animation-name: fugue;
  203. animation-duration: 3s;
  204. transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  205. }
  206.  
  207.  
  208.  
  209. .lds-dual-ring {
  210. display: inline-block;
  211. width: 64px;
  212. height: 64px;
  213. }
  214. .lds-dual-ring:after {
  215. content: " ";
  216. display: block;
  217. width: 46px;
  218. height: 46px;
  219. margin: 1px;
  220. border-radius: 50%;
  221. border: 5px solid #222;
  222. border-color: #222 transparent #222 transparent;
  223. animation: lds-dual-ring 1.2s linear infinite;
  224. }
  225. @keyframes lds-dual-ring {
  226. 0% {
  227. transform: rotate(0deg);
  228. }
  229. 100% {
  230. transform: rotate(360deg);
  231. }
  232. }
  233.  
  234. @keyframes fugue {
  235. 0% {top:0;}
  236. 40% {top:0;}
  237. 100% {top:-100%;}
  238. }
  239.  
  240. aside * {
  241. margin:0;
  242. padding:0;
  243. }
  244.  
  245. *,
  246. *::before,
  247. *::after {
  248. box-sizing: inherit;
  249. -webkit-box-sizing: inherit;
  250. -moz-box-sizing: inherit;
  251. }
  252.  
  253. html, body, main {height:100%;width:100%;}
  254.  
  255. html {
  256. box-sizing: border-box;
  257. -webkit-box-sizing: border-box;
  258. -moz-box-sizing: border-box;
  259. }
  260.  
  261. body {
  262. line-height:160%;
  263. margin:0;
  264. padding:0;
  265. font-family:'EB Garamond',serif;
  266. font-size:{select:font size};
  267. -webkit-font-smoothing: antialiased;
  268. -moz-osx-font-smoothing: grayscale;
  269. color:#222;
  270. }
  271.  
  272. #loading_overlay,body {background-attachment:fixed;}
  273.  
  274. .simple_bg #loading_overlay, body.simple_bg {background:#efefef;}
  275.  
  276. .white_bg #loading_overlay,body.white_bg {background:#fff;}
  277.  
  278. .grad_bg #loading_overlay,body.grad_bg {
  279. background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  280. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  281. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  282. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  283. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  284. }
  285.  
  286. ::-webkit-scrollbar {
  287. width:4px;
  288. background:#fff;
  289. }
  290.  
  291. ::-webkit-scrollbar:horizontal {display:none;}
  292.  
  293. ::-webkit-scrollbar-thumb { background-color: {color:accent}; border-radius:1ex;}
  294.  
  295. ::selection {background:{color:accent}; color:#fff;}
  296. ::-moz-selection {background:{color:accent};color:#fff;}
  297. ::-webkit-selection {background:{color:accent};color:#fff;}
  298.  
  299. a {
  300. text-decoration:none;
  301. color:#999;
  302. cursor:help;
  303. -webkit-transition: all 0.3s ease-in-out;
  304. transition:all 0.3s ease-in-out;
  305. }
  306.  
  307. a:hover {
  308. color:{color:highlight};
  309. -webkit-transition: all 0.3s ease-in-out;
  310. transition:all 0.3s ease-in-out;
  311. }
  312.  
  313. /*CSS tooltip*/
  314.  
  315. [tooltip], a[title] {
  316. position:relative;
  317. }
  318.  
  319. a[title]::after, [tooltip]::after{z-index:3;}
  320.  
  321.  
  322. [tooltip]::after {content: attr(tooltip);}
  323. a[title]::after {content: attr(title);}
  324.  
  325. .topbar [tooltip]::after {font-size:12px;min-width:100px;}
  326. .socs [tooltip]::after {min-width:80px;}
  327.  
  328. body.grid_notes .postnotes a[title]::after {display:none!important;}
  329.  
  330. [tooltip]::after,a[title]::after {
  331. position: absolute;
  332. left:50%;
  333. top:-6px;
  334. transform: translateX(-50%) translateY(-100%);
  335. background: #fff;
  336. font-size:{select:font size};
  337. font-family:'raleway';
  338. text-transform:uppercase;
  339. text-align: center;
  340. font-style:normal;
  341. color: #222;
  342. font-weight:400;
  343. padding:2px;
  344. font-size: 10px;
  345. min-width: 140px;
  346. overflow:hidden;
  347. border-radius: 2px;
  348. pointer-events: none;
  349. opacity:0;
  350. box-shadow: 1px 1px 3px #eaeaea;
  351.  
  352. }
  353.  
  354. input[tooltip]::after {padding:8px;min-width:60px;letter-spacing:1.2px;}
  355.  
  356. [tooltip-position='left']::after{
  357. left:0%;
  358. top:50%;
  359. margin-left:-12px;
  360. transform: translateX(-100%) translateY(-50%);
  361. }
  362. [tooltip-position='top']::after{
  363. left:50%;
  364. margin-top:-12px;
  365. }
  366.  
  367. .mobdesc a[title]::after, .mobdesc [tooltip]::after {min-width:96px;}
  368.  
  369. .post350 .mobdesc a[title]::after, .post350 .mobdesc [tooltip]::after {min-width:72px;}
  370.  
  371. .mobdesc [tooltip-position='top']::after {margin-top:8px;}
  372.  
  373. [tooltip-position='bottom']::after,a[title]::after{
  374. top:100%;
  375. transform: translateX(-50%) translateY(0%);
  376. }
  377.  
  378. [tooltip-position='bottom']::after {margin-top:6px;}
  379.  
  380. a[title]::after {margin-top:12px;}
  381.  
  382. [tooltip-position='right']::after{
  383. left:100%;
  384. top:50%;
  385. margin-left:12px;
  386. transform: translateX(0%) translateY(-50%);
  387. }
  388.  
  389. [tooltip]:hover::after, a[title]:hover::after {
  390. opacity:1;
  391.  
  392. }
  393.  
  394.  
  395. label[for] { cursor: help; }
  396.  
  397.  
  398. h1, h2 {font-family:'raleway';font-weight:400;}
  399.  
  400. h1 {font-size:calc({select:font size} * 1.6);}
  401. h2 {font-size:calc({select:font size} * 1.3);}
  402.  
  403.  
  404. @media screen and (max-width: 800px) {
  405. h1 {font-size:calc({select:font size} * 1.44);}
  406. h2 {font-size:calc({select:font size} * 1.2);}
  407. }
  408.  
  409. @media screen and (min-width: 1440px) {
  410. h1 {font-size:calc({select:font size} * 1.8);}
  411. h2 {font-size:calc({select:font size} * 1.5);}
  412.  
  413. }
  414.  
  415. @media screen and (max-width: 360px) {
  416. h1 {font-size:calc({select:font size} * 1.2);}
  417. h2 {font-size:calc({select:font size} * 1.08);}
  418. }
  419.  
  420. main#everything {
  421. display:block;
  422. height: 100%;
  423. opacity:100%;
  424. -webkit-transition: opacity .75s ease-out;
  425. transition: opacity .75s ease-out;
  426. }
  427.  
  428. aside {
  429. position:fixed;
  430. right:0;
  431. top:0;
  432. width:400px;
  433. height:100%;
  434. z-index:99;
  435. background:#fff;
  436. border-left:1px solid #f5f5f5;
  437. display:flex;
  438. display:-webkit-flex;
  439. display:-moz-flex;
  440. display:-ms-flex;
  441. display: -webkit-box;
  442. align-items:center;
  443. -webkit-align-items:center;
  444. -moz-align-items:center;
  445. -ms-align-items:center;
  446. justify-content:center;
  447. -webkit-justify-content:center;
  448. -moz-justify-content:center;
  449. -ms-justify-content:center;
  450. -webkit-box-align: center;
  451. -webkit-box-pack:center;
  452. -webkit-transition: all 0.3s ease-in-out;
  453. transition:all 0.3s ease-in-out;
  454. }
  455.  
  456. div#sidewrap {
  457. width:240px;
  458. text-align:center;
  459. -webkit-transition: all 0.3s ease-in-out;
  460. transition:all 0.3s ease-in-out;
  461. }
  462.  
  463. div#sidewrap h2 {
  464. font-size:calc({select:font size}*1.25);
  465. margin-bottom:0.8rem;
  466. }
  467.  
  468. div.sb_img img {
  469. width:100%;
  470. display:block;
  471. border-radius:2%;
  472. opacity:1;
  473. -webkit-transition: all 0.3s ease-in-out;
  474. transition:all 0.3s ease-in-out;
  475. }
  476.  
  477. div.sb_img a:hover img {
  478. opacity:0.7;
  479. -webkit-transition: all 0.3s ease-in-out;
  480. transition:all 0.3s ease-in-out;
  481. }
  482.  
  483. div.sb_desc {
  484. margin-top:1.6rem;
  485. margin-bottom:0.8rem;
  486. text-align:justify;
  487. padding:0.5rem 0 0.5rem 0;
  488. border-top:1px solid #eaeaea;
  489. border-bottom:1px solid #eaeaea;
  490.  
  491. }
  492.  
  493. nav.navtabs {
  494. margin-top:0.8rem;
  495. text-align:left;
  496. }
  497.  
  498.  
  499. .navtabs ul {
  500. list-style:none;
  501. }
  502.  
  503. .navtabs ul li:before {
  504. content: "\00D7";
  505. padding-right:8px;
  506. }
  507.  
  508. .navtabs label {
  509. color:#999;
  510. border-bottom:1px solid #eaeaea;
  511. -webkit-transition: all 0.3s ease-in-out;
  512. transition:all 0.3s ease-in-out;
  513. }
  514.  
  515. .navtabs label:hover {
  516. color:{color:highlight};
  517. border-bottom:1px solid {color:highlight};
  518. -webkit-transition: all 0.3s ease-in-out;
  519. transition:all 0.3s ease-in-out;
  520. }
  521.  
  522.  
  523. #posts_tab:checked ~ aside .label_posts,
  524. #fask_tab:checked ~ aside .label_fask,
  525. #navi_tab:checked ~ aside .label_navi,
  526. #broll_tab:checked ~ aside .label_broll {
  527. border:none;
  528. cursor:auto;
  529. color:#222;
  530. font-style:italic;
  531. }
  532.  
  533.  
  534. #carousel {
  535. overflow: hidden;
  536. width: calc(100% - 400px);
  537. height: 100%;
  538. position:relative;
  539. left:0;
  540. top:0;
  541. -webkit-transition: all 0.3s ease-in-out;
  542. transition:all 0.3s ease-in-out;
  543. }
  544.  
  545. .wrapper {
  546. position: relative;
  547. width: 100%;
  548. height: 100%;
  549. transition: transform 0.4s ease-in-out;
  550. }
  551.  
  552. #posts_tab:checked ~ #carousel .wrapper {
  553. -webkit-transform: translateY(0);
  554. transform: translateY(0);
  555. }
  556.  
  557. #fask_tab:checked ~ #carousel .wrapper {
  558. -webkit-transform: translateY(-100%);
  559. transform: translateY(-100%);
  560. }
  561.  
  562. #navi_tab:checked ~ #carousel .wrapper {
  563. -webkit-transform: translateY(-200%);
  564. transform: translateY(-200%);
  565. }
  566.  
  567. #broll_tab:checked ~ #carousel .wrapper {
  568. -webkit-transform: translateY(-300%);
  569. transform: translateY(-300%);
  570. }
  571.  
  572. [class^="panel_"] {
  573. overflow: auto;
  574. position: relative;
  575. width: inherit;
  576. height: inherit;
  577. }
  578.  
  579. /*pagination*/
  580.  
  581. div.pg {
  582. margin:1rem auto;
  583. margin-bottom:0;
  584. }
  585. div.pg * + * {margin:4px;}
  586.  
  587. span.currentpg {font-style:italic;}
  588.  
  589. /*posts*/
  590.  
  591. #entries {
  592. position:relative;
  593. }
  594.  
  595.  
  596. article.posts {
  597. margin:{select:post spacing} auto;
  598. position:relative;
  599. overflow-x:hidden;
  600. overflow-y:hidden;
  601. }
  602.  
  603.  
  604. article.posts:first-of-type, .panel_posts article.posts:nth-of-type(2){margin-top:60px;}
  605.  
  606. .panel_posts article.posts:first-of-type {margin-top:{select:post spacing};}
  607.  
  608. .post700 article.posts {width:700px;}
  609. .post540 article.posts {width:540px;}
  610. .post500 article.posts {width:500px;}
  611. .post450 article.posts {width:450px;}
  612. .post400 article.posts {width:400px;}
  613. .post350 article.posts {width:350px;}
  614.  
  615. .posts > div.captions, .posts > .pads {
  616. text-align:justify;
  617. padding:calc({select:font size} * 1.5);
  618. background:#fff;
  619. word-wrap:break-word;
  620. }
  621.  
  622. .white_bg .captions, .white_bg .pads {
  623. border:1px solid #f5f5f5;
  624. }
  625.  
  626. .white_bg .captions {border-top:none;}
  627.  
  628. .white_bg .post_footer {
  629. border-top:none;
  630. border-left:1px solid #f5f5f5;
  631. border-right:1px solid #f5f5f5;
  632. border-bottom:1px solid #f5f5f5;
  633. }
  634.  
  635. .captions a, .ask_cont > span a, .tab_iu a, span.qsource a, .sb_desc a, .pg a, .navi-items > ul > li > a, .mobd_txt a {
  636. border-bottom:1px solid #eaeaea;
  637. -webkit-transition: all 0.3s ease-in-out;
  638. transition:all 0.3s ease-in-out;
  639. }
  640.  
  641. .captions a:hover, .tab_iu a:hover, span.qsource a:hover, .sb_desc a:hover, .pg a:hover, .navi-items > ul > li > a:hover, .mobd_txt a:hover {
  642. color:{color:highlight};
  643. border-bottom:1px solid {color:highlight};
  644. -webkit-transition: all 0.3s ease-in-out;
  645. transition:all 0.3s ease-in-out;
  646. }
  647.  
  648.  
  649. .captions *:not(h1):not(h2) {font-size:inherit;}
  650.  
  651. .npf_row {
  652. display:flex;
  653. }
  654.  
  655. .npf_row figure {margin-top:0;}
  656. .npf_row:first-of-type {margin-top:12px;}
  657. .npf_row > figure {
  658. flex: 1;
  659. padding:2px;
  660. }
  661.  
  662. .captions figure:not(.tmblr-full) {margin-left:0;margin-right:0;margin-top:{select:font size};}
  663.  
  664. .posts iframe, .posts li, .posts pre, .posts embed, .posts video, .posts object .posts blockquote {max-width:100% !important;}
  665.  
  666. .posts ol, .posts ul {
  667. list-style: none;
  668. margin-top: 0;
  669. padding-left: 0;
  670. }
  671. .posts ol {
  672. list-style: decimal inside;
  673. }
  674.  
  675. .posts ul {
  676. list-style: circle inside;
  677. }
  678.  
  679. .posts li {margin-bottom:calc({select:font size} / 2);}
  680.  
  681. .posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  682. margin:{select:font size} 0 {select:font size} 0;
  683. }
  684.  
  685. .posts pre {
  686. white-space: pre-wrap;
  687. white-space: -moz-pre-wrap;
  688. white-space: -pre-wrap;
  689. white-space: -o-pre-wrap;
  690. word-wrap: break-word;
  691. background:#fafafa;
  692. padding:5px;
  693. }
  694.  
  695. .posts h1, .posts h2 {
  696. font-family:'raleway';
  697. }
  698.  
  699. .posts img {
  700. max-width:100%;
  701. height:auto;
  702. }
  703.  
  704. .posts img.photop {display:block;line-height:0;}
  705.  
  706. .posts blockquote {
  707. border-left: 1px solid #cdcdcd;
  708. margin-left: 0;
  709. margin-right: 0;
  710. padding-left: {select:font size};
  711. }
  712.  
  713. .posts blockquote *:last-child {
  714. margin-bottom: 0;
  715. }
  716.  
  717.  
  718. .posts .captions *:first-child {
  719. margin-top:0;
  720. }
  721.  
  722. .posts blockquote blockquote {
  723. padding: 0 0 0 {select:font size};
  724. margin: calc({select:font size} * 0.5);
  725.  
  726. }
  727.  
  728. img.photop {display:block;}
  729.  
  730. .panel_posts .posts h2 {line-height:1.6;}
  731.  
  732. /*photoset posts*/
  733.  
  734. div.photoset-grid {background:#fff;}
  735.  
  736. /***** the entire photoset/photoset container *****/
  737. [photoset-layout] {
  738. grid-column-gap: {select:photoset gutter}; /* this is the gap between the columns */
  739. grid-row-gap: {select:photoset gutter}; /* this is the gap between the rows */
  740. grid-gap: {select:photoset gutter}; /* this is the gap between both the rows and the columns; you should probably use this if they are the same value */
  741. }
  742.  
  743. /*lightbox*/
  744. input[type="checkbox"] { display: none; }
  745.  
  746. label.lightbox {
  747. width: 100%;
  748. position: fixed;
  749. top: 0;
  750. left: 0;
  751. min-height: 100%;
  752. z-index: 101;
  753. overflow: auto;
  754. -webkit-transform: scale(0);
  755. -ms-transform: scale(0);
  756. transform: scale(0);
  757. backdrop-filter: blur(5px);
  758. -webkit-backdrop-filter: blur(5px);
  759. -webkit-transition: -webkit-transform .75s ease-out;
  760. transition: transform .75s ease-out;
  761. }
  762.  
  763. label.lightbox img {
  764. position: fixed;
  765. top: 50%;
  766. left: 50%;
  767. -webkit-transform: translate(-50%, -50%);
  768. -ms-transform: translate(-50%, -50%);
  769. transform: translate(-50%, -50%);
  770. max-width: 90%;
  771. max-height: 90%;
  772. box-shadow: 0 3px 8px rgba(150, 150, 150, 0.25);
  773. opacity:100%;
  774. }
  775.  
  776.  
  777.  
  778. input[type="checkbox"]:checked + .lightbox {
  779. -webkit-transform: scale(1);
  780. -ms-transform: scale(1);
  781. transform: scale(1);
  782. }
  783.  
  784. input[type="checkbox"]:checked ~ #everything, input[type="checkbox"]:checked ~ #leo, input[type="checkbox"]:checked ~ header.mobtb { opacity: .1; }
  785.  
  786.  
  787. /*video*/
  788.  
  789. .posts video, .posts .tumblr_video_container {
  790. width: 100% !important;
  791. height: auto !important;
  792. }
  793.  
  794. /*quotes*/
  795. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin:0;font-weight:400;}
  796.  
  797. h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}
  798.  
  799. h1.qshort {line-height:140%;font-size:calc({select:font size} * 1.8);}
  800. h1.qmedium, h1.qlong {line-height:160%;}
  801.  
  802. h1.qmedium {font-size:calc({select:font size} * 1.5);}
  803.  
  804. h1.qlong {font-size:calc({select:font size} * 1.2);}
  805.  
  806. @media screen and (max-width: 600px) {
  807.  
  808. h1.qshort {line-height:140%;font-size:calc({select:font size} * 1.5);}
  809. h1.qmedium, h1.qlong {line-height:160%;}
  810.  
  811. h1.qmedium {font-size:calc({select:font size} * 1.44);}
  812.  
  813. h1.qlong {font-size:calc({select:font size} * 1.2);}
  814.  
  815. }
  816.  
  817. span.qsource {width:100%;display:block;text-align:center;margin-top:16px;}
  818.  
  819. .divider {
  820. margin-top:16px;
  821. text-align:center;
  822. }
  823.  
  824. .sb .divider {margin-top:12px;}
  825.  
  826. .divider::before {
  827. width:20%;
  828. height:1px;
  829. background-color:{color:highlight};
  830. content:"";
  831. display:inline-block;
  832. vertical-align:middle;
  833. }
  834.  
  835. /*chats*/
  836. ul.chatlines {list-style:none;}
  837. li.clines {padding:8px;margin-top:0;margin-bottom:0;}
  838. .chatlines li.odd {background:#fafafa;}
  839.  
  840. /*ask posts*/
  841.  
  842. .ask_cont {line-height: 1.8;min-height:124px;border-bottom:1px solid #eaeaea;}
  843.  
  844. .ask_cont > img {float:left;border-radius:5%;margin-right:24px;}
  845.  
  846. .ask_cont > span {font-weight:bold;}
  847.  
  848.  
  849. .ask_cont > span a:hover {
  850. color:{color:accent};
  851. border-bottom:1px solid {color:accent};
  852. -webkit-transition: all 0.3s ease-in-out;
  853. transition:all 0.3s ease-in-out;
  854. }
  855.  
  856. @media screen and (max-width: 360px) {
  857. .ask_cont > img {width:48px;height:48px;margin-right:16px;}
  858. }
  859.  
  860. /*link posts*/
  861. .link_cont {
  862. border-bottom:1px solid #eaeaea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  863. -webkit-transition: all 0.3s ease-in-out;
  864. transition:all 0.3s ease-in-out;
  865. }
  866.  
  867. .link_cont:hover {
  868. background:{color:highlight};
  869. -webkit-transition: all 0.3s ease-in-out;
  870. transition:all 0.3s ease-in-out;
  871. }
  872.  
  873. .link_cont span {margin-right:16px;}
  874.  
  875. .link_cont:hover .plink a {color:#fff;}
  876.  
  877. h1.plink {margin:0;font-style:italic;}
  878.  
  879. h1.plink a {color:inherit;}
  880.  
  881.  
  882. /*audio*/
  883.  
  884. .audio_cont {
  885. position:relative;
  886. width:100%;
  887. font-size:90%;
  888. margin-bottom:0;
  889. border-bottom:1px solid #eaeaea;
  890. display:-webkit-box;
  891. display:-ms-flexbox;
  892. display:flex;
  893. -webkit-box-align:center;
  894. -ms-flex-align:center;
  895. align-items:center;
  896. }
  897.  
  898.  
  899. .playback {
  900. position:absolute;
  901. background:#fff;
  902. z-index:10;
  903. opacity:0;
  904. text-align:center;
  905. width:100px;
  906. height:100px;
  907. margin-top:10px;
  908. margin-left:10px;
  909. margin-bottom:10px;
  910. -webkit-transition: all 0.3s ease-in-out;
  911. transition:all 0.3s ease-in-out;
  912. }
  913.  
  914.  
  915. .playback:hover {
  916. opacity:0.8;
  917. -webkit-transition: all 0.3s ease-in-out;
  918. transition:all 0.3s ease-in-out;
  919. }
  920.  
  921. .playbox {
  922. overflow:hidden;
  923. width:40px;
  924. height:40px;
  925. margin-top:30px;
  926. margin-left:30px;
  927. }
  928.  
  929.  
  930. .audio_cover {
  931. position:relative;
  932. margin-left:0;
  933. width:120px;
  934. height:120px;
  935. }
  936.  
  937. .audio_info {
  938. padding:0;
  939. margin-left:0px;
  940. background:#fff;
  941. display:-webkit-box;
  942. display:-ms-flexbox;
  943. display:flex;
  944. -webkit-box-pack:center;
  945. -ms-flex-pack:center;
  946. justify-content:center;
  947. -webkit-box-align:center;
  948. -ms-flex-align:center;
  949. align-items:center;
  950. width:calc(100% - 120px);
  951. height:120px;
  952. }
  953.  
  954. .audio_info > div {
  955. font-weight:normal;
  956. text-overflow: ellipsis;
  957. white-space: nowrap;
  958. overflow:hidden;
  959. max-width:calc(100% - 50px);
  960. }
  961.  
  962. /*post info*/
  963.  
  964. div.post_footer {
  965. padding:calc({select:font size}*2);
  966. background:#fff;
  967. border-top:1px solid #eaeaea;
  968. font-family:'playfair display';
  969. letter-spacing:1.2px;
  970. display:-webkit-box;
  971. display:-ms-flexbox;
  972. display:flex;
  973. -ms-flex-pack:justify;
  974. justify-content:space-between;
  975.  
  976. }
  977.  
  978. @media screen and (max-width: 360px) {
  979.  
  980. div.post_footer {
  981. font-size:12px;
  982.  
  983. }
  984.  
  985. }
  986.  
  987. span.dtls:first-child {font-weight:700;}
  988.  
  989. div.datesourcetag {
  990. font-size:96%;
  991. font-style:italic;
  992. display:-webkit-box;
  993. display:-ms-flexbox;
  994. display:flex;
  995. align-items:center;
  996. -webkit-align-items:center;
  997. -moz-align-items:center;
  998. -ms-align-items:center;
  999. }
  1000.  
  1001. div.datesourcetag > span + span {
  1002. margin-left:20px;
  1003. }
  1004.  
  1005. div.datesourcetag a {color:inherit;}
  1006. div.datesourcetag a:hover {color:{color:highlight};}
  1007.  
  1008. span.dtls:first-of-type {margin-left:0;font-style:normal;}
  1009.  
  1010.  
  1011. div.socs {
  1012. display:-webkit-box;
  1013. display:-ms-flexbox;
  1014. display:flex;
  1015. display:-webkit-flex;
  1016. display:-moz-flex;
  1017. display:-ms-flex;
  1018. -webkit-box-align:center;
  1019. -ms-flex-align:center;
  1020. align-items:center;
  1021. -webkit-align-items:center;
  1022. -moz-align-items:center;
  1023. -ms-align-items:center;
  1024. margin-left:auto;
  1025. }
  1026.  
  1027. div.soc_obj {
  1028. margin-left:16px;
  1029. }
  1030.  
  1031. .custom-like-button {
  1032. position: relative;
  1033. display: block;
  1034. width: {select:font size};
  1035. height: {select:font size};
  1036. }
  1037.  
  1038. /* class for the Tumblr Like Button iframe */
  1039. .like_button {
  1040. position: absolute;
  1041. cursor:pointer;
  1042. top: 0;
  1043. left: 0;
  1044. right: 0;
  1045. bottom: 0;
  1046. width: 100%;
  1047. height: 100%;
  1048. opacity: 0;
  1049. z-index: 3;
  1050. }
  1051. /* Force iframe to fill button */
  1052. .like_button iframe {
  1053. width: 100% !important;
  1054. height: 100% !important;
  1055. }
  1056. /* class for Our Like Button */
  1057. .our_button {
  1058. position: absolute;
  1059. margin-top:calc(-{select:font size}/3);
  1060. top: 0;
  1061. left: 0;
  1062. right: 0;
  1063. bottom: 0;
  1064. width: 100%;
  1065. height: 100%;
  1066. z-index: 1;
  1067. }
  1068.  
  1069. .our_button span {color:#222;}
  1070.  
  1071. .like_button:hover + .our_button span, .like_button.liked + .our_button span {
  1072. color:red;
  1073. -webkit-transition: all 0.3s ease-in-out;
  1074. transition:all 0.3s ease-in-out;
  1075. }
  1076.  
  1077. .posts .lnr {width:100%;height:100%;}
  1078.  
  1079. .tags {
  1080. width:100%;
  1081. margin-top:{select:font size};
  1082. word-wrap:break-word;
  1083. }
  1084.  
  1085. {block:ifnotgridlayout}
  1086. @media screen and (max-width: 600px) {
  1087.  
  1088. .tags {font-size:90%;}
  1089.  
  1090. }
  1091. {/block:ifnotgridlayout}
  1092.  
  1093. {block:ifgridlayout}
  1094. .tags{font-size:80%;margin-top:calc({select:font size}/2);}
  1095. @media screen and (min-width: 1440px) {
  1096. .tags {font-size:100%;margin-top:{select:font size};}
  1097. }
  1098.  
  1099. {/block:ifgridlayout}
  1100.  
  1101. .tags a {
  1102. display:inline;
  1103. margin-left:12px;
  1104. -webkit-transition: all 0.3s ease-in-out;
  1105. transition:all 0.3s ease-in-out;
  1106. }
  1107.  
  1108. .tags a:hover {
  1109. color:{color:accent};
  1110. -webkit-transition: all 0.3s ease-in-out;
  1111. transition:all 0.3s ease-in-out;
  1112. }
  1113.  
  1114. .tags a:first-of-type {margin-left:0;}
  1115.  
  1116. /*notes*/
  1117.  
  1118. .postnotes .pads {border-bottom:1px solid #eaeaea;}
  1119. h1.notehead {margin:0;}
  1120.  
  1121. div.tumblr_notes {
  1122. background:#fff;
  1123. padding:calc({select:font size} * 2);
  1124. font-size:90%;
  1125. }
  1126.  
  1127. /*Grid notes*/
  1128.  
  1129. .grid_notes h1.notehead {padding:calc({select:font size} * 2);}
  1130. .grid_notes .postnotes *{ margin:0; padding:0; }
  1131.  
  1132. .grid_notes .postnotes { text-align: center; }
  1133.  
  1134. .grid_notes ol.notes {margin-top:calc({select:font size});padding: {select:font size};}
  1135.  
  1136. .grid_notes .postnotes li{ list-style-type:none; display:inline-block; width:calc({select:font size} * 3); height:calc({select:font size} * 3); margin: 8px 12px; overflow:hidden; }
  1137.  
  1138. .grid_notes .postnotes img{ width:calc({select:font size} * 3); height:calc({select:font size} * 3); border-radius:5%;}
  1139.  
  1140. .grid_notes li.more_notes_link_container{
  1141. width:100%!important;
  1142. }
  1143.  
  1144. /*def & txt notes*/
  1145. .postnotes {text-align:justify;}
  1146.  
  1147. .def_notes .postnotes ol.notes, .txt_notes .postnotes ol.notes{list-style:none;margin:0;padding-left:5px;}
  1148.  
  1149. .def_notes .postnotes ol.notes li.note, .txt_notes .postnotes ol.notes li.note {
  1150. display:flex;
  1151. display:-webkit-flex;
  1152. display:-moz-flex;
  1153. display:-ms-flex;
  1154. align-items:center;
  1155. -webkit-align-items:center;
  1156. -moz-align-items:center;
  1157. -ms-align-items:center;
  1158. -webkit-box-orient: horizontal;
  1159. -webkit-box-direction: normal;
  1160. -ms-flex-flow: row wrap;
  1161. flex-flow: row wrap;
  1162. margin:{select:font size} 0 {select:font size} 0;
  1163. }
  1164.  
  1165. .def_notes .postnotes ol.notes li.note.reply span.action, .txt_notes .postnotes ol.notes li.note.reply span.action {
  1166. margin-top:calc(-{select:font size}/2);
  1167.  
  1168. }
  1169.  
  1170. .def_notes .postnotes ol.notes li.note.reply, .txt_notes .postnotes ol.notes li.note.reply
  1171. {
  1172. -webkit-box-align:start;
  1173. -ms-flex-align:start;
  1174. align-items:flex-start;
  1175. }
  1176.  
  1177. .def_notes .postnotes ol.notes li.note:first-of-type, .txt_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}
  1178.  
  1179. .def_notes .postnotes li.note:last-of-type, .txt_notes .postnotes li.note:last-of-type {margin-bottom:8px;}
  1180.  
  1181. .def_notes .postnotes ol.notes li.note a.avatar_frame {height:24px;margin-right:{select:font size};}
  1182.  
  1183. .txt_notes .postnotes ol.notes li.note a.avatar_frame {display:none;}
  1184.  
  1185.  
  1186. .def_notes .postnotes ol.notes li.note img.avatar {
  1187. border-radius:5%;
  1188. width:24px;
  1189. height:24px;
  1190.  
  1191. }
  1192.  
  1193.  
  1194. .postnotes ol.notes li.note img.avatar {
  1195. display:block;
  1196. opacity:1;
  1197. -webkit-transition: all 0.3s ease-in-out;
  1198. transition:all 0.3s ease-in-out;
  1199. }
  1200.  
  1201. .txt_notes .postnotes ol.notes li.note img.avatar {display:none;}
  1202.  
  1203. .postnotes ol.notes li.note img.avatar:hover {
  1204. opacity:0.7;
  1205. -webkit-transition: all 0.3s ease-in-out;
  1206. transition:all 0.3s ease-in-out;
  1207. }
  1208.  
  1209. .def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 48px);}
  1210.  
  1211. .txt_notes .postnotes ol.notes li.note span.action {max-width:100%;}
  1212.  
  1213. .def_notes .postnotes li.with_commentary blockquote, .txt_notes .postnotes li.with_commentary blockquote {
  1214. }
  1215.  
  1216.  
  1217. li.note span.action a, .qsource a {
  1218. border-bottom:1px solid #eaeaea;
  1219. -webkit-transition: all 0.3s ease-in-out;
  1220. transition:all 0.3s ease-in-out;
  1221. }
  1222.  
  1223. li.note span.action a:hover, .qsource a:hover {
  1224. border-bottom:1px solid {color:highlight};
  1225. -webkit-transition: all 0.3s ease-in-out;
  1226. transition:all 0.3s ease-in-out;
  1227. }
  1228.  
  1229. .txt_notes li.note span.action:before {
  1230. font-family: 'Linearicons-Free';
  1231. margin-right:8px;
  1232. vertical-align: middle;
  1233. }
  1234.  
  1235. .txt_notes li.note.reply span.action:before {
  1236. content: "\e83f";
  1237. color:#6CC7ED;
  1238. }
  1239.  
  1240. .txt_notes li.note.like span.action:before {
  1241. content: "\e813";
  1242. color:red;
  1243. }
  1244.  
  1245. .txt_notes li.note.original_post span.action:before {
  1246. content: "\e814";
  1247. color:#EED275;
  1248. }
  1249.  
  1250. .txt_notes li.note.reblog:not(.original_post) span.action:before {
  1251. font-family: 'Linearicons-Free';
  1252. content: "\e862";
  1253. color:#72D16E;
  1254. }
  1255.  
  1256. li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
  1257. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a, .txt_notes li.more_notes_link_container a {
  1258. font-size:calc({select:font size} * 1.2);
  1259. margin:auto;
  1260. cursor:help;
  1261. color:inherit;
  1262. border-bottom:1px solid #222;
  1263. -webkit-transition: all 0.3s ease-in-out;
  1264. transition:all 0.3s ease-in-out;
  1265. }
  1266.  
  1267.  
  1268.  
  1269. li.more_notes_link_container a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  1270.  
  1271. li.note span.action a:hover{
  1272. color:{color:highlight};
  1273. border-bottom:1px solid {color:highlight};
  1274. -webkit-transition: all 0.3s ease-in-out;
  1275. transition:all 0.3s ease-in-out;
  1276. }
  1277.  
  1278. /*FAQ*/
  1279. .post400 iframe#askbox, .post350 iframe#askbox, .post 400 iframe#ask_form, .post 350 iframe#ask_form {height:250px;}
  1280.  
  1281. .panel_fask .pads h2 {margin-top:1em;font-style:italic;}
  1282.  
  1283. p.tabq {margin-top:1.5em!important;font-weight:bold;}
  1284. p.taba {padding-left:1em;border-left:1px solid #222;}
  1285.  
  1286.  
  1287. /*navi*/
  1288.  
  1289. .navigrid {
  1290. display: -webkit-box;
  1291. display: -webkit-flex;
  1292. display: -ms-flexbox;
  1293. display: flex;
  1294. -webkit-flex-flow: row wrap;
  1295. -ms-flex-flow: row wrap;
  1296. flex-flow: row wrap;
  1297. -webkit-box-pack: center;
  1298. -webkit-justify-content: center;
  1299. -ms-flex-pack: center;
  1300. justify-content: center;
  1301. }
  1302.  
  1303. .navi-items {
  1304. text-align:left;
  1305. -ms-flex-preferred-size:33%;
  1306. -webkit-flex-basis:33%;
  1307. flex-basis:33%;
  1308. }
  1309.  
  1310. .navi-items h6 {
  1311. font-style:italic;
  1312. margin-bottom:1rem;
  1313. font-size:inherit;
  1314. margin-top:0;
  1315. }
  1316.  
  1317. .navi-items:first-of-type {padding-left:0;}
  1318. .navi-items:last-of-type {padding-right:0;}
  1319.  
  1320. .post350 .navi-items {padding-left:0;margin-top:16px;}
  1321.  
  1322. .navi-items ul {list-style:none;}
  1323.  
  1324. .navi-items > ul > li {
  1325.  
  1326. margin-top:0.5em;
  1327. padding-left:1em;
  1328. position:relative;
  1329. -webkit-transition: all 0.3s ease-in-out;
  1330. transition:all 0.3s ease-in-out;
  1331. }
  1332.  
  1333. .navi-items > ul > li > a {margin-left:calc({select:font size}/2);}
  1334.  
  1335. .navi-items > ul > li:before {
  1336. content:'';
  1337. position:absolute;
  1338. top:50%;
  1339. height:1px;
  1340. margin-left:-1em;
  1341. width:1em;
  1342. background:#999;
  1343. -webkit-transition: all 0.3s ease-in-out;
  1344. transition:all 0.3s ease-in-out;
  1345. }
  1346.  
  1347. .navi-items > ul > li:hover {
  1348. padding-left:1.8em;
  1349. -webkit-transition: all 0.3s ease-in-out;
  1350. transition:all 0.3s ease-in-out;
  1351. }
  1352.  
  1353. .navi-items > ul > li:hover:before {
  1354. margin-left:-1.8em;
  1355. width:1.8em;
  1356. -webkit-transition: all 0.3s ease-in-out;
  1357. transition:all 0.3s ease-in-out;
  1358. }
  1359.  
  1360. .broll {
  1361. display:-webkit-box;
  1362. display:-webkit-flex;
  1363. display:-ms-flexbox;
  1364. display:flex;
  1365. -webkit-box-orient: horizontal;
  1366. -webkit-box-direction: normal;
  1367. -webkit-flex-direction: row;
  1368. -ms-flex-direction: row;
  1369. flex-direction: row;
  1370. -webkit-flex-wrap: wrap;
  1371. -ms-flex-wrap: wrap;
  1372. flex-wrap: wrap;
  1373. -webkit-box-pack: start;
  1374. -webkit-justify-content: flex-start;
  1375. -ms-flex-pack: start;
  1376. justify-content: flex-start;
  1377. -webkit-align-content: flex-start;
  1378. -ms-flex-line-pack: start;
  1379. align-content: flex-start;
  1380. -webkit-box-align: start;
  1381. -webkit-align-items: flex-start;
  1382. -ms-flex-align: start;
  1383. align-items: flex-start;
  1384. }
  1385.  
  1386. .broll > a {
  1387.  
  1388. margin:20px;
  1389. -ms-flex-preferred-size:calc(20% - 40px);
  1390. -webkit-flex-basis:calc(20% - 40px);
  1391. flex-basis:calc(20% - 40px);
  1392. }
  1393.  
  1394.  
  1395.  
  1396. img.followed {
  1397. display:block;width:100%;
  1398. border-radius:2%;
  1399. opacity:1;
  1400. -webkit-transition: all 0.3s ease-in-out;
  1401. transition:all 0.3s ease-in-out;
  1402. }
  1403.  
  1404. .broll > a:hover img.followed {
  1405. opacity:0.6;
  1406. -webkit-transition: all 0.3s ease-in-out;
  1407. transition:all 0.3s ease-in-out;
  1408. }
  1409.  
  1410.  
  1411. /*responsive*/
  1412.  
  1413. header.mobtb {
  1414. height:60px;
  1415. background:#fff;
  1416. text-align:center;
  1417. line-height:60px;
  1418. display:none;
  1419. position:fixed;
  1420. top:0;
  1421. left:0;
  1422. z-index:90;
  1423. width:100%;
  1424. opacity:1;
  1425. box-shadow: 0 2px 4px rgba(200, 200, 200, 0.25);
  1426. -webkit-transition: opacity .75s ease-out;
  1427. transition: opacity .75s ease-out;
  1428. }
  1429.  
  1430. header.mobtb label {display:inline-block;margin-left:8px;margin-right:8px;font-family:'raleway';text-transform:uppercase;letter-spacing:1.2px;}
  1431.  
  1432. header.mobtb label:first-of-type {margin-left:0;}
  1433. header.mobtb label:last-of-type {margin-right:0;}
  1434.  
  1435. /* Effect 1: Brackets */
  1436. .mobtb label::before,
  1437. .mobtb label::after {
  1438. display: inline-block;
  1439. opacity: 0;
  1440. -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  1441. -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  1442. transition: transform 0.3s, opacity 0.2s;
  1443. }
  1444.  
  1445. .mobtb label::before {
  1446. margin-right: 10px;
  1447. content: '[';
  1448. -webkit-transform: translateX(20px);
  1449. -moz-transform: translateX(20px);
  1450. transform: translateX(20px);
  1451. }
  1452.  
  1453. .mobtb label::after {
  1454. margin-left: 10px;
  1455. content: ']';
  1456. -webkit-transform: translateX(-20px);
  1457. -moz-transform: translateX(-20px);
  1458. transform: translateX(-20px);
  1459. }
  1460.  
  1461. .mobtb label:hover::before,
  1462. .mobtb label:hover::after,
  1463. .mobtb label:focus::before,
  1464. .mobtb label:focus::after,
  1465. #posts_tab:checked ~ .mobtb .label_posts::before,
  1466. #posts_tab:checked ~ .mobtb .label_posts::after,
  1467. #fask_tab:checked ~ .mobtb .label_fask::before,
  1468. #fask_tab:checked ~ .mobtb .label_fask::after,
  1469. #navi_tab:checked ~ .mobtb .label_navi::before,
  1470. #navi_tab:checked ~ .mobtb .label_navi::after,
  1471. #broll_tab:checked ~ .mobtb .label_broll::before,
  1472. #broll_tab:checked ~ .mobtb .label_broll::after {
  1473. opacity: 1;
  1474. -webkit-transform: translateX(0px);
  1475. -moz-transform: translateX(0px);
  1476. transform: translateX(0px);
  1477. }
  1478.  
  1479.  
  1480. article.mobpg {
  1481. text-align:center;
  1482. display:none;
  1483. margin-top:{select:post spacing};
  1484. }
  1485.  
  1486. article.mobpg a {
  1487. color:#222;
  1488. -webkit-transition: all 0.3s ease-in-out;
  1489. transition:all 0.3s ease-in-out;
  1490. }
  1491.  
  1492. article.mobpg a:hover {
  1493. color:{color:highlight};
  1494. -webkit-transition: all 0.3s ease-in-out;
  1495. transition:all 0.3s ease-in-out;
  1496. }
  1497.  
  1498. article.mobdesc {
  1499. background:#fff;
  1500. padding:calc({select:font size} * 1.5);
  1501. display:none;
  1502. box-shadow: 0 2px 4px rgba(200, 200, 200, 0.25);
  1503. }
  1504.  
  1505. .white_bg article.mobdesc {
  1506. box-shadow: 0 2px 6px rgba(180, 180, 180, 0.25);
  1507. }
  1508.  
  1509. .mobd_img {
  1510. width:128px;
  1511. margin-right:24px;
  1512. }
  1513.  
  1514. .mobd_img img {
  1515. border-radius:2%;
  1516. opacity:1;
  1517. -webkit-transition: all 0.3s ease-in-out;
  1518. transition:all 0.3s ease-in-out;
  1519. }
  1520.  
  1521. .mobd_img a:hover img {
  1522. opacity:0.7;
  1523. -webkit-transition: all 0.3s ease-in-out;
  1524. transition:all 0.3s ease-in-out;
  1525. }
  1526.  
  1527. .post350 .mobd_img {width:96px;}
  1528.  
  1529. .mobd_txt {width:calc(100% - 128px - 24px);}
  1530.  
  1531. .post350 .mobd_txt {width:calc(100% - 96px - 24px);}
  1532.  
  1533.  
  1534. @media screen and (max-width: 1100px) {
  1535.  
  1536. aside, #carousel, #sidewrap {
  1537. -webkit-transition: all 0.3s ease-in-out;
  1538. transition:all 0.3s ease-in-out;
  1539. }
  1540.  
  1541. .post700 aside {width:300px;}
  1542. .post700 div#sidewrap {width:240px;}
  1543. .post700 #carousel {width:calc(100% - 300px);}
  1544. }
  1545.  
  1546. @media screen and (max-width: 1000px) {
  1547.  
  1548. aside, #carousel, #sidewrap {
  1549. -webkit-transition: all 0.3s ease-in-out;
  1550. transition:all 0.3s ease-in-out;
  1551. }
  1552.  
  1553. .post700 aside {display:none;}
  1554. .post700 #carousel {width:100%;}
  1555.  
  1556. .post700 article.mobdesc {
  1557. display:-webkit-box;
  1558. display:-ms-flexbox;
  1559. display:flex;
  1560. display:-webkit-flex;
  1561. display:-moz-flex;
  1562. display:-ms-flex;
  1563. }
  1564.  
  1565. .post700 article.mobpg, .post700 header.mobtb {display:block;}
  1566.  
  1567. }
  1568.  
  1569.  
  1570. @media screen and (max-width: 800px) {
  1571.  
  1572. .post700 article {
  1573. width:96%!important;
  1574. }
  1575.  
  1576. }
  1577.  
  1578. @media screen and (max-width: 960px) {
  1579.  
  1580. aside, #carousel, #sidewrap {
  1581. -webkit-transition: all 0.3s ease-in-out;
  1582. transition:all 0.3s ease-in-out;
  1583. }
  1584.  
  1585. .post540 aside {width:300px;}
  1586. .post540 div#sidewrap {width:240px;}
  1587. .post540 #carousel {width:calc(100% - 300px);}
  1588. }
  1589.  
  1590.  
  1591.  
  1592.  
  1593. @media screen and (max-width: 900px) {
  1594.  
  1595. aside, #carousel, #sidewrap {
  1596. -webkit-transition: all 0.3s ease-in-out;
  1597. transition:all 0.3s ease-in-out;
  1598. }
  1599.  
  1600. .post500 aside {width:300px;}
  1601. .post500 div#sidewrap {width:240px;}
  1602. .post500 #carousel {width:calc(100% - 300px);}
  1603. }
  1604.  
  1605. @media screen and (max-width: 840px) {
  1606.  
  1607. aside, #carousel, #sidewrap {
  1608. -webkit-transition: all 0.3s ease-in-out;
  1609. transition:all 0.3s ease-in-out;
  1610. }
  1611.  
  1612. .post540 aside, .post500 aside {display:none;}
  1613. .post540 #carousel, .post500 #carousel {width:100%;}
  1614. .post540 article.mobdesc, .post500 article.mobdesc {
  1615. display:-webkit-box;
  1616. display:-ms-flexbox;
  1617. display:flex;
  1618. display:-webkit-flex;
  1619. display:-moz-flex;
  1620. display:-ms-flex;
  1621. }
  1622.  
  1623. .post540 article.mobpg, .post540 header.mobtb,.post500 article.mobpg, .post500 header.mobtb {display:block;}
  1624.  
  1625.  
  1626. }
  1627.  
  1628. @media screen and (max-width: 600px) {
  1629.  
  1630. .post500 article, .post540 article {
  1631. width:96%!important;
  1632. }
  1633.  
  1634. }
  1635.  
  1636. @media screen and (max-width: 850px) {
  1637.  
  1638. aside, #carousel, #sidewrap {
  1639. -webkit-transition: all 0.3s ease-in-out;
  1640. transition:all 0.3s ease-in-out;
  1641. }
  1642.  
  1643. .post450 aside {width:240px;}
  1644. .post450 div#sidewrap {width:200px;}
  1645. .post450 #carousel {width:calc(100% - 240px);}
  1646. }
  1647.  
  1648.  
  1649.  
  1650. @media screen and (max-width: 800px) {
  1651.  
  1652. aside, #carousel, #sidewrap {
  1653. -webkit-transition: all 0.3s ease-in-out;
  1654. transition:all 0.3s ease-in-out;
  1655. }
  1656.  
  1657. .post400 aside {width:240px;}
  1658. .post400 div#sidewrap {width:200px;}
  1659. .post400 #carousel {width:calc(100% - 240px);}
  1660. }
  1661.  
  1662. @media screen and (max-width: 750px) {
  1663.  
  1664. aside, #carousel, #sidewrap {
  1665. -webkit-transition: all 0.3s ease-in-out;
  1666. transition:all 0.3s ease-in-out;
  1667. }
  1668.  
  1669. .post350 aside {width:240px;}
  1670. .post350 div#sidewrap {width:200px;}
  1671. .post350 #carousel {width:calc(100% - 240px);}
  1672. }
  1673.  
  1674. @media screen and (max-width: 800px) {
  1675.  
  1676. aside, #carousel, #sidewrap {
  1677. -webkit-transition: all 0.3s ease-in-out;
  1678. transition:all 0.3s ease-in-out;
  1679. }
  1680.  
  1681. .post450 aside, .post400 aside {display:none;}
  1682. .post450 #carousel, .post400 #carousel {width:100%;}
  1683.  
  1684. .post450 article.mobdesc, .post400 article.mobdesc {
  1685. display:-webkit-box;
  1686. display:-ms-flexbox;
  1687. display:flex;
  1688. display:-webkit-flex;
  1689. display:-moz-flex;
  1690. display:-ms-flex;
  1691. }
  1692.  
  1693. .post450 article.mobpg, .post450 header.mobtb,.post400 article.mobpg, .post400 header.mobtb {display:block;}
  1694.  
  1695. }
  1696.  
  1697. @media screen and (max-width: 600px) {
  1698.  
  1699. aside, #carousel, #sidewrap {
  1700. -webkit-transition: all 0.3s ease-in-out;
  1701. transition:all 0.3s ease-in-out;
  1702. }
  1703.  
  1704. .post350 aside {display:none;}
  1705. .post350 #carousel {width:100%;}
  1706.  
  1707. .post350 article.mobdesc {
  1708. display:-webkit-box;
  1709. display:-ms-flexbox;
  1710. display:flex;
  1711. display:-webkit-flex;
  1712. display:-moz-flex;
  1713. display:-ms-flex;
  1714. }
  1715.  
  1716. .post350 article.mobpg, .post350 header.mobtb {display:block;}
  1717.  
  1718. .mobd_txt > h2 {margin-top:0;}
  1719. .mobd_img {width:96px;}
  1720. .mobd_txt {width:calc(100% - 96px - 24px);}
  1721.  
  1722. .navi-items {
  1723. text-align:left;
  1724. -ms-flex-preferred-size:50%;
  1725. -webkit-flex-basis:50%;
  1726. flex-basis:50%;
  1727. }
  1728.  
  1729. .broll > a {
  1730.  
  1731. margin:12px;
  1732. -ms-flex-preferred-size:calc(25% - 24px);
  1733. -webkit-flex-basis:calc(25% - 24px);
  1734. flex-basis:calc(25% - 24px);
  1735. }
  1736.  
  1737. }
  1738.  
  1739. @media screen and (max-width: 500px) {
  1740.  
  1741. .post450 article, .post400 article, .post350 article {
  1742. width:96%!important;
  1743. }
  1744.  
  1745. }
  1746.  
  1747. @media screen and (max-width: 350px) {
  1748. .navi-items {
  1749. text-align:left;
  1750. -ms-flex-preferred-size:100%;
  1751. -webkit-flex-basis:100%;
  1752. flex-basis:100%;
  1753. }
  1754. }
  1755.  
  1756. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1757. #leo {
  1758. opacity:1.0;
  1759. font-family: Arial, Sans-Serif;
  1760. text-transform:uppercase;
  1761. text-align:center;
  1762. z-index:99;
  1763. box-sizing:content-box;
  1764. -webkit-box-sizing:content-box;
  1765. -moz-box-sizing:content-box;
  1766. -webkit-transition: opacity .75s ease-out;
  1767. transition: opacity .75s ease-out;
  1768.  
  1769. }
  1770.  
  1771. #leo a {
  1772. z-index:99;
  1773. position:fixed;
  1774. font-size:12px;
  1775. line-height:16px;
  1776. width:18px;
  1777. height:18px;
  1778. font-weight:300;
  1779. bottom:10px;
  1780. right:10px;
  1781. color:#000;
  1782. background:rgba(255,255,255,0.4);
  1783. padding:5px;
  1784. transition: all 1s ease-in-out;
  1785. -webkit-transition: all 1s ease-in-out;
  1786. -o-transition: all 1s ease-in-out;
  1787. -moz-transition: all 1s ease-in-out;
  1788. box-sizing:content-box;
  1789. -webkit-box-sizing:content-box;
  1790. -moz-box-sizing:content-box;
  1791. }
  1792.  
  1793. #leo a:hover {
  1794. background-color:rgba(0,0,0,1);
  1795. color:#fff;
  1796. border-radius:50%;
  1797. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1798. -moz-animation: hermione 1s;
  1799. -o-animation: hermione 1s;
  1800. animation: hermione 1s;
  1801. animation-timing-function: ease-in-out;
  1802. -webkit-animation-timing-function: ease-in-out;
  1803. -moz-animation-timing-function: ease-in-out;
  1804. -o-animation-timing-function: ease-in-out;
  1805.  
  1806. -moz-transform: rotate(720deg); /* IE 9 */
  1807. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1808. transform: rotate(720deg);
  1809.  
  1810. transition: all 1s ease-in-out;
  1811. -webkit-transition: all 1s ease-in-out;
  1812. -o-transition: all 1s ease-in-out;
  1813. -moz-transition: all 1s ease-in-out;
  1814.  
  1815.  
  1816. }
  1817.  
  1818. @-webkit-keyframes hermione {
  1819. 0% {color:#000;}
  1820. 25% {color:#ACE4EA;}
  1821. 50% {color:#FFFBDD;}
  1822. 75% {color:#ACE4EA;}
  1823. 100% {color:#fff;}
  1824. }
  1825. @-moz-keyframes hermione {
  1826. 0% {color:#000;}
  1827. 25% {color:#ACE4EA;}
  1828. 50% {color:#FFFBDD;}
  1829. 75% {color:#ACE4EA;}
  1830. 100% {color:#fff;}
  1831. }
  1832. @-o-keyframes hermione {
  1833. 0% {color:#000;}
  1834. 25% {color:#ACE4EA;}
  1835. 50% {color:#FFFBDD;}
  1836. 75% {color:#ACE4EA;}
  1837. 100% {color:#fff;}
  1838. }
  1839.  
  1840. @keyframes hermione {
  1841. 0% {color:#000;}
  1842. 25% {color:#ACE4EA;}
  1843. 50% {color:#FFFBDD;}
  1844. 75% {color:#ACE4EA;}
  1845. 100% {color:#fff;}
  1846. }
  1847. /*END OF CREDIT*/
  1848.  
  1849. </style>
  1850. </head>
  1851. <body class="{select:background} {select:post width} {select:notes display}">
  1852.  
  1853.  
  1854. <div id="loading_overlay">
  1855. <div class="lds-dual-ring"></div>
  1856. </div>
  1857.  
  1858.  
  1859.  
  1860.  
  1861. {block:posts}
  1862. {block:photoset}
  1863. {block:photos}
  1864.  
  1865. <input type="checkbox" id="{PhotoURL-HighRes}">
  1866. <label for="{PhotoURL-HighRes}" class="lightbox"><img src="{PhotoURL-HighRes}"></label>
  1867.  
  1868.  
  1869. {/block:photos}
  1870. {/block:photoset}
  1871.  
  1872. {block:photo}
  1873. <input type="checkbox" id="{PhotoURL-HighRes}">
  1874. <label for="{PhotoURL-HighRes}" class="lightbox"><img src="{PhotoURL-HighRes}"></label>
  1875. {/block:photo}
  1876.  
  1877. {/block:posts}
  1878.  
  1879.  
  1880.  
  1881. <main id="everything">
  1882. <input hidden type="radio" name="rad-set" id="posts_tab" checked/>
  1883.  
  1884. {block:AskEnabled}
  1885. <input hidden type="radio" name="rad-set" id="fask_tab"/>
  1886. {/block:AskEnabled}
  1887.  
  1888. <input hidden type="radio" name="rad-set" id="navi_tab"/>
  1889.  
  1890. {block:Following}
  1891. <input hidden type="radio" name="rad-set" id="broll_tab"/>
  1892. {/block:Following}
  1893.  
  1894.  
  1895.  
  1896. <!--mob topbar-->
  1897.  
  1898. <header class="mobtb">
  1899.  
  1900. <label for="posts_tab" class="label_posts"><span>Posts</span></label>
  1901.  
  1902. {block:AskEnabled}
  1903. <label for="fask_tab" class="label_fask"><span>FAQ</span></label>
  1904. {/block:AskEnabled}
  1905. <label for="navi_tab" class="label_navi"><span>Navigation</span></label>
  1906.  
  1907. {block:ifshowblogroll}
  1908. {block:Following}
  1909.  
  1910. <label for="broll_tab" class="label_broll"><span>Blogroll</span></label>
  1911.  
  1912. {/block:Following}
  1913. {/block:ifshowblogroll}
  1914.  
  1915.  
  1916.  
  1917. </header>
  1918.  
  1919. <!--/mob topbar-->
  1920.  
  1921. <div id="carousel">
  1922. <div class="wrapper">
  1923. <section class="panel_posts">
  1924. <div id="entries">
  1925.  
  1926. <!--mob desc-->
  1927.  
  1928. <article class="posts mobdesc">
  1929. <div class="mobd_img">
  1930. <a tooltip="refresh"tooltip-position="top" href="/"><img src="{image:sidebar}"></a>
  1931. </div>
  1932. <div class="mobd_txt">
  1933. <h2>{text:basic info}</h2>
  1934. {block:description}
  1935. {Description}
  1936. {/block:description}
  1937. </div>
  1938. </article>
  1939. <!--/mob desc-->
  1940.  
  1941. {block:posts}
  1942. <article class="posts">
  1943.  
  1944.  
  1945. <!--Ask post-->
  1946. {block:Answer}
  1947. <div class="ask_cont pads">
  1948.  
  1949. <img src="{AskerPortraitURL-64}">
  1950.  
  1951. <span>{Asker}:</span> {Question}
  1952.  
  1953. </div>
  1954. <div class="captions">
  1955. {Answer}
  1956. </div>
  1957. {/block:Answer}
  1958. <!--/Ask post-->
  1959.  
  1960. <!--Chat-->
  1961. {block:chat}
  1962. <div class="pads">
  1963. {block:title}<h1>{Title}</h1>{/block:title}
  1964. <ul class="chatlines">
  1965. {block:Lines}
  1966. <li class="clines {Alt}">
  1967. {block:Label}<b>{Label}</b>{/block:Label}
  1968. {Line}
  1969. </li>
  1970. {/block:Lines}
  1971. </ul>
  1972. </div>
  1973. {/block:chat}
  1974. <!--/Chat-->
  1975.  
  1976. <!--Quote-->
  1977. {block:Quote}
  1978. <div class="pads">
  1979. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  1980.  
  1981. {block:Source}
  1982.  
  1983. <div class="divider"></div>
  1984.  
  1985. <span class="qsource">{Source}</span>{/block:Source}
  1986. </div>
  1987. {/block:Quote}
  1988. <!--/Quote-->
  1989.  
  1990.  
  1991. <!--Link-->
  1992. {block:link}
  1993. <div class="pads link_cont">
  1994. <h1 class="plink"><a href="{URL}"><span class="lnr lnr-link"></span> {Name}</a></h1>
  1995. </div>
  1996. {block:Description}
  1997. <div class="captions">{Description}</div>
  1998. {/block:Description}
  1999. {/block:link}
  2000. <!--/Link-->
  2001.  
  2002. <!--Text-->
  2003. {block:text}
  2004. {block:title}<h1>{Title}</h1>{/block:title}
  2005. <div class="captions">{body}</div>
  2006. {/block:text}
  2007. <!--Text-->
  2008.  
  2009. <!--Photo post-->
  2010. {block:photo}
  2011.  
  2012. <label for="{PhotoURL-HighRes}">
  2013. <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto"> </label>
  2014.  
  2015.  
  2016. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2017.  
  2018. {/block:photo}
  2019. <!--/Photo post-->
  2020.  
  2021. <!--Photoset post-->
  2022. {block:Photoset}
  2023.  
  2024. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div>
  2025. <label for="{PhotoURL-HighRes}" class="grid-item"><img src="{PhotoURL-HighRes}" /></label>
  2026. </div>{/block:Photos}</div>
  2027.  
  2028. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2029.  
  2030. {/block:Photoset}
  2031. <!--/Photoset post-->
  2032.  
  2033. <!--video post-->
  2034. {block:Video}
  2035. {Video-700}
  2036. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  2037. {/block:Video}
  2038. <!--/video post-->
  2039.  
  2040. <!--Audio-->
  2041. {block:Audio}
  2042. <div class="audio_cont">
  2043. <div class="audio_cover">
  2044.  
  2045. <div class="playback">
  2046. <div class="playbox">{AudioPlayerWhite}</div>
  2047. </div>
  2048.  
  2049. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  2050.  
  2051. {block:AlbumArt}
  2052. <img src="{AlbumArtURL}" style="position:absolute;">
  2053. {/block:AlbumArt}
  2054. </div>
  2055. <div class="audio_info">
  2056. <div>
  2057. {block:TrackName}
  2058. <b>Song:</b> {TrackName}
  2059. {/block:TrackName}<br>
  2060.  
  2061. {block:Artist}
  2062. <b>Artist:</b> {Artist}
  2063. {/block:Artist}<br>
  2064.  
  2065. {block:Album}
  2066. <b>Album:</b> {Album}
  2067. {/block:Album}
  2068. </div>
  2069. </div>
  2070.  
  2071. </div>
  2072. {block:Caption}
  2073. <div class="captions">{Caption}</div>
  2074. {/block:Caption}
  2075. {/block:Audio}
  2076. <!--/Audio-->
  2077.  
  2078.  
  2079. {block:date}
  2080. <div class="post_footer">
  2081. <div class="datesourcetag">
  2082.  
  2083. <span class="dtls">
  2084. <a tooltip="{TimeAgo}" tooltip-position="top" href="{Permalink}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a> </span>
  2085.  
  2086. <span class="dtls">
  2087. {block:RebloggedFrom}
  2088. <a href="{ReblogParentURL}" tooltip="{ReblogParentName}"tooltip-position="top" target="_blank">via</a>
  2089. {block:ContentSource}
  2090. / <a href="{SourceURL}" tooltip="{ReblogRootName}" tooltip-position="top" target="_blank">src</a>
  2091. {/block:ContentSource}
  2092. {/block:RebloggedFrom}
  2093. </span>
  2094.  
  2095.  
  2096. </div>
  2097. <div class="socs">
  2098.  
  2099. <div class="soc_obj">
  2100. <a tooltip="reblog"tooltip-position="top" class="a-link"href="{ReblogURL}"><span class="lnr lnr-sync"></span></a>
  2101. </div>
  2102.  
  2103. <div class="custom-like-button soc_obj">
  2104. {LikeButton size="12"}
  2105. <span class="our_button">
  2106. <span class="lnr lnr-heart"></span>
  2107. </span>
  2108. </div>
  2109.  
  2110. </div>
  2111. </div>
  2112.  
  2113. {block:HasTags}
  2114. <div class="tags {PostID}">
  2115. {block:Tags}
  2116. <a class="a-link" href="{TagURL}">#{Tag}</a>
  2117. {/block:Tags}
  2118. </div>
  2119. {/block:HasTags}
  2120.  
  2121. {/block:date}
  2122.  
  2123. </article>
  2124.  
  2125. {block:permalinkpage}
  2126. {block:NoteCount}
  2127. <article class="posts postnotes">
  2128. <div class="pads">
  2129. <h1 class="notehead">{NoteCountWithLabel}</h1>
  2130. </div>
  2131.  
  2132. <div class="tumblr_notes">
  2133. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  2134. </div>
  2135.  
  2136. </article>
  2137. {/block:NoteCount}
  2138. {/block:permalinkpage}
  2139.  
  2140. <!-- {block:NoRebloggedFrom}
  2141. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2142. {/block:NoRebloggedFrom} -->
  2143.  
  2144. {block:ContentSource}<!-- {SourceURL}
  2145. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  2146. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2147. {/block:ContentSource}
  2148.  
  2149. {/block:posts}
  2150.  
  2151. <!--mob pg-->
  2152.  
  2153. <article class="posts mobpg">
  2154. {block:indexpage}
  2155. {block:Pagination}
  2156. {block:IndexPage}
  2157. <!--PAGINATION-->
  2158.  
  2159. <div class="pg">
  2160. {block:PreviousPage}
  2161. <a href="{PreviousPage}">&laquo;</a>
  2162. {/block:PreviousPage}
  2163.  
  2164. {block:JumpPagination length="5"}
  2165.  
  2166. {block:CurrentPage}
  2167. <span class="currentpg">{PageNumber}</span>
  2168. {/block:CurrentPage}
  2169.  
  2170. {block:JumpPage}
  2171. <a href="{URL}">{PageNumber}</a>
  2172. {/block:JumpPage}
  2173.  
  2174. {/block:JumpPagination}
  2175.  
  2176.  
  2177. {block:NextPage}
  2178. <a href="{NextPage}">&raquo;</a>
  2179. {/block:NextPage}
  2180.  
  2181. </div>
  2182.  
  2183. {/block:IndexPage}
  2184. {/block:Pagination}
  2185. {/block:indexpage}
  2186. </article>
  2187.  
  2188. <!--/mob pg-->
  2189. </div>
  2190. </section>
  2191. <section class="panel_fask">
  2192.  
  2193. {block:AskEnabled}
  2194.  
  2195. <article class="posts">
  2196.  
  2197. <h1>Info + FAQ</h1>
  2198.  
  2199. <div class="pads">
  2200.  
  2201. <p>{text:info text}</p>
  2202.  
  2203. <p class="tabq">{text:question 1}</p>
  2204.  
  2205. <p class="taba">{text:answer 1}</p>
  2206.  
  2207. <p class="tabq">{text:question 2}</p>
  2208.  
  2209. <p class="taba">{text:answer 2}</p>
  2210.  
  2211. <p class="tabq">{text:question 3}</p>
  2212.  
  2213. <p class="taba">{text:answer 3}</p>
  2214.  
  2215. <h2>{AskLabel}</h2>
  2216. <p>
  2217.  
  2218. <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>
  2219.  
  2220. </p>
  2221. </div>
  2222. </article>
  2223.  
  2224. {/block:AskEnabled}
  2225.  
  2226. </section>
  2227. <section class="panel_navi">
  2228.  
  2229. <article class="posts">
  2230. <h1>Navigation</h1>
  2231. <div class="navigrid pads">
  2232. <div class="navi-items">
  2233. <h6>{text:nav category 1}</h6>
  2234.  
  2235. <ul>
  2236. <li><a href="{text:navilink 1 URL}">{text:navilink 1}</a></li>
  2237. <li><a href="{text:navilink 2 URL}">{text:navilink 2}</a></li>
  2238. <li><a href="{text:navilink 3 URL}">{text:navilink 3}</a></li>
  2239. <li><a href="{text:navilink 4 URL}">{text:navilink 4}</a></li>
  2240. </ul>
  2241.  
  2242.  
  2243.  
  2244.  
  2245. </div>
  2246.  
  2247. <div class="navi-items">
  2248. <h6>{text:nav category 2}</h6>
  2249.  
  2250. <ul>
  2251. <li><a href="{text:navilink 5 URL}">{text:navilink 5}</a></li>
  2252. <li><a href="{text:navilink 6 URL}">{text:navilink 6}</a></li>
  2253. <li><a href="{text:navilink 7 URL}">{text:navilink 7}</a></li>
  2254. <li><a href="{text:navilink 8 URL}">{text:navilink 8}</a></li>
  2255. </ul>
  2256. </div>
  2257.  
  2258. <div class="navi-items">
  2259. <h6>{text:nav category 3}</h6>
  2260.  
  2261. <ul>
  2262. <li><a href="{text:navilink 9 URL}">{text:navilink 9}</a></li>
  2263. <li><a href="{text:navilink 10 URL}">{text:navilink 10}</a></li>
  2264. <li><a href="{text:navilink 11 URL}">{text:navilink 11}</a></li>
  2265. <li><a href="{text:navilink 12 URL}">{text:navilink 12}</a></li>
  2266. </ul>
  2267.  
  2268. </div>
  2269.  
  2270. {block:ifshowblock4}
  2271. <div class="navi-items">
  2272. <h6>{text:nav category 4}</h6>
  2273.  
  2274. <ul>
  2275. <li><a href="{text:navilink 13 URL}">{text:navilink 13}</a></li>
  2276. <li><a href="{text:navilink 14 URL}">{text:navilink 14}</a></li>
  2277. <li><a href="{text:navilink 15 URL}">{text:navilink 15}</a></li>
  2278. <li><a href="{text:navilink 16 URL}">{text:navilink 16}</a></li>
  2279. </ul>
  2280.  
  2281.  
  2282.  
  2283.  
  2284. </div>
  2285. {/block:ifshowblock4}
  2286.  
  2287. {block:ifshowblock5}
  2288. <div class="navi-items">
  2289. <h6>{text:nav category 5}</h6>
  2290.  
  2291. <ul>
  2292. <li><a href="{text:navilink 17 URL}">{text:navilink 17}</a></li>
  2293. <li><a href="{text:navilink 18 URL}">{text:navilink 18}</a></li>
  2294. <li><a href="{text:navilink 19 URL}">{text:navilink 19}</a></li>
  2295. <li><a href="{text:navilink 20 URL}">{text:navilink 20}</a></li>
  2296. </ul>
  2297. </div>
  2298. {/block:ifshowblock5}
  2299.  
  2300. {block:ifshowblock6}
  2301. <div class="navi-items">
  2302. <h6>{text:nav category 6}</h6>
  2303.  
  2304. <ul>
  2305. <li><a href="{text:navilink 21 URL}">{text:navilink 21}</a></li>
  2306. <li><a href="{text:navilink 22 URL}">{text:navilink 22}</a></li>
  2307. <li><a href="{text:navilink 23 URL}">{text:navilink 23}</a></li>
  2308. <li><a href="{text:navilink 24 URL}">{text:navilink 24}</a></li>
  2309. </ul>
  2310.  
  2311. </div>
  2312. {/block:ifshowblock6}
  2313.  
  2314. </div>
  2315. </article>
  2316.  
  2317. </section>
  2318. <section class="panel_broll">
  2319. {block:ifshowblogroll}
  2320. {block:Following}
  2321.  
  2322. <article class="posts">
  2323. <h1>Blogroll</h1>
  2324. <div class="pads broll">
  2325.  
  2326. {block:Followed}
  2327.  
  2328. <a href="{FollowedURL}" tooltip="{FollowedName}"tooltip-position="bottom"><img class="followed" src="{FollowedPortraitURL-128}"></a>
  2329.  
  2330. {/block:Followed}
  2331.  
  2332. </div>
  2333. </article>
  2334.  
  2335. {/block:Following}
  2336. {/block:ifshowblogroll}
  2337.  
  2338.  
  2339. </section>
  2340. </div>
  2341. </div>
  2342.  
  2343. <aside id="navside">
  2344.  
  2345. <div id="sidewrap">
  2346.  
  2347. <h2>{text:basic info}</h2>
  2348.  
  2349. <div class="sb_img">
  2350. <a tooltip="refresh"tooltip-position="top" href="/"><img src="{image:sidebar}"></a>
  2351. </div>
  2352.  
  2353. {block:description}
  2354. <div class="sb_desc">
  2355. {Description}
  2356. </div>
  2357. {/block:description}
  2358.  
  2359. <nav class="navtabs">
  2360. <!--change to ul li-->
  2361.  
  2362. <ul>
  2363. <li><label for="posts_tab" class="label_posts"><span>Posts</span></label> </li>
  2364.  
  2365. {block:AskEnabled}
  2366. <li><label for="fask_tab" class="label_fask"><span>FAQ</span></label> </li>
  2367. {/block:AskEnabled}
  2368.  
  2369.  
  2370. <li><label for="navi_tab" class="label_navi"><span>Navigation</span></label></li>
  2371.  
  2372. {block:ifshowblogroll}
  2373. {block:Following}
  2374.  
  2375. <li><label for="broll_tab" class="label_broll"><span>Blogroll</span></label></li>
  2376.  
  2377. {/block:Following}
  2378. {/block:ifshowblogroll}
  2379.  
  2380.  
  2381. </ul>
  2382. </nav>
  2383.  
  2384. {block:indexpage}
  2385. {block:Pagination}
  2386. {block:IndexPage}
  2387. <!--PAGINATION-->
  2388.  
  2389. <div class="pg">
  2390. {block:PreviousPage}
  2391. <a href="{PreviousPage}">&laquo;</a>
  2392. {/block:PreviousPage}
  2393.  
  2394. {block:JumpPagination length="5"}
  2395.  
  2396. {block:CurrentPage}
  2397. <span class="currentpg">{PageNumber}</span>
  2398. {/block:CurrentPage}
  2399.  
  2400. {block:JumpPage}
  2401. <a href="{URL}">{PageNumber}</a>
  2402. {/block:JumpPage}
  2403.  
  2404. {/block:JumpPagination}
  2405.  
  2406.  
  2407. {block:NextPage}
  2408. <a href="{NextPage}">&raquo;</a>
  2409. {/block:NextPage}
  2410.  
  2411. </div>
  2412.  
  2413. {/block:IndexPage}
  2414. {/block:Pagination}
  2415. {/block:indexpage}
  2416.  
  2417. </div>
  2418.  
  2419. </aside>
  2420.  
  2421. </main>
  2422.  
  2423. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  2424. <div id="leo">
  2425. <a href="https://hermionegrangcr.tumblr.com">♚</a>
  2426. </div>
  2427. <!--END OF CREDIT-->
  2428.  
  2429. </body>
  2430. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!