azurethemes

theme 34: kali ma

Aug 29th, 2017
3,773
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.47 KB | None | 0 0
  1. <!----
  2.  
  3.  
  4.  
  5. theme 34 kali ma
  6. 1 2 0 4 p x . t u m b l r . c o m
  7. © 2017. all rights reserved
  8.  
  9. -----
  10.  
  11. this theme was coded by azure (1204px).
  12. !this theme must not be republished or
  13. used as a basecode!
  14. all coding was created by me, unless it
  15. was stated otherwise.
  16.  
  17. -----
  18.  
  19. video resize script by shythemes
  20. photo resize by excolo
  21. smooth scrolling by deadpoolkilledzac
  22. photo set fix by pxuphoto
  23. tumblr caption plugin by neothms & magnusthemes
  24. icon font by saturnthemes
  25. icon font by zavalokom
  26.  
  27. -----
  28.  
  29. all themes by 1204px.tumblr.com are licensed
  30. under a Creative Commons Attribution-NoDerivatives
  31. 4.0 International License.
  32.  
  33.  
  34.  
  35. --->
  36. <!--start html-->
  37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  38. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  39. <!--custom google fonts-->
  40. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Roboto:300i,400,400i,500,500i,700,700i|Source+Sans+Pro:400,600,700|Nunito:400,600,700|Lato:400,700|Cabin:400,500,600,700|Muli:400,600,700|Raleway:400,500,600,700|Khula:400,600,700|Cutive+Mono|Inconsolata:400,700|Lora:400,700|Parisienne|Abhaya+Libre:400,500,600,700" rel="stylesheet">
  41. <!--tooltips-->
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("a[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:10,
  49. tip_fade_speed:900,
  50. attribute:"title"
  51. });
  52. });
  53. })(jQuery);
  54. </script>
  55. <!--back to top button-->
  56. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  57. <script>
  58. $(document).ready(function(){
  59.  
  60. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  61. var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="sf sf-arrow-up"></span> scroll to top</a>'].join("");
  62. $("body").append(back_to_top_button)
  63.  
  64. // Der Button wird ausgeblendet
  65. $(".back-to-top").hide();
  66.  
  67. // Funktion für das Scroll-Verhalten
  68. $(function () {
  69. $(window).scroll(function () {
  70. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  71. $('.back-to-top').fadeIn();
  72. } else {
  73. $('.back-to-top').fadeOut();
  74. }
  75. });
  76.  
  77. $('.back-to-top').click(function () { // Klick auf den Button
  78. $('body,html').animate({
  79. scrollTop: 0
  80. }, 800);
  81. return false;
  82. });
  83. });
  84.  
  85. });
  86. </script>
  87. <script type="text/javascript">
  88. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  89. $(document).ready(function() {
  90. function photosetResize() {
  91. $('iframe.photoset').each(function(){
  92. var newSize = 500;
  93. var newSrc = $(this).attr('src').replace('500',newSize);
  94. $(this).attr('src', newSrc).width(newSize);
  95. var high = $(this).css('height');
  96. var calculate = parseInt(high, 10)* newSize/500;
  97. $(this).css('height', calculate);
  98. });
  99. }
  100. photosetResize();
  101. });
  102. </script>
  103. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  104. <script>
  105. $(document).ready(function(){
  106. $('.photo-slideshow').pxuPhotoset({
  107. lightbox: true,
  108. rounded: false,
  109. gutter: '1px',
  110. borderRadius: '0px',
  111. photoset: '.photo-slideshow',
  112. photoWrap: '.photo-data',
  113. photo: '.pxu-photo'
  114. });
  115. });
  116. </script>
  117. <!-- smooth scrolling by deadpoolkilledzac.tumblr.com -->
  118. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  119. <!--minimalist fonts-->
  120. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  121. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  122. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  123. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
  124. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  125. <!-- meta names -->
  126. <head>
  127. <title>{Title}</title>
  128. <link rel="shortcut icon" href="{Favicon}">
  129. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  130. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  131. <!-- toggles -->
  132. <meta name="if:Header" content="1"/>
  133. <meta name="if:RoundIcon" content="0"/>
  134. <meta name="if:RoundedCorners" content="0"/>
  135. <meta name="if:SidebarFont11px" content="0"/>
  136. <meta name="if:FontLora" content="0"/>
  137. <!-- all colors -->
  138. <meta name="color:background" content="#ffffff"/>
  139. <meta name="color:posts" content="#ffffff">
  140. <meta name="color:text" content="#000000"/>
  141. <meta name="color:links" content="#000000"/>
  142. <meta name="color:credit" content="#000000"/>
  143. <meta name="color:accent" content="#f6f6f6">
  144. <meta name="color:info" content="#000000">
  145. <meta name="color:hover" content="#888888">
  146. <meta name="color:credit hover" content="#888888">
  147. <meta name="color:asks" content="#fbfbfb">
  148. <meta name="color:border" content="#fbfbfb"/>
  149. <meta name="color:scrollbar" content="#fbfbfb">
  150. <meta name="color:tooltip" content="#fbfbfb">
  151. <meta name="color:tooltip text" content="#000000">
  152.  
  153. <!-- images -->
  154. <meta name="image:header" content=""/>
  155. <meta name="image:icon" content=""/>
  156. <!-- texts -->
  157. <meta name="text:sidebar label" content="kali ma."/>
  158. <!-- sidebar links -->
  159. <meta name="text:link one label" content=" Link one">
  160. <meta name="text:link two label" content="Link two">
  161. <meta name="text:link three label" content="Link three">
  162. <meta name="text:link four label" content="Link four">
  163. <meta name="text:link one url" content="/">
  164. <meta name="text:link two url" content="/">
  165. <meta name="text:link three url" content="/">
  166. <meta name="text:link four url" content="/">
  167. <meta name="viewport"
  168. content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  169. <!-- custom css -->
  170. <style type="text/css">
  171. @media screen and (max-width: 3480px) {
  172. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  173. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  174. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  175. .fade-in {
  176. opacity:0;
  177. -webkit-animation:fadeIn ease-in 1;
  178. -moz-animation:fadeIn ease-in 1;
  179. animation:fadeIn ease-in 1;
  180. -webkit-animation-fill-mode:forwards;
  181. -moz-animation-fill-mode:forwards;
  182. animation-fill-mode:forwards;
  183. -webkit-animation-duration:1s;
  184. -moz-animation-duration:1s;
  185. animation-duration:1s;}
  186. .fade-in.one {
  187. -webkit-animation-delay:0s;
  188. -moz-animation-delay:0s;
  189. animation-delay:0s;}
  190. .fade-in.two {
  191. -webkit-animation-delay:0.8s;
  192. -moz-animation-delay:0.8s;
  193. animation-delay:0.8s;
  194. }
  195. .fade-in .post_container {
  196. -webkit-animation-delay:0.9s;
  197. -moz-animation-delay:0.9s;
  198. animation-delay:0.9s;
  199. }
  200. /*tumblr controls*/
  201. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:1; }
  202. /*scrollbar*/
  203. ::-webkit-scrollbar {
  204. width:6px;
  205. height:6px;
  206. background:white;
  207. }
  208. ::-webkit-scrollbar-thumb {
  209. background:{color:scrollbar};
  210. }
  211. /*tooltips*/
  212. #s-m-t-tooltip{
  213. margin:13px 10px 6px 10px;
  214. padding:6px;
  215. background-color:{color:tooltip};
  216. font-family: 'khula', sans-serif;
  217. {block:IfFontLora}
  218. font-family: 'lora', sans-serif;
  219. {/block:IfFontLora}
  220. font-weight:600;
  221. font-size:8px;
  222. text-transform:lowercase;
  223. letter-spacing:0px;
  224. color:{color:tooltip text};
  225. z-index:999999999999999999999999999999999999;
  226. transition:0.3s ease-in-out;
  227. -webkit-transition:0.3s ease-in-out;
  228. -moz-transition:0.3s ease-in-out;
  229. -ms-transition:0.3s ease-in-out;
  230. -o-transition:0.3s ease-in-out;
  231. }
  232. /*body basics*/
  233. body{
  234. background-color:{color:background};
  235. font-family: 'khula', sans-serif;
  236. {block:IfFontLora}
  237. font-family: 'lora', sans-serif;
  238. {/block:IfFontLora}
  239. margin:0px;
  240. padding:0px;
  241. -webkit-font-smoothing: antialiased;
  242. -moz-osx-font-smoothing: grayscale;
  243. }
  244. p {
  245. padding-left:15px;
  246. padding-right:15px;
  247. }
  248. a{
  249. text-decoration:none;
  250. color:{color:links};
  251. -moz-transition-duration:0.5s;
  252. -webkit-transition-duration:0.5s;
  253. -o-transition-duration:0.5s;
  254. transition: all 0.3s ease-out;
  255. }
  256. a:hover{
  257. text-decoration:none;
  258. color:{color:hover};
  259. -moz-transition-duration:0.5s;
  260. -webkit-transition-duration:0.5s;
  261. -o-transition-duration:0.5s;
  262. transition: all 0.3s ease-out;
  263. }
  264. img {
  265. }
  266. blockquote {
  267. width:auto;
  268. border-left:1px solid {color:border};
  269. text-align:left;
  270. padding:1px;
  271. font-weight:none;
  272. margin-top:11px;
  273. margin-left:13px;
  274. padding-top:0.5px;
  275. padding-bottom:0.5px;
  276. font-size:10px;
  277. font-family: 'khula', sans-serif;
  278. {block:IfFontLora}
  279. font-family: 'lora', sans-serif;
  280. {/block:IfFontLora}
  281. margin-right:20px;
  282. padding-left:2px;
  283. color:{color:text};
  284. }
  285. pre{
  286. font-size:11px;
  287. text-align:center;
  288. text-transform:none;
  289. font-family: 'Cutive Mono', monospace;
  290. font-weight:300;
  291. line-height:9px;
  292. margin-left:10px;
  293. margin-right:10px;
  294. letter-spacing:0px;
  295. background-color:{color:background};
  296. color:{color:text};
  297. padding:10px;
  298. }
  299. small{
  300. font-size:9px;
  301. font-family: 'khula', sans-serif;
  302. {block:IfFontLora}
  303. font-family: 'lora', sans-serif;
  304. {/block:IfFontLora}
  305. }
  306. big{
  307. font-size:12px;
  308. font-family: 'khula', sans-serif;
  309. {block:IfFontLora}
  310. font-family: 'lora', sans-serif;
  311. {/block:IfFontLora}
  312. font-weight:700;
  313. }
  314. sub{
  315. font-size:7px;
  316. letter-spacing:0px;
  317. font-weight:600;
  318. text-transform:none;
  319. font-family: 'khula', sans-serif;
  320. {block:IfFontLora}
  321. font-family: 'lora', sans-serif;
  322. {/block:IfFontLora}
  323. }
  324. h1 {
  325. font-size:15px;
  326. text-align:left;
  327. font-family: 'nunito', sans-serif;
  328. letter-spacing:0px;
  329. margin-left:7px;
  330. text-transform:uppercase;
  331. font-weight:700;
  332. line-height:0px;
  333. color:{color:text};
  334. padding:10px;
  335. padding-top:15px;
  336. }
  337. h1 a{
  338. color:{color:text};
  339. text-align:left;
  340. }
  341. h2{
  342. color:{color:text};
  343. text-transform:uppercase;
  344. font-family: 'nunito', sans-serif;
  345. text-align:left;
  346. }
  347. b {
  348. font-weight:600;
  349. font-family: 'khula', sans-serif;
  350. {block:IfFontLora}
  351. font-family: 'lora', sans-serif;
  352. {/block:IfFontLora}
  353. color:{color:text};
  354. }
  355. sh {
  356. color:{color:links};
  357. text-transform:uppercase;
  358. font-family: 'khula', sans-serif;
  359. font-size:13px
  360. font-weight:800;
  361. }
  362. am {
  363. color:{color:text};
  364. font-size:22px;
  365. padding:8px;
  366. padding-top:2px;
  367. text-transform:uppercase;
  368. font-family: 'khula', sans-serif;
  369. letter-spacing:0px;
  370. font-weight:500;
  371. }
  372. t {
  373. font-weight:bold;
  374. letter-spacing:0px;
  375. font-size:45px;
  376. font-style:italic;
  377. font-family: 'khula', sans-serif;
  378. text-transform:uppercase;
  379. color:{color:text};
  380. }
  381. u {
  382. text-decoration:none;
  383. color:{color:text};
  384. border-bottom:1px solid {color:text};
  385. }
  386. p.npf_quirky {
  387. font-family: 'Parisienne', cursive;
  388. font-size:25px;
  389. }
  390. /*back to top button*/
  391. .back-to-top {
  392. position: fixed;
  393. color:{color:text};
  394. bottom:40px;
  395. text-transform:uppercase;
  396. right:10px;
  397. text-align:right;
  398. font-family: 'khula', sans-serif;
  399. {block:IfFontLora}
  400. font-family: 'lora', sans-serif;
  401. {/block:IfFontLora}
  402. font-size:7px;
  403. z-index:9999999999;
  404. font-weight:600;
  405. line-height:15px;
  406. padding:10px;
  407. }
  408. /*jump pagination*/
  409. .pagination{
  410. font-family: 'khula', sans-serif;
  411. {block:IfFontLora}
  412. font-family: 'lora', sans-serif;
  413. {/block:IfFontLora}
  414. margin-left:-190px;
  415. width:auto;
  416. padding-top:-10px;
  417. letter-spacing:2px;
  418. padding-bottom:20px;
  419. font-size:13px;
  420. text-align:center;
  421. }
  422. .pagination a{
  423. padding:5px;
  424. font-family: 'khula', sans-serif;
  425. {block:IfFontLora}
  426. font-family: 'lora', sans-serif;
  427. {/block:IfFontLora}
  428. font-weight:600;
  429. bottom:10px;
  430. margin-left:5px;
  431. color:{color:text};
  432. }
  433. .pagination a:hover{
  434. color:{color:hover};
  435. -moz-transition-duration:0.5s;
  436. -webkit-transition-duration:0.5s;
  437. -o-transition-duration:0.5s;
  438. transition: all 0.3s ease-out;
  439. }
  440. #description {
  441. width:260px;
  442. position:relative;
  443. margin:86px 15px;
  444. font-family: 'khula', sans-serif;
  445. {block:IfFontLora}
  446. font-family: 'lora', sans-serif;
  447. {/block:IfFontLora}
  448. font-size:10px;
  449. {block:IfSidebarFont11px}
  450. font-size:11px;
  451. {/block:IfSidebarFont11px}
  452. z-index:9999999999999;
  453. line-height:16px;
  454. padding:5px;
  455. border-radius:3px;
  456. color:{color:text};
  457. text-align:justify;
  458. overflow:hidden;
  459. }
  460. /*header*/
  461. #sidebar_con {
  462. position:fixed;
  463. margin:120px 130px;
  464. {block:IfHeader}
  465. margin:100px 130px;
  466. {/block:IfHeader}
  467. width:300px;
  468. opacity:1;
  469. border-radius:0px;
  470. {block:IfRoundedCorners}
  471. border-radius:3px;
  472. {/block:IfRoundedCorners}
  473. background:{color:posts};
  474. text-align:left;
  475. z-index:9999999;
  476. }
  477. {block:IfHeader}
  478. #image_big {
  479. position:fixed;
  480. margin-top:0px;
  481. width:500px;
  482. height:50px;
  483. margin-left:0px;
  484. z-index:9999999999999999;
  485. }
  486. #image_bigimage {
  487. z-index:-99999;
  488. }
  489. #image_bigimage img {
  490. width:300px;
  491. height:150px;
  492. position:relative;
  493. margin:0px auto;
  494. border-radius:0px;
  495. {block:IfRoundedCorners}
  496. border-radius:3px 3px 0px 0px;
  497. {/block:IfRoundedCorners}
  498. opacity:1;
  499. z-index:999999;
  500. {/block:IfHeader}
  501. }
  502. #sidebar_icon {
  503. position:fixed;
  504. margin-top:0px;
  505. width:50px;
  506. height:50px;
  507. margin-left:0px;
  508. border-radius:100px;
  509. z-index:9999999999999999;
  510. }
  511. #sidebar_iconimage {
  512. z-index:-99999;
  513. }
  514. #sidebar_iconimage img {
  515. width:50px;
  516. height:50px;
  517. position:relative;
  518. margin:20px 20px;
  519. border-radius:3px;
  520. {block:IfRoundIcon}
  521. border-radius:100px;
  522. {/block:IfRoundIcon}
  523. opacity:1;
  524. z-index:99999999999;
  525. }
  526. #tit_sdebr {
  527. width:210px;
  528. font-family: 'Abhaya Libre', sans-serif;
  529. color:#000000;
  530. text-align:left;
  531. height:15px;
  532. padding:0px;
  533. line-height:20px;
  534. font-size:23px;
  535. background:{color:posts};
  536. letter-spacing:0px;
  537. font-weight:700;
  538. position:relative;
  539. margin:-55px 90px;
  540. z-index:99999999;
  541. text-transform:lowercase;
  542. }
  543. #sdebr_links {
  544. margin:13px 0px;
  545. font-size:9px;
  546. {block:IfSidebarFont11px}
  547. font-size:11px;
  548. {/block:IfSidebarFont11px}
  549. letter-spacing:1px;
  550. font-weight:200;
  551. opacity:1;
  552. z-index:9999;
  553. width:260px;
  554. position:fixed;
  555. padding-top:10px;
  556. border-top:1px dotted {color:border};
  557. background:{color:header line};
  558. font-style:none;
  559. text-align:left;
  560. }
  561. #sdebr_links a{
  562. display:inline-block;
  563. color:{color:links};
  564. width:auto;
  565. height:13px;
  566. padding:5px;
  567. font-weight:300;
  568. margin-top:-4px;
  569. margin-left:-4px;
  570. text-align:left;
  571. line-height:20px;
  572. font-style:none;
  573. font-family: 'khula', sans-serif;
  574. {block:IfFontLora}
  575. font-family: 'lora', sans-serif;
  576. {/block:IfFontLora}
  577. text-transform:lowercase;
  578. }
  579. #sdebr_links a:hover{
  580. color:{color:hover};
  581. -webkit-transition: all 0.4s ease-in-out;
  582. -moz-transition: all 0.4s ease-in-out;
  583. -o-transition: all 0.4s ease-in-out;
  584. -ms-transition: all 0.4s ease-in-out;
  585. transition: all 0.4s ease-in-out;
  586. }
  587. /*blog container*/
  588. .container {
  589. width:calc(100% + 0px + 0px + 0px);
  590. margin:0 auto;
  591. text-align:center;
  592. overflow:hidden;
  593. }
  594. /*post notes*/
  595. ol.notes {
  596. padding: 0px;
  597. margin: 0px 0px;
  598. font-family: 'khula', sans-serif;
  599. {block:IfFontLora}
  600. font-family: 'lora', sans-serif;
  601. {/block:IfFontLora}
  602. list-style-type: none;
  603. margin-top:-25px;
  604. font-size:9px;
  605. background:{color:posts};
  606. margin-left:15px;
  607. text-align:left;
  608. width:499px;
  609. border-radius:0px;
  610. {block:IfRoundedCorners}
  611. border-radius:0px 0px 3px 3px;
  612. {/block:IfRoundedCorners}
  613. border-left: solid 1px {color:border};
  614. border-right: solid 1px {color:border};
  615. border-bottom: solid 1px {color:border};
  616. }
  617. ol.notes li.note {
  618. border-top: solid 1px {color:border};
  619. padding: 10px;
  620. }
  621. ol.notes li.note img.avatar {
  622. vertical-align: -10px;
  623. border-radius:100px;
  624. margin-left: 10px;
  625. padding:6px;
  626. width: 16px;
  627. height: 16px;
  628. }
  629. ol.notes li.note span.action {
  630. font-weight: 300;
  631. }
  632. ol.notes li.note .answer_content {
  633. font-weight: normal;
  634. }
  635. ol.notes li.note blockquote {
  636. border-color: {color:border};
  637. padding: 4px 10px;
  638. margin: 10px 0px 0px 25px;
  639. }
  640. ol.notes li.note blockquote a {
  641. text-decoration: none;
  642. }
  643. /*like button*/
  644. .buttons a {
  645. position:relative;
  646. display:inline-block;
  647. padding:3px;
  648. }
  649. .custom-like-button {
  650. position: relative;
  651. display: inline-block;
  652. width: 12px;
  653. height: 12px;
  654. cursor: pointer;
  655. top: 0px;
  656. left: -2px;
  657. }
  658. .like_button {
  659. position: absolute;
  660. right: 0;
  661. font-size:9px;
  662. bottom: -1px;
  663. width: 12px;
  664. height: 12px;
  665. opacity: 0;
  666. z-index: 10;
  667. }
  668. .like_button iframe {
  669. width: 100% !important;
  670. height: 100% !important;
  671. }
  672. .our_button {
  673. position: absolute;
  674. top: 1.5px;
  675. left: 0;
  676. right: 0;
  677. bottom: 0;
  678. width: 100%;
  679. height: 100%;
  680. z-index: 1;
  681. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  682. -o-transition:all 0.6s ease-in-out;/*opera*/
  683. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  684. -ms-transition:all 0.6s ease-in-out;/*ie*/
  685. transition:all 0.6s ease-in-out;/*w3c*/
  686. }
  687. .like_button:hover + .our_button {
  688. color: {color:link hover};
  689. }
  690. .custom-like-button:hover {
  691. color:{color:hover};
  692. }
  693. .like_button.liked + .our_button {
  694. color: red;
  695. }
  696. /*audio*/
  697. .audio_artist {
  698. font-family: 'khula', sans-serif;
  699. {block:IfFontLora}
  700. font-family: 'lora', sans-serif;
  701. {/block:IfFontLora}
  702. font-size:10px;
  703. text-transform:capitalize;
  704. font-weight:600;
  705. margin-left:55px;
  706. padding-left:23px;
  707. }
  708. .audio_tit {
  709. font-family: 'khula', sans-serif;
  710. {block:IfFontLora}
  711. font-family: 'lora', sans-serif;
  712. {/block:IfFontLora}
  713. font-size:10px;
  714. text-transform:capitalize;
  715. font-weight:600;
  716. margin-top:-45px;
  717. margin-left:55px;
  718. padding-left:23px;
  719. }
  720. .audio_play {
  721. font-family: 'khula', sans-serif;
  722. {block:IfFontLora}
  723. font-family: 'lora', sans-serif;
  724. {/block:IfFontLora}
  725. font-size:10px;
  726. text-transform:capitalize;
  727. font-weight:600;
  728. margin-left:55px;
  729. padding-left:23px;
  730. }
  731. .audio_player {
  732. width:200px;
  733. margin-left:5px;
  734. color:{color:text};
  735. }
  736. .album_cover img {
  737. width:50px;
  738. border-radius:100px;
  739. margin-left:15px;
  740. }
  741. /*post styles*/
  742. .photo_caption{
  743. font-family: 'khula', sans-serif;
  744. {block:IfFontLora}
  745. font-family: 'lora', sans-serif;
  746. {/block:IfFontLora}
  747. margin-left:-10px;
  748. margin-top:5px;
  749. }
  750. .tumblr_avatar {
  751. display:inline-block;
  752. margin-right:10px;
  753. margin-left:13px;
  754. border-radius:100%;
  755. width:18px;
  756. vertical-align:middle;
  757. }
  758. .tumblr_parent {
  759. padding:0px;
  760. margin-top:18px;
  761. font-family: 'khula', sans-serif;
  762. {block:IfFontLora}
  763. font-family: 'lora', sans-serif;
  764. {/block:IfFontLora}
  765. font-size:10px;
  766. text-align:left;
  767. font-weight:500;
  768. color:{color:info};
  769. letter-spacing:0px;
  770. border:none;
  771. }
  772. .psets{
  773. width:100%;
  774. margin-top:0px;
  775. margin-left:0px;
  776. }
  777. .vsets{
  778. width:100%;
  779. margin-top:-12px;
  780. }
  781. .ppost{
  782. width:100%;
  783. margin-top:-12px;
  784. }
  785. .quote_cap{
  786. font-family: 'khula', sans-serif;
  787. {block:IfFontLora}
  788. font-family: 'lora', sans-serif;
  789. {/block:IfFontLora}
  790. font-size:15px;
  791. margin-left:15px;
  792. margin-top:15px;
  793. padding-right:15px;
  794. letter-spacing:0px;
  795. text-align:justify;
  796. text-transform:none;
  797. color:{color:text};
  798. font-weight:200;
  799. }
  800. .quote_src{
  801. font-size:10px;
  802. margin-left:15px;
  803. margin-top:12px;
  804. text-align:left;
  805. letter-spacing:0px;
  806. font-family: 'khula', sans-serif;
  807. {block:IfFontLora}
  808. font-family: 'lora', sans-serif;
  809. {/block:IfFontLora}
  810. text-transform:capitalize;
  811. font-style:italic;
  812. font-weight:300;
  813. }
  814. .chat_box{
  815. font-family: 'khula', sans-serif;
  816. {block:IfFontLora}
  817. font-family: 'lora', sans-serif;
  818. {/block:IfFontLora}
  819. margin-left:15px;
  820. padding-right:15px;
  821. }
  822. .chat_line {
  823. padding:3px;
  824. }
  825. .chat_label {
  826. padding:5px;
  827. border-radius:3px;
  828. font-weight:600;
  829. font-family: 'khula', sans-serif;
  830. {block:IfFontLora}
  831. font-family: 'lora', sans-serif;
  832. {/block:IfFontLora}
  833. background:{color:accent};
  834. text-transform:uppercase;
  835. }
  836. .chat_box blockquote {
  837. padding-left:12px;
  838. border-left:1px solid {color:border};
  839. margin-left:2px;
  840. }
  841. .post_container {
  842. width:calc(1000px + 120px + 0px + 0px);
  843. margin:115px auto;
  844. {block:IfHeader}
  845. margin:98px auto;
  846. {/block:IfHeader}
  847. text-align:center;
  848. z-index:99;
  849. overflow:hidden;
  850. }
  851. /*posts*/
  852. #entries {
  853. margin-left:530px;
  854. overflow:auto;
  855. z-index:999999;
  856. }
  857. #post {
  858. font-size:10px;
  859. width:500px;
  860. color:{color:text};
  861. opacity:1;
  862. background-color:{color:posts};
  863. text-align:justify;
  864. border-radius:0px;
  865. {block:IfRoundedCorners}
  866. border-radius:3px;
  867. {/block:IfRoundedCorners}
  868. z-index:99999999999999999;
  869. font-family: 'khula', sans-serif;
  870. {block:IfFontLora}
  871. font-family: 'lora', sans-serif;
  872. {/block:IfFontLora}
  873. margin-left:15px;
  874. margin-bottom:40px;
  875. padding-bottom:0px;
  876. overflow:hidden;
  877. }
  878. #post img{
  879. max-width:100%;
  880. margin-top:-5px;
  881. height:auto;
  882. }
  883. /*post info*/
  884. #info {
  885. width:515px;
  886. text-align:left;
  887. font-family: 'khula', sans-serif;
  888. {block:IfFontLora}
  889. font-family: 'lora', sans-serif;
  890. {/block:IfFontLora}
  891. text-transform:lowercase;
  892. margin-left:0px;
  893. font-size:10px;
  894. margin-top:0px;
  895. padding-left:20px;
  896. padding-top:0px;
  897. padding-bottom:6px;
  898. opacity:1;
  899. overflow:hidden;
  900. border-top:1px solid {color:border};
  901. font-weight:400;
  902. line-height:21px;
  903. letter-spacing:0px;
  904. background:{color:posts};
  905. z-index:9999999999999999;
  906. color:{color:info};
  907. }
  908. #info a {
  909. text-align:left;
  910. font-weight:400;
  911. padding:2px;
  912. font-size:10px;
  913. letter-spacing:-1px;
  914. font-family: 'khula', sans-serif;
  915. {block:IfFontLora}
  916. font-family: 'lora', sans-serif;
  917. {/block:IfFontLora}
  918. text-transform:lowercase;
  919. line-height:12px;
  920. color:{color:info};
  921. -moz-transition-duration:0.2s;
  922. -webkit-transition-duration:0.2s;
  923. -o-transition-duration:0.2s;
  924. transition: all 0.2s ease-out;
  925. }
  926. #info a,date:hover{
  927. color:{color:hover};
  928. -moz-transition-duration:0.2s;
  929. -webkit-transition-duration:0.2s;
  930. -o-transition-duration:0.2s;
  931. transition: all 0.2s ease-out;
  932. }
  933. #info tagged {
  934. font-family: 'khula', sans-serif;
  935. {block:IfFontLora}
  936. font-family: 'lora', sans-serif;
  937. {/block:IfFontLora}
  938. text-transform:lowercase;
  939. font-size:10px;
  940. margin-top:0px;
  941. color:{color:info};
  942. padding-top:0px;
  943. text-align:left;
  944. display:inline-block;
  945. line-height:15px;
  946. letter-spacing:0px;
  947. margin-left:-2px;
  948. margin-bottom:0px;
  949. padding-bottom:1px;
  950. font-weight:400;
  951. -moz-transition-duration:0.2s;
  952. -webkit-transition-duration:0.2s;
  953. -o-transition-duration:0.2s;
  954. transition: all 0.2s ease-out;
  955. }
  956. #info tagged:hover{
  957. color:{color:hover};
  958. -moz-transition-duration:0.2s;
  959. -webkit-transition-duration:0.2s;
  960. -o-transition-duration:0.2s;
  961. transition: all 0.2s ease-out;
  962. }
  963. #info span {
  964. padding:4px;
  965. }
  966. #info namee {
  967. text-transform:lowercase;
  968. color:{color:info};
  969. letter-spacing:1px;
  970. font-family: 'khula', sans-serif;
  971. {block:IfFontLora}
  972. font-family: 'lora', sans-serif;
  973. {/block:IfFontLora}
  974. font-weight:600;
  975. }
  976. #post_info {
  977. width:520px;
  978. padding:5px;
  979. margin-top:-10px;
  980. font-size:10px;
  981. margin-left:-28px;
  982. color:{color:info};
  983. text-align:left;
  984. margin-bottom:-16px;
  985. z-index:9999999999999999;
  986. padding-left:12px;
  987. line-height:20px;
  988. letter-spacing:0px;
  989. font-family: 'khula', sans-serif;
  990. {block:IfFontLora}
  991. font-family: 'lora', sans-serif;
  992. {/block:IfFontLora}
  993. -moz-transition-duration:0.2s;
  994. -webkit-transition-duration:0.2s;
  995. -o-transition-duration:0.2s;
  996. transition: all 0.2s ease-out;
  997. }
  998. #post_info date {
  999. font-size:9px;
  1000. letter-spacing:0px;
  1001. text-transform:lowercase;
  1002. font-family: 'khula', sans-serif;
  1003. {block:IfFontLora}
  1004. font-family: 'lora', sans-serif;
  1005. {/block:IfFontLora}
  1006. font-weight:600;
  1007. width:512px;
  1008. padding:2px;
  1009. text-align:left;
  1010. padding-left:0px;
  1011. line-height:17px;
  1012. color:{color:info};
  1013. padding-bottom:3px;
  1014. padding-top:1px;
  1015. }
  1016. #post_info a {
  1017. font-size:12px;
  1018. letter-spacing:0px;
  1019. color:{color:info};
  1020. font-family: 'khula', sans-serif;
  1021. {block:IfFontLora}
  1022. font-family: 'lora', sans-serif;
  1023. {/block:IfFontLora}
  1024. }
  1025. #post_info span {
  1026. font-size:10px;
  1027. font-weight:bold;
  1028. }
  1029. #post_info a:hover {
  1030. color:{color:hover};
  1031. -moz-transition-duration:0.2s;
  1032. -webkit-transition-duration:0.2s;
  1033. -o-transition-duration:0.2s;
  1034. transition: all 0.2s ease-out;
  1035. }
  1036. #permalink{
  1037. margin-bottom:12px;
  1038. text-align:left;
  1039. font-size:9px;
  1040. margin-left:15px;
  1041. margin-top:16px;
  1042. font-weight:bold;
  1043. width:520px;
  1044. font-size:11px;
  1045. text-transform:none;
  1046. font-weight:300;
  1047. font-family: 'khula', sans-serif;
  1048. {block:IfFontLora}
  1049. font-family: 'lora', sans-serif;
  1050. {/block:IfFontLora}
  1051. letter-spacing:0px;
  1052. line-height:10px;
  1053. color:{color:text};
  1054. }
  1055. #permalink a{
  1056. color:{color:text};
  1057. font-family: 'khula', sans-serif;
  1058. {block:IfFontLora}
  1059. font-family: 'lora', sans-serif;
  1060. {/block:IfFontLora}
  1061. font-size:10px;
  1062. margin-left:-3px;
  1063. text-transform:none;
  1064. font-weight:600;
  1065. padding:3px;
  1066. }
  1067. #permalink a:hover{
  1068. color:{color:hover};
  1069. }
  1070. #permalink b {
  1071. color:{color:text};
  1072. font-family: 'khula', sans-serif;
  1073. {block:IfFontLora}
  1074. font-family: 'lora', sans-serif;
  1075. {/block:IfFontLora}
  1076. font-size:9px;
  1077. margin-left:-3px;
  1078. text-transform:none;
  1079. font-weight:600;
  1080. padding:3px;
  1081. }
  1082. #permalink span {
  1083. color:{color:text};
  1084. font-size:10px;
  1085. text-transform:none;
  1086. font-weight:700;
  1087. padding:3px;
  1088. }
  1089. /*questions and answers*/
  1090. #asking {
  1091. margin-left:40px;
  1092. margin-top:-55px;
  1093. }
  1094. #question {
  1095. padding:25px;
  1096. padding-left:52px;
  1097. margin-top:5px;
  1098. padding-top:22px;
  1099. margin-left:10px;
  1100. width:457px;
  1101. text-transform:none;
  1102. border-radius:0px;
  1103. {block:IfRoundedCorners}
  1104. border-radius:3px;
  1105. {/block:IfRoundedCorners}
  1106. font-family: 'khula', sans-serif;
  1107. {block:IfFontLora}
  1108. font-family: 'lora', sans-serif;
  1109. {/block:IfFontLora}
  1110. color:{color:text};
  1111. background-color:{color:asks};
  1112. }
  1113. #asker{
  1114. margin-top:12px;
  1115. padding:20px;
  1116. font-weight:300;
  1117. width:435px;
  1118. font-size:10px;
  1119. z-index:9999999999;
  1120. color:{color:text};
  1121. opacity:1;
  1122. background:{color:asks};
  1123. border-radius:2px;
  1124. margin-left:12px;
  1125. line-height:18px;
  1126. letter-spacing:0px;
  1127. font-family: 'khula', sans-serif;
  1128. {block:IfFontLora}
  1129. font-family: 'lora', sans-serif;
  1130. {/block:IfFontLora}
  1131. text-transform:none;
  1132. }
  1133. askerurl{
  1134. font-weight:600;
  1135. font-family: 'khula', sans-serif;
  1136. {block:IfFontLora}
  1137. font-family: 'lora', sans-serif;
  1138. {/block:IfFontLora}
  1139. font-size:10px;
  1140. margin-bottom:16px;
  1141. }
  1142. /*credit (u better leave this here u goof)*/
  1143. #credit{
  1144. position:fixed;
  1145. font-size:9px;
  1146. font-weight:700;
  1147. height:20px;
  1148. width:52px;
  1149. opacity:1;
  1150. right:12px;
  1151. bottom:10px;
  1152. line-height:10px;
  1153. letter-spacing:0px;
  1154. border-radius:3px;
  1155. background:{color:credit};
  1156. padding:7px;
  1157. z-index:9999999999999999999999999999;
  1158. text-align:center;
  1159. font-family: 'lora', sans-serif;
  1160. border:1px solid {color:border};
  1161. color:{color:text};
  1162. text-transform:lowercase;
  1163. -moz-transition-duration:0.6s;
  1164. -webkit-transition-duration:0.6s;
  1165. -o-transition-duration:0.6s;
  1166. transition: all 0.6s ease-out;
  1167. }
  1168. #credit a:hover{
  1169. color:{color:credit hover};
  1170. -moz-transition-duration:0.6s;
  1171. -webkit-transition-duration:0.6s;
  1172. -o-transition-duration:0.6s;
  1173. transition: all 0.6s ease-out;
  1174. }
  1175. {CustomCSS}</style>
  1176. </head>
  1177. <body>
  1178. <div class="container fade-in one">
  1179. <div id="sidebar_con">
  1180. {block:IfHeader}<div id="image_bigimage"><img src="{image:header}"></div>{/block:IfHeader}
  1181. <div id="sidebar_iconimage"><img src="{image:icon}"></div>
  1182. <div id="tit_sdebr">{text:sidebar label}</div>
  1183. <div id="description">{description}
  1184. <div id="sdebr_links">
  1185. <a href="/">home</a>
  1186. <a href="/ask">ask</a>
  1187. <a href="{text:link one url}">{text:link one label}</a>
  1188. <a href="{text:link two url}">{text:link two label}</a>
  1189. <a href="{text:link three url}">{text:link three label}</a>
  1190. <a href="{text:link four url}">{text:link four label}</a></div>
  1191. </div>
  1192. </div>
  1193. <div class="post_container fade-in one">
  1194. <!-- posts and entries -->
  1195. <div id="entries"class="fade-in one">
  1196. {block:Posts}
  1197. <div id="post"class="fade-in one">
  1198. <!-- texts -->
  1199. {block:Text}
  1200. {block:Title}<h1>{Title}</h1>{/block:Title}
  1201. <p>{Body}</p>
  1202. {/block:Text}
  1203. <!-- question and answers -->
  1204. {block:Answer}
  1205. <div id="asker"><askerurl>{Asker} asked:</askerurl></br> {Question}</div>
  1206. {Answer}{/block:Answer}
  1207. <!-- quotes -->
  1208. {block:Quote}
  1209. <div class="quote_cap"><i class="zmdi zmdi-quote"></i>
  1210. {Quote}<i class="zmdi zmdi-quote"></i>
  1211. </div>
  1212. <div class="quote_src">
  1213. {block:Source}- {Source}{/block:Source}
  1214. </div>
  1215. {/block:Quote}
  1216. <!-- links -->
  1217. {block:Link}
  1218. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1219. {block:Description}{Description}{/block:Description}
  1220. {/block:Link}
  1221. <!-- chats -->
  1222. {block:Chat}
  1223. {block:Title}<h1>{Title}</h1>{/block:Title}
  1224. <div class="chat_box">{block:Lines}<div class="chat_line">{block:Label}<div class ="chat_label">{Label}</div>{/block:Label}
  1225. <blockquote>{Line}</blockquote></div>{/block:Lines}</div>
  1226. {/block:Chat}
  1227. <!-- photos -->
  1228. {block:Photo}
  1229. {LinkOpenTag}<div class="ppost"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%">{LinkCloseTag}</div>
  1230. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1231. {/block:Photo}
  1232. <!-- photosets -->
  1233. {block:Photoset}
  1234. <div class="set"style="margin-top:-15px"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  1235. <div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" ></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div></center></div>
  1236. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1237. {/block:Photoset}
  1238. <!-- videos -->
  1239. {block:Video}
  1240. <div class="vsets">{Video-500}</div>
  1241. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1242. {/block:Video}
  1243. <!-- audios -->
  1244. {block:Audio}<div class="album_cover">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1245. {block:TrackName}<div class="audio_tit">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1246. {block:Artist}<div class="audio_artist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1247. {/block:ExternalAudio}<div class="audio_play">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1248. </br>
  1249. <div class="audio_player">{AudioPlayer}</div>
  1250. {/block:Audio}
  1251. <!-- info -->
  1252. <div id="info">
  1253. <div id="permalink">
  1254. <div id="post_info">
  1255. <date><a href="{Permalink}">{TimeAgo} </a><font style="float:right;margin-right:60px;margin-top:0px;"> {NoteCountWithLabel}</font style></date></br>
  1256. {block:RebloggedFrom}{block:ContentSource}
  1257. <a href="{ReblogParentURL}" title="via">via</a><a href="{SourceURL}"title="source">src</a>
  1258. {/block:ContentSource}
  1259. {/block:RebloggedFrom}
  1260. <font style="float:right;margin-right:60px;margin-top:-5px;"><a href="{ReblogURL}" title="reblog"target="_blank" class="details">reblog</a>
  1261. </a><div class="custom-like-button">{LikeButton}<span class="our_button"><span class="lnr lnr-heart"style="font-size:9px;font-weight:bold"></span></span></div></font style>
  1262. </div></div>
  1263. {/block:Date}
  1264.  
  1265. {block:HasTags}<tagged>{block:Tags} <a href="{TagURL}"> <tagged>#{Tag}</tagged> </a> {/block:Tags}
  1266.  
  1267. {/block:HasTags}
  1268. </div></div>
  1269. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1270. {/block:Posts}
  1271. {/block:Posts}
  1272. <div class="pagination"style="{color:title text}">
  1273. {block:PreviousPage}<a href="{PreviousPage}"title="previous page">BACK</a>{/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}<span class="current_page"style="color:{color:accent};font-weight:600;padding:5px">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page"style="{color:text}" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}"title="next page">NEXT</a>{/block:NextPage}
  1274. {/block:Pagination}</div>
  1275. </div>
  1276.  
  1277. </div>
  1278.  
  1279. <!-- credit(u better dont touch this here u goof) -->
  1280. <div id="credit">
  1281. <a href="http://ceesty.com/qNgV4R"title="Coded by 1204px">themes by azure</a>
  1282. </div></div>
  1283. </html>
  1284. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1285. <script> $(function(){ $('#entries').unnest({
  1286. yourCaption: ".photo_caption", //your caption selector, the div wrapping {Caption}
  1287. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1288. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1289. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1290. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1291. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1292. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1293. }); });
  1294. </script>
  1295. <!-- pixel union photoset script -->
  1296. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1297. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1298. <script>
  1299. $(document).ready(function(){
  1300. $('.photo-slideshow').pxuPhotoset({
  1301. lightbox: true,
  1302. rounded: false,
  1303. gutter: '0px',
  1304. borderRadius:'0px',
  1305. photoset: '.photo-slideshow',
  1306. photoWrap: '.photo-data',
  1307. photo: '.pxu-photo'
  1308. });</script>
  1309.  
  1310. </body>
  1311. <!-- end html -->
Advertisement
Add Comment
Please, Sign In to add comment