API tools faq
paste
Advertisement
amaanat

justajoo theme - with icon and quote

amaanat
Feb 23rd, 2019
2,334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.54 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME TWO - JUSTAJOO
  4. justajoo means quest in urdu
  5.  
  6. MADE FOR YOU WITH ♡ BY AMAANAT THEMES
  7.  
  8. (@amaanat on tumblr)
  9.  
  10.  
  11. please visit https://www.amaanat.tumblr.com/terms to read the terms and conditions before using my page. If you do not agree to the terms of use, you may not use my work.
  12.  
  13. If you have questions about this code or find things difficult, do not hesitate to contact me!
  14.  
  15. please do not steal my code, remove or move the credit or claim this as your own.
  16.  
  17. credits:
  18. - honeybee icon font by suiomi
  19. - custom tumblr controls by cyantists
  20. - google fonts
  21.  
  22. a full list of credits used in this theme and others can be found on https://www.amaanat.tumblr.com/credits
  23.  
  24. much thanks to codingcabin for helping me out in difficult times!
  25.  
  26. -->
  27.  
  28. <!DOCTYPE html>
  29. <head>
  30.  
  31.  
  32. <title>{Title}</title>
  33. <link rel="shortcut icon" href="{Favicon}">
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. {block:Description}
  37. <meta name="description" content="{MetaDescription}"/>
  38. {/block:Description}
  39.  
  40. <!-- meta's for customisation in normal view -->
  41.  
  42. <meta name="if:sidebarimage" content="0" />
  43. <meta name="image:sidebar image" content="" />
  44.  
  45. <meta name="if:icon" content="1" />
  46. <meta name="if:quote" content="1" />
  47. <meta name="text:quote" content="" />
  48.  
  49. <meta name="color:background color" content="#ffffff" />
  50. <meta name="color:post background color" content="#ffffff" />
  51.  
  52. <meta name="color:title color" content="#000000" />
  53. <meta name="color:text" content="#000000" />
  54. <meta name="color:links" content="#a95c5c" />
  55. <meta name="color:links hover" content="#ff99cc" />
  56.  
  57. <meta name="color:sidebar accent color" content="#ffe4e1" />
  58. <meta name="color:description text color" content="#000000" />
  59. <meta name="color:sidebar links color" content="#000000" />
  60.  
  61. <meta name="color:audio player color" content="#ffe4e1" />
  62. <meta name="color:playcount color" content="#ffe4e1" />
  63.  
  64. <meta name="if:turn this on if you have a light background and turn it off if you have a dark background" content="1" />
  65. <meta name="if:Infinite Scroll" content="0"/>
  66. <meta name="if:scroll to top" content="1" />
  67. <meta name="if:fade up posts" content="1" />
  68. <meta name="if:search bar" content="1" />
  69. <meta name="if:play count" content="0" />
  70.  
  71. <meta name="text:ask box text" content="inbox" />
  72. <meta name="text:search bar placeholder" content="search this blog" />
  73.  
  74. <meta name="text:link one url" content="" />
  75. <meta name="text:link one" content="" />
  76. <meta name="text:link two url" content="" />
  77. <meta name="text:link two" content="" />
  78. <meta name="text:link three url" content="" />
  79. <meta name="text:link three" content="" />
  80.  
  81.  
  82.  
  83. <!-- end customise metas -->
  84.  
  85. <!-- animate on hover -->
  86.  
  87. <link rel="stylesheet" href="https://static.tumblr.com/uopakca/prpov76n6/aos.css" />
  88. <script src="https://static.tumblr.com/uopakca/L8aov76mb/aos.js"></script>
  89.  
  90. <script>
  91. $(document).ready(function(){
  92. AOS.init();
  93. });
  94. </script>
  95.  
  96.  
  97. <!-- css hover effect https://github.com/IanLunn/Hover -->
  98. <link href="css/hover.css" rel="stylesheet" media="all">
  99.  
  100.  
  101. <!-- HONEYBEE ICON FONT BY SUIOMI | DO NOT TOUCH OR REMOVE THIS AT ALL-->
  102. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  103.  
  104. <!-- fonts -->
  105. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  106. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  107.  
  108.  
  109.  
  110. <!-- JQUERY SCRIPT + OTHER SCRIPTS AND LIBRARYS-->
  111. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  112.  
  113.  
  114. <!-- shythemes photoset -->
  115. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  116. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  117.  
  118.  
  119. <!-- shythemes vid resizing -->
  120. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  121.  
  122. <!-- zachary fury smooth scroll - https://cdnjs.com/libraries/smoothscroll -->
  123. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  124.  
  125.  
  126. <!-- style audio player by shudesigns -->
  127.  
  128. <script>
  129. $(document).ready(function() {
  130. $('iframe.tumblr_audio_player').load( function() {
  131. $('iframe.tumblr_audio_player').contents().find("head")
  132. .append($("<style type='text/css'> .audio-player{background:{color:audio player color} !important} </style>"));
  133. });
  134. });
  135. </script>
  136.  
  137.  
  138. <!-- tooltip tutorial by easy-html-tutorials -->
  139.  
  140.  
  141. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  142.  
  143. <script>
  144.  
  145. (function($){
  146.  
  147. $(document).ready(function(){
  148.  
  149. $("a[title]").style_my_tooltips({
  150.  
  151. tip_follows_cursor:true,
  152.  
  153. tip_delay_time:100,
  154.  
  155. tip_fade_speed:300,
  156.  
  157. attribute:"title"
  158.  
  159. });
  160.  
  161. });
  162.  
  163. })(jQuery);
  164.  
  165. </script>
  166.  
  167. <!-- end tooltips -->
  168.  
  169.  
  170. </head>
  171.  
  172.  
  173.  
  174.  
  175. <style type="text/css">
  176.  
  177.  
  178.  
  179.  
  180. /* tooltips. Do not touch this unless you know what to do. I have customised the tooltips in a way that they are visible on dark AND light backgrounds and would prefer to keep it that way, because of the credits link */
  181.  
  182. #s-m-t-tooltip {
  183.  
  184. max-width:300px; /* maximum width */
  185.  
  186. background-color:#ffffff; /* color background */
  187.  
  188. border:1px solid; /* color, shape and thickness of the border */
  189.  
  190. border-color:#eee;
  191.  
  192. font-size:12px; /* font size */
  193.  
  194. color:#000000; /* font color */
  195.  
  196. letter-spacing:1px; /* font spacing */
  197.  
  198. text-transform:lowercase; /* uppercase, lowercase, none */
  199.  
  200. padding:5px; /* padding size */
  201.  
  202. margin:20px 0px 0px 20px; /* margin size, in order, top, right, bottom, left */
  203.  
  204. z-index:9999999999999999999999;
  205.  
  206. border-radius: 4px; /* border radius */
  207.  
  208. }
  209.  
  210.  
  211.  
  212. /* cyantists custom tumblr controls */
  213.  
  214. iframe.tmblr-iframe {
  215. z-index:99999999999999!important;
  216. top:0!important;
  217. right:0!important;
  218. opacity:0.4;
  219. /* delete invert(1) from here */
  220. {block:ifturnthisonifyouhavealightbackgroundandturnitoffifyouhaveadarkbackground}
  221. filter:invert(1) contrast(150%);
  222. -webkit-filter:invert(1) contrast(150%);
  223. -o-filter:invert(1) contrast(150%);
  224. -moz-filter:invert(1) contrast(150%);
  225. -ms-filter:invert(1) contrast(150%);
  226. {block:ifturnthisonifyouhavealightbackgroundandturnitoffifyouhaveadarkbackground}
  227. /* to here if your blog has a dark background */
  228. transform:scale(0.65);
  229. transform-origin:100% 0;
  230. -webkit-transform:scale(0.65);
  231. -webkit-transform-origin:100% 0;
  232. -o-transform:scale(0.65);
  233. -o-transform-origin:100% 0;
  234. -moz-transform:scale(0.65);
  235. -moz-transform-origin:100% 0;
  236. -ms-transform:scale(0.65);
  237. -ms-transform-origin:100% 0;}
  238.  
  239. iframe.tmblr-iframe:hover {
  240. opacity:0.6!important;}
  241.  
  242.  
  243.  
  244. /* scrollbar */
  245. /* width */
  246. ::-webkit-scrollbar {
  247. width: 6px;
  248. z-index:-1;
  249. height:6px;
  250.  
  251.  
  252. }
  253.  
  254. /* Track */
  255. ::-webkit-scrollbar-track {
  256. background:transparent;
  257. }
  258.  
  259. /* Handle */
  260. ::-webkit-scrollbar-thumb {
  261. background:{color:sidebar accent color};
  262. border-radius:50px;
  263. transition:.5s ease;
  264. width:3px;
  265. }
  266.  
  267. ::-webkit-scrollbar-corner {
  268. background-color:{color:background color};
  269. }
  270.  
  271.  
  272. body {
  273. font-family: 'Roboto', sans-serif;
  274. font-size:14px;
  275. margin:auto;
  276. background-color:{color:background color};
  277.  
  278. }
  279.  
  280. img {
  281. max-width:100%;
  282. }
  283.  
  284. blockquote {
  285. padding-left:10px;
  286. border-left:1px solid;
  287. border-left-color:#eee;
  288. margin:5px;
  289. }
  290.  
  291. ul {
  292. list-style-type:circle;
  293. color:{color:text};
  294. }
  295.  
  296. h1 {
  297. font-size:22px;
  298. color:{color:title color};
  299. }
  300.  
  301. h2 {
  302. font-size:20px;
  303. color:{color:title color};
  304. }
  305.  
  306. h3 {
  307. font-size:18px;
  308. }
  309.  
  310. a {
  311. transition:.5s ease;
  312. color:{color:links};
  313. text-decoration:none;
  314. }
  315.  
  316. a:hover {
  317. color:{color:links hover};
  318. }
  319.  
  320. /* when you place other people's gifs in posts this is the attribution */
  321.  
  322. .tmblr-attribution {
  323. padding:0px;
  324. margin-top:0!important;
  325. font-size:11px;
  326. transition:.5s ease;
  327.  
  328. }
  329.  
  330. .tmblr-attribution:hover {
  331. padding-left:10px;
  332. }
  333.  
  334. /* sidebar stuff */
  335.  
  336. .sidebar {
  337. width:300px;
  338. position:fixed;
  339. background-color:transparent;
  340. padding:20px;
  341. margin-left:150px;
  342. margin-top:50px;
  343. display:inline-block;
  344.  
  345. }
  346.  
  347. .sidebar-image img {
  348. border-radius:4px;
  349. transition:.5s ease;
  350. filter: saturate(90%);
  351. width:280px;
  352. height:auto;
  353. max-height:400px;
  354. }
  355.  
  356. .sidebar-image img:hover {
  357. filter: saturate(120%);
  358. }
  359.  
  360. .sidebar-icon {
  361. margin-top:10px;
  362. display:inline-block;
  363. }
  364.  
  365. .sidebar-icon img {
  366. height:40px;
  367. width:40px;
  368. border-radius:50px;
  369. padding:5px;
  370. background-color:#eee;
  371. border-style:solid;
  372. border-width:1px;
  373. border-color:{color:sidebar accent color};
  374. vertical-align:middle;
  375. }
  376.  
  377. .sidebar-quote {
  378. color:{color:text};
  379. font-size:11px;
  380. font-style:italic;
  381. background-color:#eee;
  382. display:inline-block;
  383. width:195px;
  384. padding:10px;
  385. margin-left:10px;
  386. border-radius:4px;
  387. vertical-align:middle;
  388. text-align:center;
  389. }
  390.  
  391.  
  392. .sidebar-description {
  393. margin-top:10px;
  394. font-size:14px;
  395. width:270px;
  396. padding:5px;
  397. background:{color:sidebar accent color};
  398. color:{color:description text color};
  399. border-radius:4px;
  400. text-align:center;
  401. }
  402.  
  403. .sidebar-description:empty {
  404. display:none;
  405.  
  406. }
  407.  
  408.  
  409. .sidebar-links {
  410. margin-top:10px;
  411. }
  412.  
  413. .sidebar-links a {
  414. width:277px;
  415. border-radius:4px;
  416. padding:2px;
  417. display:block;
  418. font-size:15px;
  419. text-transform:uppercase;
  420. text-decoration:none;
  421. color:{color:sidebar links color};
  422. transition:.5s ease;
  423. background-color:{color:sidebar accent color};
  424. text-align:center;
  425. min-height:25px;
  426. line-height:25px;
  427. }
  428.  
  429. .sidebar-links a:hover {
  430. color:{color:sidebar links hover};
  431. }
  432.  
  433.  
  434.  
  435.  
  436. /* Wobble Skew */
  437. @-webkit-keyframes hvr-wobble-skew {
  438. 16.65% {
  439. -webkit-transform: skew(-12deg);
  440. transform: skew(-12deg);
  441. }
  442. 33.3% {
  443. -webkit-transform: skew(10deg);
  444. transform: skew(10deg);
  445. }
  446. 49.95% {
  447. -webkit-transform: skew(-6deg);
  448. transform: skew(-6deg);
  449. }
  450. 66.6% {
  451. -webkit-transform: skew(4deg);
  452. transform: skew(4deg);
  453. }
  454. 83.25% {
  455. -webkit-transform: skew(-2deg);
  456. transform: skew(-2deg);
  457. }
  458. 100% {
  459. -webkit-transform: skew(0);
  460. transform: skew(0);
  461. }
  462. }
  463. @keyframes hvr-wobble-skew {
  464. 16.65% {
  465. -webkit-transform: skew(-12deg);
  466. transform: skew(-12deg);
  467. }
  468. 33.3% {
  469. -webkit-transform: skew(10deg);
  470. transform: skew(10deg);
  471. }
  472. 49.95% {
  473. -webkit-transform: skew(-6deg);
  474. transform: skew(-6deg);
  475. }
  476. 66.6% {
  477. -webkit-transform: skew(4deg);
  478. transform: skew(4deg);
  479. }
  480. 83.25% {
  481. -webkit-transform: skew(-2deg);
  482. transform: skew(-2deg);
  483. }
  484. 100% {
  485. -webkit-transform: skew(0);
  486. transform: skew(0);
  487. }
  488. }
  489. .hvr-wobble-skew {
  490. display: inline-block;
  491. vertical-align: middle;
  492. -webkit-transform: perspective(1px) translateZ(0);
  493. transform: perspective(1px) translateZ(0);
  494. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  495. }
  496. .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active {
  497. -webkit-animation-name: hvr-wobble-skew;
  498. animation-name: hvr-wobble-skew;
  499. -webkit-animation-duration: 1s;
  500. animation-duration: 1s;
  501. -webkit-animation-timing-function: ease-in-out;
  502. animation-timing-function: ease-in-out;
  503. -webkit-animation-iteration-count: 1;
  504. animation-iteration-count: 1;
  505. }
  506.  
  507.  
  508.  
  509. /* search bar */
  510.  
  511. #sf {
  512. border:none;
  513. width:245px;
  514. height:25px;
  515. background-color:{color:sidebar accent color};
  516.  
  517. }
  518.  
  519. #sf::placeholder {
  520. text-align:center;
  521. }
  522.  
  523. #sf:focus {
  524. border:none;
  525. }
  526.  
  527. #sb {
  528. height:25px;
  529. vertical-align:middle;
  530. background-color:transparent;
  531. border:none;
  532. margin-left:5px;
  533. }
  534.  
  535. .th-loupe-o {
  536. font-size:18px;
  537. color:black;
  538. }
  539. #sb:hover {
  540. cursor:pointer;
  541. }
  542.  
  543.  
  544. /* actual posts */
  545.  
  546. .container {
  547. margin-left:650px;
  548. margin-top:100px;
  549. position:absolute;
  550. width:540px;
  551. margin-bottom:100px;
  552. }
  553.  
  554. .posts {
  555. margin-bottom:50px;
  556. width:540px;
  557. background-color:{color:post background color};
  558. }
  559.  
  560. /* reblogs */
  561.  
  562. .title {
  563. font-weight:bold;
  564. font-size:20px;
  565. margin-bottom:10px;
  566. color:{color:title color};
  567. }
  568.  
  569. .reblogs {
  570. display:inline-block;
  571.  
  572. }
  573.  
  574. .reblogs img {
  575. vertical-align:middle;
  576. display:inline-block;
  577. width:20px;
  578. height:20px;
  579. border-radius:50px;
  580. }
  581.  
  582. .reblogusernames {
  583. display:inline-block;
  584. margin-left:10px;
  585. color:{color:links};
  586. font-weight:bold;
  587. font-size:12px;
  588. transition:.5s ease;
  589. }
  590.  
  591. .reblogusernames:hover {
  592. color:{color:links hover};
  593. }
  594.  
  595. .text {
  596. color:{color:text};
  597. margin-bottom:15px;
  598. margin-top:-5px;
  599. font-size:13px;
  600. }
  601.  
  602. .text img {
  603. max-width:100%;
  604. height:auto;
  605. font-size:{select:font size};
  606. }
  607.  
  608. /* photoset posts */
  609. .photo-slideshow {
  610. margin-bottom:10px;
  611. }
  612.  
  613. /* photo posts */
  614. .photopost {
  615. margin-bottom:10px;
  616. }
  617.  
  618.  
  619. /* answer posts */
  620.  
  621. .asker img, .answerer img {
  622. width:25px;
  623. height:25px;
  624. border-radius:50px;
  625. vertical-align:middle;
  626. margin-right:10px;
  627. }
  628.  
  629. .asker, .answerer {
  630. font-size:13px;
  631. color:{color:text};
  632. }
  633.  
  634. .asker a, .answerer a {
  635. text-decoration:none;
  636. font-size:13px;
  637. font-weight:bold;
  638. color:{color:links};
  639. transition:.5s ease;
  640.  
  641. }
  642.  
  643. .asker a:hover, .answerer a:hover {
  644. color:{color:links hover};
  645. }
  646.  
  647. .question {
  648. font-size:13px;
  649. color:{color:text};
  650. top:5px;
  651. width:520px;
  652. background-color:#eee;
  653. padding:10px;
  654. position:relative;
  655. }
  656.  
  657. .question::before {
  658. position: absolute;
  659. background-color:{color:post background color};
  660. top:-15px;
  661. margin-left:-5px;
  662. transform: rotate(270deg);
  663. content: '';
  664. display: block;
  665. border-top: 10px solid transparent;
  666. border-bottom: 10px solid transparent;
  667. border-left: 15px solid #eee;
  668. }
  669.  
  670. .answer {
  671. margin-bottom:5px;
  672. font-size:13px;
  673. }
  674.  
  675. /* video and audio posts */
  676.  
  677. .video {
  678. margin-bottom:10px;
  679. }
  680.  
  681. .audio iframe {
  682. width:100%;
  683. }
  684.  
  685. .audio {
  686. margin-bottom:10px;
  687. }
  688.  
  689. .spotify_audio_player {
  690. height: 80px !important;
  691. width:100%;
  692. }
  693.  
  694. {block:ifplaycount}
  695. .playcount {
  696. margin-bottom:10px;
  697. padding-top:3px;
  698. padding-bottom:3px;
  699. background-color:{color:audio player color};
  700. color:{color:playcount color};
  701. text-align:center;
  702. width:100%;
  703. font-size:15px;
  704. font-weight:bold;
  705. }
  706. {/block:ifplaycount}
  707.  
  708. /* link posts */
  709.  
  710. .linkpost {
  711. margin-bottom:10px;
  712. text-align:center;
  713. }
  714.  
  715. .linkpost a {
  716. transition:.5s ease;
  717. color:{color:links};
  718. font-size:16px;
  719. padding:5px;
  720. text-transform:uppercase;
  721. }
  722.  
  723. .linkpost a:hover {
  724. color:{color:links hover};
  725. }
  726.  
  727. /* quote post */
  728.  
  729. .quotes {
  730. font-size:26px;
  731. text-align:Center;
  732. font-family: 'Dancing Script', cursive;
  733. margin-bottom:10px;
  734. color:{color:text};
  735.  
  736. }
  737.  
  738. .quotesource {
  739. font-size:13px;
  740. color:{color:text};
  741. }
  742.  
  743. /* chat post */
  744.  
  745. .chat {
  746. font-size:14px;
  747. color:{color:text};
  748. }
  749.  
  750. /* keep reading link */
  751. .keepreading {
  752. margin-top:10px;
  753. }
  754.  
  755. .keepreading a {
  756. transition:.5 ease;
  757. }
  758. .keepreading a:hover {
  759. padding-left:10px;
  760. }
  761.  
  762. /* footer */
  763.  
  764. .footer {
  765. {block:AskPage}display:none;{/block:AskPage}
  766. {block:SubmitPage}display:none; {/block:SubmitPage}
  767. background-color:{color:post background color};
  768. width:540px !important;
  769. border-radius:4px;
  770. margin-top:30px;
  771. margin-bottom:100px;
  772. color:{color:links};
  773. }
  774.  
  775. .footer a{
  776. text-decoration:none;
  777. text-transform:lowercase;
  778. color:{color:links color};
  779. font-size:13px;
  780. transition:.5s ease;
  781. }
  782.  
  783. .footer a:hover {
  784. color:{color:links hover};
  785. }
  786.  
  787. .date, .notecount, .via, .reblogbutton {
  788. display:inline-block;
  789. }
  790.  
  791.  
  792. .reblogbutton {
  793. float:right;
  794. transition: 0.70s;
  795. -webkit-transition: 0.70s;
  796. -moz-transition: 0.70s;
  797. -ms-transition: 0.70s;
  798. -o-transition: 0.70s;
  799. }
  800.  
  801. .reblogbutton:hover {
  802. transition: 0.70s;
  803. -webkit-transition: 0.70s;
  804. -moz-transition: 0.70s;
  805. -ms-transition: 0.70s;
  806. -o-transition: 0.70s;
  807. -webkit-transform: rotate(180deg);
  808. -moz-transform: rotate(180deg);
  809. -o-transform: rotate(180deg);
  810. -ms-transform: rotate(180deg);
  811. transform: rotate(180deg);
  812. }
  813.  
  814.  
  815. .tags {
  816. margin-top:10px;
  817. display:inline-block;
  818.  
  819. }
  820.  
  821. .tags a {
  822. margin-right:10px;
  823. display:inline-block;
  824. font-size:11px;
  825. word-wrap:break-word;
  826. }
  827.  
  828.  
  829.  
  830. /* pagination and infinite scroll. If you do not know how to work with this just don't. please. */
  831. .pagination {
  832. width:535px !important;
  833. color:{color:links};
  834. margin-top:50px;
  835. padding:3px;
  836. border-radius:4px;
  837. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}
  838. text-align:center;
  839. font-size:13px;
  840. }
  841.  
  842. .pagination a {
  843. color:{color:links};
  844. text-decoration:none;
  845. transition:.5s ease;
  846. }
  847.  
  848. .pagination a:hover {
  849. color:{color:links hover};
  850. }
  851.  
  852. /* sorrism script tysm Lucrezia */
  853. #infscr-loading {display:none!important;}
  854.  
  855. /* post notes */
  856.  
  857. .postnotes {
  858. margin-top:50px;
  859. max-height:300px;
  860. padding:10px;
  861. overflow:auto;
  862. font-size:10px;
  863. color:{color:text};
  864.  
  865. }
  866.  
  867. ol.notes li.note {
  868. padding:5px;
  869. }
  870.  
  871. .postnotes ol {
  872. list-style-type:none;
  873. }
  874.  
  875. .postnotes img {
  876. width:15px;
  877. height:15px;
  878. border-radius:50px;
  879. margin-right:10px;
  880. vertical-align:middle;
  881. }
  882.  
  883.  
  884.  
  885.  
  886. /* you touch this and you feel my wrath */
  887. .credit {
  888. background-color:white;
  889. line-height:16px;
  890. padding-top:5px;
  891. padding-bottom:5px;
  892. padding-left:5px;
  893. position: fixed;
  894. right:10px;
  895. bottom: 10px;
  896. display: block;
  897. overflow: hidden;
  898. color: #000;
  899. font-size: 13px;
  900. text-align: center;
  901. text-decoration: none;
  902. letter-spacing:normal;
  903. font-family: 'Montserrat', sans-serif;
  904. }
  905.  
  906. .credit:after {
  907. display: inline-block;
  908. width: 0;
  909. content: 'amaanat';
  910. letter-spacing:normal;
  911. transition: width .9s ease;
  912. }
  913. .credit:hover:after {
  914. width: 4em;
  915. padding-right:5px;
  916. }
  917.  
  918.  
  919. /* .th-diamond-o:before{
  920. content:'\e9ef';
  921. font-family:'honeybee';
  922. font-size:14px;
  923. } */
  924.  
  925. .th-diamond-o {
  926. font-size:16px;
  927.  
  928. }
  929.  
  930. .credit:hover {
  931. color:black;
  932. }
  933.  
  934.  
  935. /* lightbox */
  936. .vignette, #vignette {
  937. opacity:0;
  938. background-image: none!important;
  939. }
  940.  
  941. .lightbox-image, #tumblr_lightbox img {
  942. box-shadow:none !important;
  943. border-radius:4px !important;
  944. max-width:none;
  945.  
  946.  
  947. }
  948.  
  949. .tmblr-lightbox, #tumblr_lightbox {
  950. background-color:rgba(255,255,255,0.8) !important;
  951. /* the .8 means the opacity heheheheh */
  952.  
  953.  
  954. }
  955.  
  956. /* scroll to top button */
  957.  
  958. .scrolltop {
  959. transition:ease;
  960. position:fixed;
  961. bottom:10px;
  962. left:10px;
  963. display:none;
  964. font-size:12px;
  965. }
  966.  
  967. .scrolltop a {
  968. text-decoration:none;
  969. color:black;
  970. padding:5px;
  971. transition:.5s ease;
  972. border-radius:4px;
  973. }
  974.  
  975. .scrolltop a:hover {
  976. background-color:black;
  977. color:white;
  978. }
  979.  
  980.  
  981.  
  982.  
  983.  
  984.  
  985.  
  986.  
  987.  
  988. </style>
  989.  
  990. <body>
  991.  
  992. <div class="sidebar">
  993.  
  994. {block:ifsidebarimage}
  995. <div class="sidebar-image">
  996. <a title="{title}" href="/"><img src="{image:sidebar image}"></a>
  997. </div>
  998. {/block:ifsidebarimage}
  999.  
  1000. {block:ificon}<a title="{Title}" href="/" ><div class="sidebar-icon"><img src="{PortraitURL-128}"></a></div>{block:ificon}
  1001.  
  1002. {block:ifquote}<div class="sidebar-quote">{text:quote}</div>{/block:ifquote}
  1003.  
  1004. {block:description}<div class="sidebar-description">{description}</div>{/block:description}
  1005.  
  1006. <div class="sidebar-links">
  1007. <a class="hvr-wobble-skew" href="/ask">{text:ask box text}</a><p>
  1008. {block:iflinkone}<a class="hvr-wobble-skew" href="{text:link one url}">{text:link one}</a><p>{/block:iflinkone}
  1009. {block:iflinktwo}<a class="hvr-wobble-skew" href="{text:link two url}">{text:link two}</a><p>{/block:iflinktwo}
  1010. {block:iflinkthree}<a class="hvr-wobble-skew" href="{text:link three url}">{text:link three}</a><p>{/block:iflinkthree}
  1011.  
  1012. </div>
  1013. {block:ifsearchbar}
  1014. <form action="/search" method="get" class="sfm">
  1015. <input type="text" placeholder="{text:search bar placeholder}" name="q" autocomplete="off" value="{SearchQuery}" id="sf"/>
  1016. <button type="submit" value="Search" id="sb" class="hvr-wobble-skew"><span class="th th-loupe-o"></span></button>
  1017. </form>
  1018. {/block:ifsearchbar}
  1019. </div>
  1020.  
  1021. <!-- end of sidebar -->
  1022.  
  1023. <!-- start of main content -->
  1024.  
  1025. <div class="container">
  1026.  
  1027. {block:Posts}
  1028. {block:iffadeupposts}<div data-aos="fade-up">{/block:iffadeupposts}
  1029. <div class="posts">
  1030.  
  1031.  
  1032. <!-- photo posts -->
  1033.  
  1034. {block:Photo}
  1035. <div class="photopost">
  1036. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1037. <img src="{PhotoURL-HighRes}">
  1038. </a>{LinkCloseTag}</div>
  1039.  
  1040.  
  1041. {block:Caption}
  1042.  
  1043. {block:notreblog}
  1044. <div class="text">{caption}</div>
  1045. {/block:notreblog}
  1046.  
  1047. {block:reblogs}
  1048. <div class="reblogs">
  1049. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1050. </div>
  1051. <div class="text">{body}</div>
  1052. {/block:reblogs}
  1053.  
  1054. {/block:Caption}
  1055. {/block:Photo}
  1056.  
  1057. <!-- photosets -->
  1058.  
  1059. {block:Photoset}
  1060. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<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}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1061.  
  1062.  
  1063. {block:Caption}
  1064.  
  1065. {block:notreblog}
  1066. <div class="text">{caption}</div>
  1067. {/block:notreblog}
  1068.  
  1069. {block:reblogs}
  1070. <div class="reblogs">
  1071. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1072. </div>
  1073. <div class="text">{body}</div>
  1074. {/block:reblogs}
  1075.  
  1076.  
  1077. {/block:Caption}
  1078. {/block:Photoset}
  1079.  
  1080. <!-- video posts -->
  1081.  
  1082. {block:Video}
  1083. <div class="video">{Video-500}</div>
  1084.  
  1085. {block:Caption}
  1086.  
  1087. {block:notreblog}
  1088. <div class="text">{caption}</div>
  1089. {/block:notreblog}
  1090.  
  1091. {block:reblogs}
  1092. <div class="reblogs">
  1093. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1094. </div>
  1095. <div class="text">{body}</div>
  1096. {/block:reblogs}
  1097.  
  1098. {/block:Caption}
  1099.  
  1100. {/block:Video}
  1101.  
  1102. <!-- audio posts -->
  1103.  
  1104. {block:Audio}
  1105. <div class="audio">
  1106. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  1107. </div>
  1108.  
  1109. {block:ifplaycount}<div class="playcount">{playcountwithlabel}</div>{/block:ifplaycount}
  1110.  
  1111. {block:Caption}
  1112.  
  1113. {block:notreblog}
  1114. <div class="text">{caption}</div>
  1115. {/block:notreblog}
  1116.  
  1117. {block:reblogs}
  1118. <div class="reblogs">
  1119. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1120. </div>
  1121. <div class="text">{body}</div>
  1122. {/block:reblogs}
  1123.  
  1124. {/block:Caption}
  1125.  
  1126. {/block:Audio}
  1127.  
  1128. <!-- quote posts -->
  1129.  
  1130. {block:Quote}
  1131. <div class="quotes">"{Quote}"</div>
  1132. {block:Source}<div class="quotesource">- {source}</div>{/block:Source}
  1133. {/block:Quote}
  1134.  
  1135. <!-- text posts -->
  1136. {block:text}
  1137.  
  1138. {block:title}<div class="title">{title}</div>{/block:title}
  1139.  
  1140. {block:reblogs}
  1141.  
  1142. <div class="reblogs">
  1143. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1144. </div>
  1145. <div class="text">{body}</div>
  1146.  
  1147. {/block:reblogs}
  1148.  
  1149. {block:notreblog}<div class="text">{body}</div>{/block:notreblog}
  1150.  
  1151.  
  1152. {/block:text}
  1153.  
  1154. <!-- answer posts -->
  1155. {block:Answer}
  1156.  
  1157. <div class="asker"><img src="{askerportraitURL-128}">{asker} said:
  1158. </div><p>
  1159.  
  1160. <div class="question">{question}</div><p>
  1161.  
  1162. {block:Answerer}<div class="answerer"><img src="{AnswererPortraitURL-128}"> {Answerer} replied:</div>{/block:Answerer}
  1163.  
  1164. <div class="answer">{answer}</div>
  1165.  
  1166. {block:reblogs}
  1167. <div class="reblogs">
  1168. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1169. </div>
  1170. <div class="text">{body}</div>
  1171. {/block:reblogs}
  1172.  
  1173. {/block:Answer}
  1174.  
  1175. <!-- chat posts -->
  1176.  
  1177. {block:Chat}
  1178. {block:Title}<div class="title">{title}</div>{/block:Title}
  1179. {block:Lines}
  1180. <div class="chat">
  1181. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br></div>
  1182. {/block:Lines}
  1183. {/block:Chat}
  1184.  
  1185. <!-- link posts -->
  1186.  
  1187. {block:Link}
  1188. <div class="linkpost"><a href="{URL}" >{Name}</a></div>
  1189.  
  1190. {block:notreblog}
  1191. {block:Description}
  1192. <div class="text">{description}</div>
  1193. {/block:Description}
  1194. {/block:notreblog}
  1195.  
  1196.  
  1197.  
  1198. {block:Reblogs}
  1199. <div class="reblogs">
  1200. <a href="{permalink}"><img src="{portraitURL-64}"><div class="reblogusernames">{username}</div></a>
  1201. </div>
  1202. <div class="text">{body}</div>
  1203. {/block:Reblogs}
  1204.  
  1205.  
  1206. {/block:Link}
  1207.  
  1208.  
  1209. {block:More}
  1210. <div class="keepreading">
  1211. <a href="{Permalink}">continue reading this post</a>
  1212. </div>
  1213. {/block:More}
  1214.  
  1215.  
  1216.  
  1217. <!-- end of post styling -->
  1218.  
  1219. <!-- footer -->
  1220.  
  1221.  
  1222. <div class="footer">
  1223. {block:Date}<div class="date"><a title="{Month} {DayOfMonth}{DayOfMonthSuffix}"href="{permalink}">{DayOfWeek}</a></div>{/block:Date}
  1224.  
  1225.  
  1226. {block:NoteCount}
  1227.  
  1228. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- gap between date and notes -->
  1229.  
  1230.  
  1231. <a class="notecount" href="{permalink}">{notecount} notes</a>{/block:NoteCount}
  1232.  
  1233.  
  1234.  
  1235. {block:RebloggedFrom}
  1236.  
  1237. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- gap between notes and via/source-->
  1238.  
  1239. <div class="via"><a title="via: {reblogparentname}" href="{reblogParentURL}">via</a> / <a title="source: {reblogrootname}" href="{reblogrootURL}">src</a></div>
  1240. {/block:RebloggedFrom}
  1241.  
  1242.  
  1243. <div class="reblogbutton"><a title="reblog this post" href="{ReblogURL}" target="_blank" class="reblog"><span class="th th-reblog"></span>
  1244. </a></div>
  1245.  
  1246. <br>
  1247.  
  1248. {block:HasTags}
  1249. {block:Tags}<div class="tags"><a href="{TagUrl}">#{Tag}</a></div>{/block:Tags}
  1250. {/block:HasTags}
  1251. </div>
  1252.  
  1253.  
  1254. </div>
  1255. {block:iffadeupposts}</div>{/block:iffadeupposts}
  1256.  
  1257. {/block:Posts}
  1258.  
  1259. <!-- post notes -->
  1260.  
  1261. {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
  1262.  
  1263. <!-- pagination -->
  1264.  
  1265. {block:pagination}
  1266. <div class="pagination">
  1267. {block:PreviousPage}
  1268. <a href="{previouspage}">previous page</a>
  1269. {/block:PreviousPage}
  1270. &nbsp;
  1271. {currentpage} - {totalpages}
  1272. &nbsp;
  1273. {block:nextpage}<a href="{nextpage}">next page</a>{/block:nextpage}
  1274. </div>
  1275.  
  1276.  
  1277. {/block:pagination}
  1278.  
  1279.  
  1280.  
  1281. </div>
  1282.  
  1283. <!-- from https://stackoverflow.com/questions/24643215/how-to-remove-the-source-from-this-tumblr-theme -->
  1284. {block:ContentSource}
  1285. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1286. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1287. {/block:SourceLogo}
  1288. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1289. {/block:ContentSource}
  1290.  
  1291.  
  1292. <!-- this is the credit do not touch it or i will end you -->
  1293.  
  1294. <a title="made by amaanat themes" href="https://www.amaanat.tumblr.com" class="credit"><span class="th th-diamond-o"></span>
  1295. </a>
  1296.  
  1297.  
  1298.  
  1299. <!-- end of content -->
  1300.  
  1301.  
  1302.  
  1303.  
  1304.  
  1305.  
  1306. <!-- SCRIPTS -->
  1307.  
  1308. <!-- SCROLL TO TOP STUFF -->
  1309.  
  1310. {block:ifscrolltotop}<div class="scrolltop"><a href="#">scroll to top</a></div>{/block:ifscrolltotop}
  1311.  
  1312.  
  1313. <!-- https://html-online.com/articles/dynamic-scroll-back-top-page-button-javascript/ -->
  1314. {block:ifscrolltotop}
  1315. <script>$(window).scroll(function() {
  1316. var height = $(window).scrollTop();
  1317. if (height > 50) {
  1318. $('.scrolltop').fadeIn();
  1319. } else {
  1320. $('.scrolltop').fadeOut();
  1321. }
  1322. });
  1323.  
  1324. $(document).ready(function() {
  1325. $(".scrolltop").click(function(event) {
  1326. event.preventDefault();
  1327. $("html, body").animate({ scrollTop: 0 }, 1200);
  1328. return false;
  1329. });
  1330.  
  1331. });</script>{/block:ifscrolltotop}
  1332.  
  1333.  
  1334. <!-- shythemes notes shortening -->
  1335.  
  1336. <script>
  1337. $(document).ready(function(){
  1338. var $container = $('.container');
  1339. $container.find('.notecount').each(function(){
  1340. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1341. if (n > 999) {
  1342. n = Math.floor(n / 100) / 10;
  1343. $(this).text(n + 'k notes');
  1344. }
  1345. });
  1346. });
  1347. </script>
  1348.  
  1349.  
  1350.  
  1351.  
  1352. <!-- INFINITE SCROLL STUFF -->
  1353.  
  1354. {block:indexpage}{block:ifinfinitescroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>{/block:ifinfinitescroll}{/block:indexpage}
  1355.  
  1356. <script>
  1357. $(document).ready(function(){
  1358. {block:indexpage}
  1359. {block:ifinfinitescroll}
  1360.  
  1361. /* thank u Jayce aka @codematurgy for the help with this ur the best */
  1362. function audioPosts () {
  1363. $('iframe.tumblr_audio_player').load( function() {
  1364. $('iframe.tumblr_audio_player').contents().find("head")
  1365. .append($("<style type='text/css'> .audio-player{background:{color:audio player color} !important} </style>"));
  1366. });
  1367. }
  1368.  
  1369. function shythemesnotecount () {
  1370.  
  1371. var $container = $('.container');
  1372. $container.find('.notecount').each(function(){
  1373. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1374. if (n > 999) {
  1375. n = Math.floor(n / 100) / 10;
  1376. $(this).text(n + 'k notes');
  1377. }
  1378. });
  1379. }
  1380.  
  1381. var $container = $('.container');
  1382. $container.infinitescroll({
  1383. itemSelector: '.posts',
  1384. navSelector: '.pagination',
  1385. nextSelector: '.pagination a',
  1386. loadingImg: '',
  1387. loadingText: '<em></em>',
  1388. bufferPx: 200,
  1389.  
  1390.  
  1391.  
  1392. },
  1393.  
  1394.  
  1395.  
  1396.  
  1397.  
  1398. /* http://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets with infinite scroll I DID IT OMG */
  1399. function( newElements ) {
  1400. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  1401. lightbox: true,
  1402. rounded: false,
  1403. borderRadius: '10px',
  1404. gutter: '4px',
  1405. photoset: '.photo-slideshow',
  1406. photoWrap: '.photo-data',
  1407. photo: '.pxu-photo'
  1408. });
  1409.  
  1410. resizeVideos();
  1411.  
  1412. audioPosts ();
  1413.  
  1414. shythemesnotecount ();
  1415. });
  1416.  
  1417.  
  1418.  
  1419.  
  1420. {/block:ifinfinitescroll}
  1421.  
  1422.  
  1423.  
  1424. {/block:indexpage}
  1425. });
  1426. </script>
  1427.  
  1428.  
  1429. <!-- shythemes photoset -->
  1430.  
  1431. <script>
  1432. $(document).ready(function(){
  1433. $('.photo-slideshow').pxuPhotoset({
  1434. lightbox: true,
  1435. rounded: false,
  1436. gutter: '4px',
  1437. borderRadius: '0px',
  1438. photoset: '.photo-slideshow',
  1439. photoWrap: '.photo-data',
  1440. photo: '.pxu-photo'
  1441. });
  1442. });
  1443. </script>
  1444.  
  1445. <script type="text/javascript">
  1446. <!--
  1447. function toggle_visibility(id) {
  1448. var e = document.getElementById(id);
  1449. if(e.style.display == 'block')
  1450. e.style.display = 'none';
  1451. else
  1452. e.style.display = 'block';
  1453. }
  1454. //-->
  1455. </script>
  1456.  
  1457. <!-- octomoosey tutorial on AOS -->
  1458. <link rel=“stylesheet” href=“https://static.tumblr.com/uopakca/prpov76n6/aos.css” />
  1459. <script src=“https://static.tumblr.com/uopakca/L8aov76mb/aos.js”></script>
  1460. <script>
  1461. AOS.init();
  1462. </script>
  1463.  
  1464.  
  1465.  
  1466. </body>
  1467. </html>
  1468.  
  1469. <!-- theme by @amaanat on tumblr.com -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!