API tools faq
paste
sacrinteeth

THEME #2 PYXIS By SACRINTEETH

sacrinteeth
Jul 4th, 2020
3,061
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><!--
  2.  
  3.  
  4.  
  5.  
  6. "PYXIS" THEME #2 | BY SACRIN-THEMES.TUMBLR.COM
  7.  
  8. TERMS
  9.  
  10. + Do not steal/redistribute/use as a base or claim this theme as your own
  11. + Do not remove the credit
  12. + Thanks for using my theme! :) Hope you enjoy it!
  13.  
  14. CREDITS
  15.  
  16. + Scroll to the Top (www.itjungles.com)
  17. + Font Awesome Icons (fontawesome.com)
  18. + Coding Resources
  19.  
  20. octomoosey.tumblr.com
  21. Themesbyeris.tumblr.com
  22. Htmlauren.tumblr.com
  23. lmthemeslp-tut.tumblr.com
  24. unseenmockingjay.tumblr.com
  25. todorokiscute.tumblr.com
  26. bychloethemes.tumblr.com
  27. Glenn Smith @ https://codepen.io/g13nn
  28.  
  29.  
  30.  
  31. --><html>
  32.  
  33.  
  34. <head>
  35.  
  36.  
  37. <title>{Title}</title>
  38. <meta charset="utf-8">
  39. <meta name="viewport" content="width=device-width, initial-scale=1">
  40.  
  41.  
  42. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  43. <link rel="stylesheet" href=
  44. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
  45. </link>
  46. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  47. <!-- jquery -->
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  49. <!-- jquery -->
  50.  
  51.  
  52.  
  53. <!--------------------------------------------------------------- favicon -->
  54.  
  55. <link rel="icon" href="{favicon}" type="image/gif" />
  56.  
  57. <!----------------------------------------------------------------- images-->
  58.  
  59. <meta name="image:Background" content=""/>
  60. <meta name="image:sidebar img" content="" />
  61.  
  62. <!----------------------------------------------------------------- colors-->
  63.  
  64. <meta name="color:background" content="#1a1f30" />
  65. <meta name="color:content background" content="#262e46" />
  66. <meta name="color:post info background" content="#1f2539" />
  67. <meta name="color:post title" content="#ffafcc" />
  68. <meta name="color:Text" content="#dbe3ff" />
  69. <meta name="color:Bold" content="#ffffff" />
  70. <meta name="color:Italics" content="#ebc3f0" />
  71. <meta name="color:Link" content="#ffafcc" />
  72. <meta name="color:Link hover" content="#b8c7fa" />
  73. <meta name="color:post info" content="#ffafcc" />
  74. <meta name="color:post info hover" content="#b8c7fa" />
  75. <meta name="color:blockquote" content="#1a1f30" />
  76. <meta name="color:post borders" content="#1a1f30" />
  77. <meta name="color:accent 1" content="#b8c7fa" />
  78. <meta name="color:accent 2" content="#ffafcc" />
  79. <meta name="color:accent 3" content="#ffffff" />
  80.  
  81.  
  82. <!------------------------------------------------------------------ text -->
  83. <meta name="text:post title size" content="20px" />
  84. <meta name="text:blog title size" content="30px" />
  85. <meta name="text:text size" content="13px" />
  86. <meta name="text:tag size" content="11px" />
  87. <meta name="text:description size" content="12px" />
  88.  
  89. <!-------------------------------------------------------- font selection -->
  90. <meta name="font:blog title" content="sofia pro" />
  91. <meta name="font:title" content="sofia pro" />
  92. <meta name="font:text" content="sofia pro" />
  93.  
  94.  
  95. <!---------------------------------------------------------------- Misc -->
  96.  
  97.  
  98. <meta name="text:bullet style" content="fa fa-star" />
  99.  
  100.  
  101. <!------------------------------------------------------ Header nav links -->
  102.  
  103.  
  104. <meta name="text:header link 1" content="Home" />
  105. <meta name="text:header link 1 url" content="/" />
  106.  
  107. <meta name="text:header link 2" content="Inbox" />
  108. <meta name="text:header link 2 url" content="/ask" />
  109.  
  110. <meta name="text:header link 3" content="Archive" />
  111. <meta name="text:header link 3 url" content="/archive" />
  112.  
  113. <meta name="text:header link 4" content="" />
  114. <meta name="text:header link 4 url" content="" />
  115.  
  116. <meta name="text:header link 5" content="" />
  117. <meta name="text:header link 5 url" content="" />
  118.  
  119.  
  120. <!----------------------------------------------------- sidebar nav links -->
  121.  
  122.  
  123. <meta name="text:sidebar link 1" content="" />
  124. <meta name="text:sidebar link 1 icon" content="fa fa-star" />
  125. <meta name="text:sidebar link 1 url" content="" />
  126.  
  127. <meta name="text:sidebar link 2" content="" />
  128. <meta name="text:sidebar link 2 icon" content="fa fa-star" />
  129. <meta name="text:sidebar link 2 url" content="" />
  130.  
  131. <meta name="text:sidebar link 3" content="" />
  132. <meta name="text:sidebar link 3 icon" content="fa fa-star" />
  133. <meta name="text:sidebar link 3 url" content="" />
  134.  
  135. <meta name="text:sidebar link 4" content="" />
  136. <meta name="text:sidebar link 4 icon" content="fa fa-star" />
  137. <meta name="text:sidebar link 4 url" content="" />
  138.  
  139. <meta name="text:sidebar link 5" content="" />
  140. <meta name="text:sidebar link 5 icon" content="fa fa-star" />
  141. <meta name="text:sidebar link 5 url" content="" />
  142.  
  143. <meta name="text:extra title" content="EXTRA BOX" />
  144. <meta name="text:extra text" content="Put some extra text here!" />
  145.  
  146. <meta name="if:sidebar pic" content="0" />
  147. <meta name="if:sidebar circle links" content="0" />
  148. <meta name="if:sidebar rectangle links" content="0" />
  149. <meta name="if:extra box" content="0" />
  150.  
  151. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  152.  
  153.  
  154. <!----------------------------------------------------- TAG SEARCH SCRIPT -->
  155.  
  156.  
  157. <script type="text/javascript" src="https://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>
  158.  
  159. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  160.  
  161. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  162.  
  163. <!----------------------------------------------------- END SEARCH SCRIPT -->
  164. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  165. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  166. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  167.  
  168. <script>
  169. $(document).ready(function(){
  170. $('.photo-slideshow').pxuPhotoset({
  171. lightbox: true,
  172. rounded: false,
  173. gutter: '0px',
  174. borderRadius: '0px',
  175. photoset: '.photo-slideshow',
  176. photoWrap: '.photo-data',
  177. photo: '.pxu-photo',
  178.  
  179. });
  180. });
  181. </script>
  182. <!----------------------------------------------------- HAMBURGER SCRIPT -->
  183.  
  184. <script type=“text/javascript” src=“https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js”></script>
  185.  
  186.  
  187. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  188.  
  189.  
  190. <script>
  191. $( document ).ready(function() {
  192.  
  193. $( ".cross" ).hide();
  194. $( ".menu" ).hide();
  195. $( ".hamburger" ).click(function() {
  196. $( ".menu" ).slideToggle( "slow", function() {
  197. $( ".hamburger" ).hide();
  198. $( ".cross" ).show();
  199. });
  200. });
  201.  
  202. $( ".cross" ).click(function() {
  203. $( ".menu" ).slideToggle( "slow", function() {
  204. $( ".cross" ).hide();
  205. $( ".hamburger" ).show();
  206. });
  207. });
  208.  
  209. });
  210.  
  211. </script>
  212.  
  213. <!------------------------------------------------------- STYLE TOOL TIPS -->
  214.  
  215. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  216. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  217. <script>
  218. (function($){
  219. $(document).ready(function(){
  220. $("a[title]").style_my_tooltips({
  221. tip_follows_cursor:true,
  222. tip_delay_time:7,
  223. tip_fade_speed:7,
  224. attribute:"title"
  225. });
  226. });
  227. })(jQuery);
  228. </script>
  229.  
  230.  
  231. <script type="text/javascript"
  232. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  233.  
  234.  
  235. <!-------------------------------------------------------- SCROLL TO TOP -->
  236.  
  237. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div style="float:right;bottom: 0px; margin-top:15px; margin-right:3px;"><a href="https://tumblings.net/post/44212620655/tumblreffects" target="_blank"></a></div>
  238. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  239.  
  240.  
  241. <div style="position:fixed;bottom:10px;right:10px;z-index:1;">
  242. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top" alt="Go to Top"> <i class="fa fa-chevron-up" style="color:{color:accent 1}";></i></a></div>
  243.  
  244.  
  245. </head>
  246.  
  247.  
  248.  
  249. <!----------------------------------------------------------- STYLE START -->
  250.  
  251.  
  252. <style>
  253.  
  254. {CustomCSS}/* this is to edit on the customize page */
  255.  
  256. /* CSS GOES HERE*/
  257.  
  258.  
  259. /*---------------------------------------------------------- MOBILE VIEW --*/
  260.  
  261. @media(max-width: 900px) {
  262.  
  263. .content {
  264.  
  265. width:40%;
  266. margin:7em auto;
  267. display:grid;
  268. grid-template-columns:1fr;
  269. grid-gap:5em;
  270. float:left;
  271. justify-content: center;
  272.  
  273. }
  274.  
  275. .sidebar-container {
  276.  
  277.  
  278. display:none;
  279.  
  280. }
  281.  
  282.  
  283. .posts {
  284.  
  285.  
  286. margin-top:auto;
  287. position:relative;
  288. width:auto;
  289. font-size: 15px;
  290. text-align:left;
  291. }
  292.  
  293.  
  294. .header a {
  295.  
  296. font-size:12px;
  297. }
  298.  
  299.  
  300.  
  301.  
  302. .star3 {
  303.  
  304. display:none;
  305.  
  306. }
  307.  
  308.  
  309. tumblr_controls, .tmblr-iframe {
  310.  
  311. display:none!important;
  312.  
  313. }
  314.  
  315.  
  316.  
  317. .header-link {
  318.  
  319. width:100%;
  320.  
  321.  
  322. }
  323.  
  324. .star {
  325.  
  326. display:none;
  327.  
  328. }
  329.  
  330. .cat {
  331.  
  332. z-index:999999;
  333.  
  334. }
  335.  
  336.  
  337. .blog-title {
  338. float:left;
  339. font-size:20px;
  340. margin-top:-5px;
  341. font-family:{font:blog title};
  342. text-transform:none;
  343.  
  344. }
  345. }
  346.  
  347. /*---------------------------------------------------------- DESKTOP VIEW--*/
  348.  
  349. @media(min-width: 900px) {
  350.  
  351. .cat {
  352.  
  353. position:fixed;
  354. z-index:1;!important
  355.  
  356. }
  357.  
  358. .content {
  359.  
  360. width:80%;
  361.  
  362. }
  363.  
  364. .star2 {
  365.  
  366. display:none;
  367. }
  368.  
  369.  
  370. .blog-title {
  371. float:left;
  372. font-size:{text:blog title size};
  373. margin-top:-12px;
  374. font-family:{font:blog title};
  375. text-transform:none;
  376.  
  377. }
  378. }
  379.  
  380. /*------------------------------------------------------------ SCROLLBAR --*/
  381.  
  382.  
  383. ::-webkit-scrollbar {
  384.  
  385. width: 15px;
  386. background: {color:background};
  387. }
  388.  
  389. ::-webkit-scrollbar-track {
  390.  
  391. background: none;
  392. }
  393.  
  394.  
  395. ::-webkit-scrollbar-thumb {
  396.  
  397. border-radius: 15px;
  398. background-image: linear-gradient(to bottom, {color:accent 1}, {color:accent 2});
  399.  
  400. }
  401.  
  402. ::-webkit-scrollbar-thumb:horizontal {
  403.  
  404. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  405.  
  406. }
  407.  
  408. /*----------------------------------------------------------------- MAIN --*/
  409.  
  410. body {
  411.  
  412. background-color:{color:Background};
  413. background-image:url({image:Background});
  414. color:{color:text};
  415. font-family: {font:text};
  416. font-size: {text:Text Size};
  417.  
  418. }
  419.  
  420.  
  421. blockquote {
  422.  
  423. border-left:2px dotted;
  424. border-color: {color:blockquote};
  425. padding-left:10px;
  426. margin-left:8px;
  427.  
  428.  
  429. }
  430.  
  431. b, strong {
  432. color:{color:bold};
  433. }
  434.  
  435. i {
  436. color:{color:italics};
  437. }
  438.  
  439. a {
  440. color:{color:link};
  441. text-decoration:none;
  442. }
  443.  
  444. a:hover {
  445. color:{color:link hover};
  446. }
  447.  
  448. li {
  449. margin-left: -15px;
  450. list-style-type: none;
  451. }
  452.  
  453. li:before {
  454.  
  455. content: "\f005";
  456. font-family: 'Font Awesome\ 5 Free';
  457. font-weight: 900;
  458. margin-left: -20px;
  459. margin-right: 8px;
  460. }
  461.  
  462. h1 {
  463. color:{color:post title};
  464. font-size:25px;
  465. margin-bottom:20px;
  466. text-transform:uppercase;
  467. font-family:{font:title};
  468. }
  469.  
  470.  
  471. .content {
  472.  
  473. max-width:800px;
  474. margin:7em auto;
  475. display:grid;
  476. grid-template-columns:1fr 2fr;
  477. grid-gap:10em;
  478.  
  479. }
  480.  
  481.  
  482. /*------------------------------------------------------------ HIDE/SHOW --*/
  483.  
  484. .star {
  485.  
  486. float:left;
  487.  
  488. }
  489.  
  490.  
  491. /*------------------------------------------------------- HAMBURGER MENU --*/
  492.  
  493. .hamburger {
  494.  
  495. background:none;
  496. position:absolute;
  497. line-height:45px;
  498. padding:5px 15px 0px 15px;
  499. color:#999;
  500. border:0;
  501. font-size:2.4em;
  502. font-weight:bold;
  503. cursor:pointer;
  504. outline:none;
  505. z-index:10000000000000;
  506. top:0;
  507. left:0;
  508.  
  509. }
  510.  
  511. .cross {
  512.  
  513. background:none;
  514. position:absolute;
  515. top:0;
  516. left:0;
  517. padding:7px 15px 0px 15px;
  518. color:#999;
  519. border:0;
  520. font-size:4em;
  521. line-height:65px;
  522. font-weight:bold;
  523. cursor:pointer;
  524. outline:none;
  525. z-index:10000000000000;
  526. color:{color:bold};
  527. }
  528.  
  529.  
  530.  
  531. .menu {
  532.  
  533. z-index:1000000;
  534. width:50%;
  535. background:#f1f1f1;
  536. position:absolute;
  537. text-align:center;
  538. font-size:15px;
  539. top:0;
  540. left:0;
  541. background:{color:content background};
  542. overflow:auto;
  543. height:1000vh;
  544. box-shadow: 0px 5px 30px -9px rgba(0,0,0,0.12);
  545. }
  546.  
  547.  
  548. .menu ul {margin: 0; padding: 0; list-style-type:none; list-style-image:none;}
  549.  
  550. .menu li {display: block; padding:15px 0 15px 0; border-bottom:{color:blockquote} 1px solid;}
  551.  
  552. .menu li:hover{display: block; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid; background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});}
  553.  
  554. .menu ul li a {text-decoration:none; margin: 0px; color:{text};}
  555.  
  556. .menu ul li a:hover { color:{color:content background}; text-decoration:none;}
  557.  
  558. .menu a{font-size:15px; text-decoration:none; color:{text};}
  559.  
  560. .menu a:hover{text-decoration:none; color:{color:accent 3};}
  561.  
  562.  
  563.  
  564.  
  565. /*---------------------------------------------------------- HEADER --*/
  566.  
  567.  
  568. .header {
  569.  
  570. width:100%;
  571. background:{color:header};
  572. left:0;
  573. position: fixed;
  574. top:0;
  575. display:grid;
  576. font-family:{font:text};
  577. height:auto;
  578. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  579. box-shadow: 0px 5px 30px -9px rgba(0,0,0,0.12);
  580.  
  581. }
  582.  
  583. .header-link {
  584.  
  585. text-align:center;
  586. padding:20px;
  587. text-transform:uppercase;
  588. font-size:15px;
  589. font-weight:bold;
  590. color:{color:accent 3};
  591. width:100%;
  592. text-align:right;
  593. color:#fff
  594. margin-top:0px;
  595. display: flex;
  596. justify-content: space-evenly;
  597. }
  598.  
  599.  
  600.  
  601. .header-link a {
  602.  
  603. color:{color:accent 3};
  604. margin-right:20px;
  605. transition:0.6s;
  606.  
  607. }
  608.  
  609. .header-link a:hover {
  610.  
  611. color:{color:background};
  612. transition:0.6s;
  613.  
  614. }
  615.  
  616.  
  617. /*---------------------------------------------------------- SIDEBAR --*/
  618.  
  619. .sidebar-box::-webkit-scrollbar-thumb {
  620.  
  621. background:transparent;
  622.  
  623.  
  624. }
  625.  
  626. .sidebar-box2::-webkit-scrollbar-thumb {
  627.  
  628. background:transparent;
  629.  
  630. }
  631.  
  632. .sidebar-container::-webkit-scrollbar-thumb {
  633.  
  634. background:{color:content background};
  635.  
  636. }
  637.  
  638. .sidebar-box::-webkit-scrollbar {
  639.  
  640. width: 2px;
  641. background: {color:background};
  642.  
  643. }
  644.  
  645.  
  646. .sidebar-box2::-webkit-scrollbar {
  647.  
  648. width: 2px;
  649. background: {color:background};
  650.  
  651. }
  652.  
  653.  
  654.  
  655. .sidebar-container::-webkit-scrollbar {
  656.  
  657. width: 2px;
  658. background: {color:background};
  659.  
  660. }
  661.  
  662.  
  663.  
  664.  
  665. .sidebar-box {
  666.  
  667. width:170px;
  668. text-align:left;
  669. background-color:transparent;
  670. padding: 20px;
  671. left:100px;
  672. height:auto;
  673. max-height:100px;
  674. margin-bottom:20px;
  675. background-color: {color:content background};
  676. font-size: {text:description size};
  677. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.07);
  678. border-bottom-left-radius: 7px;
  679. border-bottom-right-radius: 7px;
  680. overflow:auto;
  681.  
  682. }
  683.  
  684. .sidebar {
  685.  
  686. display:flex;
  687. flex-direction: column;
  688.  
  689.  
  690. }
  691.  
  692.  
  693. .sidebar-box2 {
  694.  
  695. width:170px;
  696. text-align:left;
  697. background-color:transparent;
  698. padding: 20px;
  699. left:100px;
  700. height:auto;
  701. max-height:100px;
  702. background-color: {color:content background};
  703. font-size: {text:description size};
  704. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.07);
  705. border-radius:7px;
  706. margin-top:0.5rem;
  707. overflow:auto;
  708. }
  709.  
  710.  
  711.  
  712. .sideimg img {
  713.  
  714. width:210px;
  715. margin-bottom:-10px;
  716. border-top-left-radius: 7px;
  717. border-top-right-radius: 7px;
  718. background:{color:content background};
  719. }
  720.  
  721.  
  722.  
  723. .sideimg2 img {
  724.  
  725. width:150px;
  726. margin-top:20px;
  727. margin-bottom:-10px;
  728. border-radius:100px;
  729. background:{color:content background};
  730. }
  731.  
  732.  
  733.  
  734.  
  735. /*-------------------------------------------------------- SIDEBAR LINKS --*/
  736.  
  737. .updates-title {
  738.  
  739. margin-left:-1.3rem;
  740. padding: 6px;
  741. font-size:{text:post title size};
  742. float:left;
  743. margin-top:-1.3rem;
  744. margin-bottom: 20px;
  745. background: {color:accent 2};
  746. color:{color:accent 3};
  747. transition-duration: 0.6s;
  748. -moz-transition-duration: 0.6s;
  749. -webkit-transition-duration: 0.6s;
  750. -o-transition-duration: 0.6s;
  751. border-top-left-radius: 7px;
  752. border-top-right-radius: 7px;
  753. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  754. width:198px;
  755.  
  756. }
  757.  
  758.  
  759.  
  760. .sidebar-link a {
  761.  
  762. width:165px;
  763. padding: 7px;
  764. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.07);
  765. font-size: 14px;
  766. float:left;
  767. margin-bottom: 10px;
  768. background-color: {color:content background};
  769. border-top-left-radius: 0px;
  770. border-bottom-left-radius: 0px;
  771. border-top-right-radius: 7px;
  772. border-bottom-right-radius: 7px;
  773. color:{color:text};
  774. transition:.6s!important;
  775.  
  776. }
  777.  
  778. .sidebar-link a:hover {
  779.  
  780. transition: 0.6s!important;
  781. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  782. color:{color:accent 3};
  783.  
  784. }
  785.  
  786.  
  787. .link-icon {
  788.  
  789. background:{color:link hover};
  790. color:{color:accent 3};
  791. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.07);
  792. padding: 7px;
  793. font-size: 13.5px;
  794. font-weight: bold;
  795. float:left;
  796. border-top-left-radius: 7px;
  797. border-bottom-left-radius: 7px;
  798. border-top-right-radius: 0px;
  799. border-bottom-right-radius: 0px;
  800.  
  801. }
  802.  
  803. .link-icon2 a {
  804.  
  805. color:{color:accent 3};
  806. background:{color:accent 1};
  807. padding: 10px;
  808. padding-left:12px;
  809. padding-right:12px;
  810. font-size: 11px;
  811. font-weight: bold;
  812. float:left;
  813. border-radius:100px;
  814. margin-top:10px;
  815. margin-right:8px;
  816. transition:0.6s;
  817.  
  818. }
  819.  
  820.  
  821.  
  822. .link-icon2 a:hover {
  823.  
  824. background:{color:accent 2};
  825. transition:0.6s;
  826. }
  827.  
  828.  
  829. .button-container {
  830.  
  831. margin-top:-15px;
  832. margin-bottom:15px;
  833. display:flex;
  834. justify-content: center;
  835. }
  836.  
  837. .sidebar-container {
  838.  
  839. text-align:left;
  840. overflow:auto;
  841. height: 80vh;
  842.  
  843. }
  844.  
  845. /*---------------------------------------------------------- POSTS --*/
  846.  
  847. .title {
  848.  
  849. font-size:{text:post title size};
  850. color: {color:nav links};
  851. font-family:{font:title};
  852. position: absolute;
  853.  
  854. }
  855.  
  856. .post {
  857.  
  858. width: 500px;
  859. height: auto;
  860. padding:30px;
  861. box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.05);
  862. margin-bottom: 45px;
  863. margin-left:300px;
  864. display:grid;
  865. border-top-left-radius: 0px;
  866. border-top-right-radius: 0px;
  867. border-bottom-left-radius: 7px;
  868. border-bottom-right-radius: 7px;
  869. background-color:{color:content background};
  870. text-align:left;
  871.  
  872. }
  873.  
  874. .posts {
  875.  
  876. margin-left:-40px;
  877.  
  878. }
  879.  
  880.  
  881. .posts img {
  882.  
  883. border-radius:7px;
  884.  
  885. }
  886.  
  887.  
  888.  
  889. .post-img img {
  890.  
  891. max-width: 400px;
  892. height: auto;
  893. border-radius: 7px;
  894. text-align: center;
  895. margin-bottom: 10px;
  896. display: block;
  897.  
  898.  
  899. }
  900.  
  901. .post-img {
  902.  
  903.  
  904. display: block;
  905. margin-left: auto;
  906. margin-right: auto;
  907.  
  908. }
  909.  
  910. .portrait img {
  911. border-radius:100px;
  912. width:25px;
  913. height:25px;
  914. margin-top:20px;
  915.  
  916. }
  917.  
  918.  
  919. /*----------------------------------------------------- POST INFORMATION --*/
  920. .info-bottom {
  921.  
  922. text-transform:uppercase;
  923. background: {color:post info background};
  924. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.05);
  925. padding-left:20px;
  926. padding-right:20px;
  927. padding-top: 30px;
  928. padding-bottom:20px;
  929. margin-bottom: 90px;
  930. margin-left:300px;
  931. margin-top:-50px;
  932. width:520px;
  933. height:30px;
  934. border-bottom-right-radius: 7px;
  935. border-bottom-left-radius: 7px;
  936. }
  937.  
  938.  
  939.  
  940. .info-top {
  941.  
  942. text-transform:uppercase;
  943. box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.05);
  944. background: {color:content background};
  945. padding-left:20px;
  946. padding-right:20px;
  947. padding-top: 20px;
  948. padding-bottom:20px;
  949. margin-left:300px;
  950. width:520px;
  951. height:20px;
  952. border-top-right-radius: 7px;
  953. border-top-left-radius: 7px;
  954. border-bottom:3px dotted {color:post borders};
  955.  
  956. }
  957.  
  958.  
  959.  
  960. /*------------------------------------------------------ ASK & QUESTIONS --*/
  961. .askerbg {
  962.  
  963. padding: 0px;
  964. border-radius: 100px;
  965.  
  966. }
  967.  
  968. .askerbg img {
  969.  
  970. border-radius:100px;
  971.  
  972. }
  973.  
  974.  
  975.  
  976. .question {
  977.  
  978. width: auto;
  979. margin-top: 10px;
  980. margin-bottom:20px;
  981. color:{color:accent 3};
  982. padding: 10px;
  983. border-radius: 7px;
  984. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  985.  
  986. }
  987.  
  988.  
  989.  
  990. /*---------------------------------------------------------- AUDIO POSTS --*/
  991.  
  992.  
  993.  
  994. .playbutton {
  995.  
  996. position:relative;
  997. margin-top:45px;
  998. margin-left:44px;
  999. z-index:9;
  1000. width:30px;
  1001. height:30px;
  1002. overflow:hidden;
  1003. border-radius: 100px;
  1004. text-align: center;
  1005. background:#eee
  1006.  
  1007. }
  1008.  
  1009. .albumart img {
  1010.  
  1011. position:relative;
  1012. margin-top:-75px;
  1013. margin-left:0px
  1014. height:120px;
  1015. width:120px;
  1016.  
  1017. -webkit-border-top-left-radius: 20px;
  1018. -webkit-border-bottom-left-radius: 20px;
  1019. -moz-border-radius-topleft: 20px;
  1020. -moz-border-radius-bottomleft: 20px;
  1021.  
  1022. border-top-right-radius: 0px;
  1023. border-bottom-right-radius: 0px;
  1024.  
  1025. }
  1026.  
  1027. .trackinfo {
  1028.  
  1029. padding: 10px;
  1030. margin-bottom:10px;
  1031. color:{color:accent 3};
  1032. top:-4px;
  1033. position:relative;
  1034. margin-left:120px;
  1035. height:100px;
  1036. margin-top:-120px;
  1037.  
  1038. -webkit-border-top-right-radius: 20px;
  1039. -webkit-border-bottom-right-radius: 20px;
  1040. -moz-border-radius-topright: 20px;
  1041. -moz-border-radius-bottomright: 20px;
  1042.  
  1043. border-top-right-radius: 20px;
  1044. border-bottom-right-radius: 20px;
  1045. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  1046.  
  1047. }
  1048.  
  1049. .trackname {
  1050.  
  1051. position:relative;
  1052. padding-top:13px;
  1053. text-align:center;
  1054. font-size:14px;
  1055. text-transform:uppercase;
  1056. font-weight: bold;
  1057. letter-spacing:2px;
  1058.  
  1059. }
  1060.  
  1061. .artist {
  1062.  
  1063. text-align:center;
  1064. font-size:11px;
  1065. text-transform:uppercase;
  1066. letter-spacing:2px;
  1067. }
  1068.  
  1069. .album {
  1070.  
  1071. text-align:center;
  1072. font-style: italic;
  1073. letter-spacing:2px;
  1074. font-size:11px;
  1075.  
  1076. }
  1077.  
  1078. .playcount {
  1079.  
  1080. font-weight: bold;
  1081. margin-top:5px;
  1082. text-align:center;
  1083. letter-spacing:2px;
  1084. font-size:11px;
  1085. }
  1086.  
  1087.  
  1088. /*----------------------------------------------------------- SEARCH BAR --*/
  1089.  
  1090. .search {
  1091.  
  1092. margin-top:-10px;
  1093.  
  1094.  
  1095.  
  1096. }
  1097.  
  1098.  
  1099. .sfm input {
  1100.  
  1101. background-color: #f5f5f5;
  1102. font-size: 11px;
  1103. border: 0px;
  1104. text-transform: uppercase;
  1105. margin-top: 0px;
  1106. color: #999;
  1107. letter-spacing: 1px;
  1108. padding: 4px 8px;
  1109. font-family: {font:text};
  1110. border-radius: 20px;
  1111. padding-top: 10px;
  1112. padding-bottom: 10px;
  1113. padding-left: 30px ;
  1114. padding-right: 30px ;
  1115. border-radius: 70px;
  1116. color:{color:accent 2};
  1117. transition: 0.4s;
  1118. background:{color:accent 3};
  1119.  
  1120. }
  1121.  
  1122.  
  1123.  
  1124. /*---------------------------------------------------------- CHAT --*/
  1125.  
  1126.  
  1127.  
  1128. .answer span,.convo i {
  1129.  
  1130. margin:0 0 5px;
  1131. border-radius:1em;
  1132. padding:.5em 10px;
  1133. max-width:75%;
  1134. clear:both;
  1135. position:relative
  1136.  
  1137. }
  1138.  
  1139. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11 {
  1140.  
  1141. color:{color:accent 3};
  1142. border-radius: 7px;
  1143. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  1144. float:left;
  1145. height:auto;
  1146. left:3px;
  1147. }
  1148.  
  1149.  
  1150. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after {
  1151.  
  1152.  
  1153. content:' ';
  1154. position:absolute;
  1155. border:8px solid {color:accent 1};
  1156. top:1em;
  1157. right:99%;
  1158. margin-top:-7px;
  1159. clip-path: polygon(100% 11%, 35% 45%, 100% 85%);
  1160.  
  1161.  
  1162. }
  1163.  
  1164.  
  1165. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12 {
  1166. color:{color:accent 3};
  1167. border-radius: 7px;
  1168. background-image: linear-gradient(to right, {color:accent 1}, {color:accent 2});
  1169. float:right;
  1170. right:3px;
  1171. height:auto;
  1172. }
  1173.  
  1174.  
  1175. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after {
  1176. content:' ';
  1177. position:absolute;
  1178. border:8px solid {color:accent 2};
  1179. top:1em;
  1180. left:99%;
  1181. clip-path: polygon(0 8%, 0 86%, 55% 48%);
  1182. margin-top:-7px;
  1183. }
  1184.  
  1185.  
  1186. /*--------------------------------------------------------------- QUOTES --*/
  1187.  
  1188. .quote {
  1189.  
  1190. padding-left:70px;
  1191. font-weight:500;
  1192. font-size:18px;
  1193. width:auto;
  1194.  
  1195. }
  1196.  
  1197. .quote-icon {
  1198.  
  1199. position: absolute;
  1200. font-size:30px;
  1201. margin-left:-50px;
  1202. }
  1203.  
  1204. .quote-icon i {
  1205. color:{color:link};
  1206. }
  1207.  
  1208. /*--------------------------------------------------- LIKE/REBLOG BUTTON --*/
  1209.  
  1210. .like {
  1211.  
  1212. position: relative;
  1213. float:right;
  1214. }
  1215.  
  1216. /* Change color */
  1217. .like svg path,
  1218. .reblog svg path {
  1219.  
  1220. fill:{color:post info};
  1221. transition: 0.4s;
  1222. }
  1223.  
  1224. /* Position like button above your custom one */
  1225. .like .like_button {
  1226.  
  1227. position: relative;
  1228. top: 0;
  1229. margin-top: -18px;
  1230. margin-left:-0.4px;
  1231. opacity: 0;
  1232.  
  1233.  
  1234. }
  1235.  
  1236. /* Keep like functionality active */
  1237. .like .like_button.liked {
  1238.  
  1239. opacity: 1;
  1240. fill:{color:post info hover};
  1241. }
  1242.  
  1243.  
  1244. .like:hover svg path {
  1245.  
  1246. fill: {color:post info hover};
  1247. transition: 0.4s;
  1248. }
  1249.  
  1250. .reblog {
  1251. float:right;
  1252. margin-left:20px;
  1253. margin-top:-2px;
  1254.  
  1255. }
  1256.  
  1257. .reblog a {
  1258. color:{color:post info};
  1259. }
  1260.  
  1261. .reblog a:hover {
  1262.  
  1263. color:{color:post info hover};
  1264. transition: 0.4s;
  1265.  
  1266.  
  1267. }
  1268.  
  1269. .bottom-info {
  1270. float:left;
  1271. color:{color:post info hover};
  1272. }
  1273.  
  1274. .bottom-info a {
  1275. color:{color:post info};
  1276. }
  1277.  
  1278. .bottom-info a:hover {
  1279. color:{color:post info hover};
  1280. }
  1281.  
  1282. .bottom-share {
  1283. margin-top:-10px;
  1284. }
  1285.  
  1286.  
  1287.  
  1288. /*------------------------------------------ TOOL TIPS & TUMBLR CONTROLS --*/
  1289.  
  1290. #s-m-t-tooltip {
  1291.  
  1292. margin-left:15px;
  1293. margin-top:-21px;
  1294. letter-spacing:0px;
  1295. font-family:{font:text};
  1296. text-transform:auto;
  1297. font-size:12px;
  1298. color: {color:text};
  1299. padding: 3px;
  1300. z-index:99999999999999999999999;
  1301.  
  1302. -webkit-transition:all 0.6s;
  1303. -moz-transition:all 0.6s;
  1304. -ms-transition:all 0.6s;
  1305. -o-transition:all 0.6s;
  1306.  
  1307. transition:all 0.6s;
  1308. background: {color:background};
  1309. padding: 5px;
  1310. border-radius: 7px;
  1311.  
  1312. }
  1313.  
  1314. iframe, img, embed, object, video {
  1315.  
  1316. max-width: 100%;
  1317. }
  1318.  
  1319. img {
  1320.  
  1321. height: auto;
  1322. width: auto;
  1323. }
  1324.  
  1325.  
  1326. iframe#tumblr_controls, .iframe-controls--desktop {
  1327.  
  1328.  
  1329. top:50px!important; /* or whatever you want */
  1330. right:-40px!important; /* or whatever you want */
  1331. transform:scale(0.8,0.8); /* or whatever you want */
  1332. -webkit-filter:invert(100%); filter:invert(100%);
  1333. opacity:0!important;
  1334. -webkit-backface-visibility:hidden;
  1335. padding:10px 40px 10px 10px;
  1336. -webkit-transition:opacity .3s ease-out;
  1337. transition:opacity .3s ease-out;
  1338.  
  1339. }
  1340.  
  1341.  
  1342. #tumblr_controls:hover, .tmblr-iframe:hover {
  1343.  
  1344. opacity:.5!important;
  1345. }
  1346.  
  1347.  
  1348.  
  1349. /*-------------------------------------------- PAGINATION & NOTES & TAGS --*/
  1350.  
  1351.  
  1352. .pagination-container {
  1353.  
  1354. width:520px;
  1355. background:transparent;
  1356. margin-left:20rem;
  1357.  
  1358. }
  1359.  
  1360. .pagination {
  1361.  
  1362. display:flex;
  1363. justify-content:center;
  1364. align-items:center;
  1365. color: {color:bold};
  1366. }
  1367.  
  1368. .pagination a {
  1369.  
  1370. margin:0 .2rem;
  1371. color:var(--clr-accent);
  1372. padding:.2rem .5rem;
  1373. background:{color:content background};
  1374. padding: 10px;
  1375. padding-left: 20px;
  1376. padding-right: 20px;
  1377. border-radius:7px;
  1378. margin:0.2rem;
  1379.  
  1380. }
  1381.  
  1382.  
  1383. .pagination a:hover {
  1384.  
  1385. background: {color:link hover};
  1386. color:{color:accent 3};
  1387. }
  1388.  
  1389. .current a {
  1390. background: {color:link hover};
  1391. color:{color:accent 3};
  1392. }
  1393.  
  1394.  
  1395. .tags-container {
  1396.  
  1397. display:flex;
  1398. justify-content:left;
  1399. align-items:left;
  1400. flex-direction:row;
  1401. padding:5px;
  1402. width:550px;
  1403. margin-left:300px;
  1404. height:auto;
  1405.  
  1406. }
  1407.  
  1408.  
  1409.  
  1410. .tags a {
  1411.  
  1412. background:{color:content background};
  1413. color:{color:text};
  1414. padding:7px;
  1415. padding-left: 10px;
  1416. padding-right:10px;
  1417. border-radius:7px;
  1418. margin-right:5px;
  1419. -webkit-transition: all 0.5s ease-in-out;
  1420. transition: all 0.5s ease-in-out;
  1421. -moz-transition: all 0.5s ease-in-out;
  1422. -o-transition: all 0.5s ease-in-out;
  1423. box-shadow: 0px 5px 30px -9px rgba(0,0,0,0.12);
  1424. }
  1425.  
  1426.  
  1427. .tags a:hover {
  1428.  
  1429. background:{color:link};
  1430. color:{color:background};
  1431. padding:8px;
  1432. border-radius:7px;
  1433. padding-left: 12px;
  1434. padding-right:12px;
  1435. -webkit-transition: all 0.5s ease-in-out;
  1436. transition: all 0.5s ease-in-out;
  1437. -moz-transition: all 0.5s ease-in-out;
  1438. -o-transition: all 0.5s ease-in-out;
  1439.  
  1440. }
  1441.  
  1442.  
  1443. .tags {
  1444.  
  1445. height:0px;
  1446. line-height:330%;
  1447. text-align:left;
  1448. font-size:{text:tag size};
  1449. opacity:0;
  1450. -webkit-transition: all 0.7s ease-in-out;
  1451. transition: all 0.7s ease-in-out;
  1452. -moz-transition: all 0.7s ease-in-out;
  1453. -o-transition: all 0.7s ease-in-out;
  1454. margin-top:-80px;
  1455.  
  1456. }
  1457.  
  1458.  
  1459. .posts:hover .tags {
  1460. height:auto;
  1461. opacity:1;
  1462. -webkit-transition: all 0.7s ease-in-out;
  1463. transition: all 0.7s ease-in-out;
  1464. -moz-transition: all 0.7s ease-in-out;
  1465. -o-transition: all 0.7s ease-in-out;
  1466. margin-bottom:30px;
  1467. float:left;
  1468.  
  1469. }
  1470.  
  1471.  
  1472. .notes-container {
  1473.  
  1474. margin: 0;
  1475. padding: 0;
  1476. position:relative;
  1477. width:540px;
  1478. margin-left:300px;
  1479. border-radius:7px;
  1480. background:{color:content background};
  1481. height:400px;
  1482. overflow:auto;
  1483. padding:15px;
  1484. margin-top:auto;
  1485.  
  1486. }
  1487.  
  1488.  
  1489. .notes li:before {
  1490.  
  1491. margin-left: -10px;
  1492. float:left;
  1493. }
  1494.  
  1495.  
  1496. .notes li {
  1497.  
  1498.  
  1499. padding:10px;
  1500. margin-left:-20px;
  1501. width: 100%;
  1502. float: left;
  1503. text-align:left;
  1504.  
  1505.  
  1506. }
  1507.  
  1508. .notes img {
  1509.  
  1510. margin-right: 15px;
  1511. margin-left: 15px;
  1512. float: left;
  1513. width: 20px;
  1514. height: 20px;
  1515. border-radius: 100px;
  1516. }
  1517.  
  1518.  
  1519.  
  1520. /*---------------------------------------------------------- CREDIT --*/
  1521.  
  1522.  
  1523. .credit {
  1524.  
  1525. position:fixed;
  1526. bottom:18px;
  1527. right:25px;
  1528. font-size: 20px;
  1529.  
  1530. }
  1531.  
  1532. .credit a {
  1533. color:{color:accent 1};
  1534. }
  1535.  
  1536. /*-------------------------------------------------------- SCROLL TO TOP --*/
  1537.  
  1538. #scrollToTop:link,
  1539. #scrollToTop:visited {
  1540.  
  1541. display: none;
  1542. position: fixed;
  1543. bottom:48px;
  1544. right:17px;
  1545. font-size: 20px;
  1546. padding: 13px;
  1547.  
  1548. }
  1549.  
  1550.  
  1551.  
  1552. </style>
  1553.  
  1554.  
  1555.  
  1556. <!------------------------------------------------------------- END STYLE -->
  1557.  
  1558.  
  1559. <body>
  1560.  
  1561.  
  1562. <center>
  1563.  
  1564.  
  1565.  
  1566.  
  1567.  
  1568.  
  1569. <div class="content"><!-- content -->
  1570.  
  1571.  
  1572.  
  1573.  
  1574. <!---------------------------------------------------------------- HEADER -->
  1575.  
  1576. <div class="cat">
  1577. <div class="header">
  1578.  
  1579.  
  1580.  
  1581.  
  1582.  
  1583.  
  1584.  
  1585.  
  1586.  
  1587.  
  1588. <div class="star2">
  1589.  
  1590. <button class="hamburger" style=" color:{color:accent 3}; ">&#9776;</button>
  1591. <button class="cross">&#735;</button>
  1592.  
  1593. <div class="menu">
  1594. <br>
  1595. {block:ifsidebarpic}
  1596. <div class="sideimg2"><img src="{image:sidebar img}"></div> {/block:ifsidebarpic}
  1597. <div class="mobile-desc" style="padding:60px; padding-bottom:30px; padding-top:30px; width:auto;">
  1598. {description}</div>
  1599.  
  1600. <div class="search">
  1601.  
  1602. <form onsubmit="return tagSearch(this)" class="sfm">
  1603.  
  1604. <input type="text" name="tag" placeholder="Search..."value="{SearchQuery}" id="sf" onfocus="if (this.value == '{SearchQuery}') {this.value=''}" onblur="if (this.value == '') {this.value='{SearchQuery}'}" />
  1605. <input type="submit" value= "◆" id="sb" />
  1606. </form>
  1607.  
  1608. </div>
  1609.  
  1610. <br>
  1611.  
  1612. <ul>
  1613.  
  1614. {block:ifsidebarlink1}
  1615. <a href="{text:sidebar link 1 url}"><li>{text:sidebar link 1}</li></a>
  1616. {block:ifsidebarlink1}
  1617.  
  1618. {block:ifsidebarlink2}
  1619. <a href="{text:sidebar link 2 url}"><li>{text:sidebar link 2}</li></a>
  1620. {block:ifsidebarlink2}
  1621.  
  1622. {block:ifsidebarlink3}
  1623. <a href="{text:sidebar link 3 url}"><li>{text:sidebar link 3}</li></a>
  1624. {block:ifsidebarlink3}
  1625.  
  1626. {block:ifsidebarlink4}
  1627. <a href="{text:sidebar link 4 url}"><li>{text:sidebar link 4}</li></a>
  1628. {block:ifsidebarlink4}
  1629.  
  1630. {block:ifsidebarlink5}
  1631. <a href="{text:sidebar link 5 url}"><li>{text:sidebar link 5}</li></a>
  1632. {block:ifsidebarlink5}
  1633.  
  1634. </ul>
  1635.  
  1636. <br><br>
  1637.  
  1638.  
  1639.  
  1640. </div>
  1641. </div>
  1642.  
  1643.  
  1644.  
  1645.  
  1646.  
  1647.  
  1648.  
  1649. <div class="header-link">
  1650. <div class="blog-title">
  1651.  
  1652.  
  1653.  
  1654.  
  1655.  
  1656.  
  1657.  
  1658.  
  1659. <div class="star">
  1660.  
  1661. <i class="{text:bullet style}" aria-hidden="true" style="color:{color:accent 3};"></i>
  1662.  
  1663. </div>
  1664.  
  1665.  
  1666. &nbsp;&nbsp;&nbsp;{title}&nbsp;&nbsp;&nbsp;
  1667.  
  1668.  
  1669. </div>
  1670.  
  1671.  
  1672.  
  1673. <center>
  1674.  
  1675.  
  1676. <a href="{text:header link 1 url}">{text:header link 1}</a>
  1677. <a href="{text:header link 2 url}">{text:header link 2}</a>
  1678. <a href="{text:header link 3 url}">{text:header link 3}</a>
  1679. <a href="{text:header link 4 url}">{text:header link 4}</a>
  1680. <a href="{text:header link 5 url}">{text:header link 5}</a>
  1681.  
  1682.  
  1683. </center>
  1684.  
  1685.  
  1686. <div class="star3">
  1687. <div class="search">
  1688.  
  1689. <form onsubmit="return tagSearch(this)" class="sfm">
  1690.  
  1691. <input type="text" name="tag" placeholder="Search..."value="{SearchQuery}" id="sf" onfocus="if (this.value == '{SearchQuery}') {this.value=''}" onblur="if (this.value == '') {this.value='{SearchQuery}'}" />
  1692. <input type="submit" value= "◆" id="sb" />
  1693. </form>
  1694.  
  1695. </div>
  1696. </div>
  1697.  
  1698.  
  1699.  
  1700.  
  1701.  
  1702.  
  1703.  
  1704.  
  1705.  
  1706.  
  1707.  
  1708. </div>
  1709. </div>
  1710.  
  1711.  
  1712.  
  1713.  
  1714. <!--------------------------------------------------------------- SIDEBAR -->
  1715.  
  1716.  
  1717. <div class="sidebar-container"><!-- sidebar wrapper -->
  1718. <div class="sticky"><!-- sticky sidebar -->
  1719. {block:ifsidebarpic}
  1720. <div class="sideimg">
  1721. <img src="{image:sidebar img}">
  1722. </div> {/block:ifsidebarpic}
  1723.  
  1724. <div class="sidebar-box"> {description}</div><!-- sidebar-->
  1725.  
  1726.  
  1727. {block:ifsidebarcirclelinks}
  1728. <div class="sidebar">
  1729. <div class="button-container">
  1730.  
  1731. {block:ifsidebarlink1}
  1732. <div class="link-icon2"><a href="{text:sidebar link 1 url}" title="{text:sidebar link 1}"><i class="{text:sidebar link 1 icon}" aria-hidden="true"style="color:{color:accent 3};"></i></a></div> {/block:ifsidebarlink1}
  1733.  
  1734. {block:ifsidebarlink2}
  1735. <div class="link-icon2"><a href="{text:sidebar link 2 url}" title="{text:sidebar link 2}"><i class="{text:sidebar link 2 icon}" aria-hidden="true"style="color:{color:accent 3};"></i></a></div>
  1736. {/block:ifsidebarlink2}
  1737.  
  1738. {block:ifsidebarlink3}
  1739. <div class="link-icon2"><a href="{text:sidebar link 3 url}" title="{text:sidebar link 3}"><i class="{text:sidebar link 3 icon}" aria-hidden="true"style="color:{color:accent 3};"></i></a></div>
  1740. {/block:ifsidebarlink3}
  1741.  
  1742. {block:ifsidebarlink4}
  1743. <div class="link-icon2"><a href="{text:sidebar link 4 url}" title="{text:sidebar link 4}"><i class="{text:sidebar link 4 icon}" aria-hidden="true"style="color:{color:accent 3};"></i></a></div>
  1744. {/block:ifsidebarlink4}
  1745.  
  1746.  
  1747. {block:ifsidebarlink5}
  1748. <div class="link-icon2"><a href="{text:sidebar link 5 url}" title="{text:sidebar link 5}"><i class="{text:sidebar link 5 icon}" aria-hidden="true"style="color:{color:accent 3};"></i></a></div> {/block:ifsidebarlink5}
  1749.  
  1750. </div>
  1751. </div>
  1752.  
  1753. {/block:ifsidebarcirclelinks}
  1754.  
  1755.  
  1756.  
  1757.  
  1758.  
  1759. {block:ifsidebarrectanglelinks}
  1760.  
  1761. <div class="sidebar">
  1762.  
  1763.  
  1764.  
  1765. {block:ifsidebarlink1}
  1766.  
  1767. <div class="sidebar-link">
  1768. <div class="link-icon"><i class="{text:sidebar link 1 icon}" aria-hidden="true"style="color:{color:accent 3};"></i> </div>
  1769. <a href="{text:sidebar link 1 url}" target="_blank" > &nbsp;&nbsp;&nbsp; {text:sidebar link 1}</a>
  1770.  
  1771. </div>
  1772. {/block:ifsidebarlink1}
  1773.  
  1774.  
  1775.  
  1776.  
  1777.  
  1778. {block:ifsidebarlink2}
  1779. <div class="sidebar-link-container">
  1780. <div class="sidebar-link">
  1781. <div class="link-icon"><i class="{text:sidebar link 2 icon}" aria-hidden="true"style="color:{color:accent 3};"></i> </div>
  1782. <a href="{text:sidebar link 2 url}" target="_blank" > &nbsp;&nbsp;&nbsp; {text:sidebar link 2}</a>
  1783.  
  1784. </div></div>
  1785. {/block:ifsidebarlink2}
  1786.  
  1787.  
  1788.  
  1789.  
  1790.  
  1791. {block:ifsidebarlink3}
  1792. <div class="sidebar-link-container">
  1793. <div class="sidebar-link">
  1794. <div class="link-icon"><i class="{text:sidebar link 3 icon}" aria-hidden="true"style="color:{color:accent 3};"></i> </div>
  1795. <a href="{text:sidebar link 3 url}" target="_blank" > &nbsp;&nbsp;&nbsp; {text:sidebar link 3}</a>
  1796.  
  1797. </div></div>
  1798. {/block:ifsidebarlink3}
  1799.  
  1800.  
  1801.  
  1802.  
  1803. {block:ifsidebarlink4}
  1804. <div class="sidebar-link-container">
  1805. <div class="sidebar-link">
  1806. <div class="link-icon"><i class="{text:sidebar link 4 icon}" aria-hidden="true"style="color:{color:accent 3};"></i> </div>
  1807. <a href="{text:sidebar link 4 url}" target="_blank" > &nbsp;&nbsp;&nbsp; {text:sidebar link 4}</a>
  1808.  
  1809. </div></div>
  1810. {/block:ifsidebarlink4}
  1811.  
  1812.  
  1813.  
  1814. {block:ifsidebarlink5}
  1815. <div class="sidebar-link-container">
  1816. <div class="sidebar-link">
  1817. <div class="link-icon"><i class="{text:sidebar link 5 icon}" aria-hidden="true"style="color:{color:accent 3};"></i> </div>
  1818. <a href="{text:sidebar link 5 url}" target="_blank" > &nbsp;&nbsp;&nbsp; {text:sidebar link 5}</a>
  1819.  
  1820. </div></div>
  1821. {/block:ifsidebarlink5}
  1822.  
  1823.  
  1824.  
  1825.  
  1826. </div><!-- sidebar-->
  1827.  
  1828. {/block:ifsidebarrectanglelinks}
  1829.  
  1830.  
  1831. {block:ifextrabox}
  1832. <div class="sidebar">
  1833. <div class="sidebar-box2">
  1834. <div class="updates-title"> &nbsp;&nbsp;{text:extra title} </div>
  1835. {text:extra text}
  1836. </div>
  1837. </div><!-- sidebar-->
  1838. {/block:ifextrabox}
  1839. </div> <!-- sticky sidebar -->
  1840.  
  1841.  
  1842.  
  1843.  
  1844.  
  1845. </div><!-- sidebar wrapper-->
  1846.  
  1847.  
  1848. <!----------------------------------------------------------- SIDEBAR END -->
  1849.  
  1850. </div><!-- cat end -->
  1851.  
  1852.  
  1853.  
  1854.  
  1855.  
  1856.  
  1857.  
  1858.  
  1859.  
  1860.  
  1861.  
  1862. <!------------------------------------------------------------ POSTS -->
  1863.  
  1864. <div class="posts">
  1865. {block:Posts}
  1866.  
  1867.  
  1868. <div class="info-top">
  1869. <b>
  1870.  
  1871.  
  1872. <font style="float:right">
  1873. {block:RebloggedFrom}
  1874. <a href="{ReblogParentURL}" title="{ReblogParentName}" target="_blank">via </a>
  1875.  
  1876. </font style>
  1877.  
  1878. <font style="float:left">
  1879. <a href="{Permalink}" title="{TimeAgo}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a>&nbsp;
  1880.  
  1881. {block:ContentSource}
  1882.  
  1883. <i class="{text:bullet style}" aria-hidden="true" style="color:{color:link hover};"></i>&nbsp;
  1884. <a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRootName}"target="_blank">src</a>
  1885. {/block:ContentSource}
  1886. {/block:RebloggedFrom}
  1887. </font style>
  1888. </b>
  1889.  
  1890. </div>
  1891.  
  1892. <div class="post">
  1893.  
  1894.  
  1895.  
  1896.  
  1897.  
  1898.  
  1899.  
  1900.  
  1901.  
  1902. {block:Text}
  1903. {block:Title}
  1904. <a href="{Permalink}" class="ttitle"><center><h1>{Title}</h1></center></a>
  1905.  
  1906. {/block:Title}
  1907. {Body}
  1908. {/block:Text}
  1909.  
  1910.  
  1911.  
  1912.  
  1913.  
  1914. <!---------------------------------------------------------------- PHOTOS -->
  1915.  
  1916.  
  1917. {block:Photo}
  1918.  
  1919.  
  1920. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-500}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1921. <img src="{PhotoURL-HighRes}">
  1922. </a>
  1923.  
  1924.  
  1925.  
  1926. {block:Caption}<div class="portrait">
  1927. {block:NotReblog}
  1928. <div class="caption">{Caption}</div>
  1929. {/block:NotReblog}
  1930.  
  1931. {block:RebloggedFrom}
  1932. {block:Reblogs}
  1933. <div class="caption">
  1934. <div class="reblog-info">
  1935. {block:IsActive}
  1936. <a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>
  1937. <a target="_blank" class="reblog-name" href="{Permalink}">{Username}</a>
  1938. {/block:IsActive}
  1939.  
  1940. {block:IsDeactivated}
  1941. <span class="inactive deactivated">{Username}</span>{/block:IsDeactivated}
  1942. </div>
  1943. <blockquote><div class="reblog-content">{Body}</div></blockquote>
  1944. </div>
  1945. {/block:Reblogs}{/block:RebloggedFrom}
  1946. </div>{/block:Caption}
  1947.  
  1948. {/block:Photo}
  1949.  
  1950.  
  1951.  
  1952.  
  1953.  
  1954. <!-- photoset -->
  1955. {block:Photoset}
  1956.  
  1957.  
  1958.  
  1959.  
  1960. {Photoset-500}
  1961.  
  1962.  
  1963. {block:Caption}<div class="portrait">
  1964. {block:NotReblog}
  1965. <div class="caption">{Caption}</div>
  1966. {/block:NotReblog}
  1967.  
  1968. {block:RebloggedFrom}
  1969. {block:Reblogs}
  1970. <div class="caption">
  1971. <div class="reblog-info">
  1972. {block:IsActive}
  1973. <a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>
  1974. <a target="_blank" class="reblog-name" href="{Permalink}">{Username}</a>
  1975. {/block:IsActive}
  1976.  
  1977. {block:IsDeactivated}
  1978. <span class="inactive deactivated">{Username}</span>{/block:IsDeactivated}
  1979. </div>
  1980. <blockquote><div class="reblog-content">{Body}</div></blockquote>
  1981. </div>
  1982. {/block:Reblogs}{/block:RebloggedFrom}
  1983. </div>{/block:Caption}
  1984.  
  1985.  
  1986. {/block:Photoset}
  1987.  
  1988.  
  1989.  
  1990.  
  1991. <!------------------------------------------------------------ PHOTOS END-->
  1992.  
  1993.  
  1994.  
  1995.  
  1996. {block:Quote} <div class="quote">
  1997. <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
  1998. {Quote}<p></div>
  1999. <div class="quote2"> {block:Source}- {Source}{/block:Source}</div>
  2000. {/block:Quote}
  2001.  
  2002. {block:Link}
  2003. <a href="{URL}" target="{Target}" ><center>{Name} (x)</center> </a>
  2004.  
  2005. {block:Description} {Description} {/block:Description}
  2006. {/block:Link}
  2007.  
  2008.  
  2009.  
  2010. {block:Chat}
  2011. {block:Title}
  2012. <h1>{Title}</h1>{/block:Title}<br>
  2013. <ul class="convo">{block:Lines}<i class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  2014. {Line}</i>{/block:Lines}</ul>
  2015. {/block:Chat}
  2016.  
  2017.  
  2018.  
  2019.  
  2020.  
  2021.  
  2022. {block:Audio}
  2023. {block:AudioPlayer}
  2024. <div class="playbutton">{AudioPlayerGrey}</div>
  2025. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  2026.  
  2027. <div class="trackinfo">
  2028. <div class="trackname">
  2029. {block:TrackName}{TrackName}{/block:TrackName}
  2030. </div>
  2031. <div class="artist">
  2032. {block:Artist}{Artist}{/block:Artist}
  2033. </div>
  2034. <div class="album">
  2035. {block:Album}{Album}{/block:Album}
  2036. </div>
  2037. <div class="playcount">
  2038. {block:PlayCount}Played: {PlayCount} times{/block:PlayCount}
  2039. </div>
  2040. </div>
  2041. {block:Caption}{Caption}{/block:Caption}
  2042. {/block:AudioPlayer}
  2043. {/block:Audio}
  2044.  
  2045.  
  2046. {block:Video}
  2047. {Video-500}
  2048. {block:Caption}{Caption}{/block:Caption}
  2049. {/block:Video}
  2050.  
  2051.  
  2052.  
  2053. {block:Answer}
  2054. <table style="padding-bottom:5px;margin-bottom:5px;">
  2055. <tr>
  2056. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  2057. <div class="question">{Question}</div>
  2058. </td>
  2059. </tr>
  2060. </table>
  2061. {Answer}
  2062. {/block:Answer}
  2063.  
  2064.  
  2065.  
  2066.  
  2067. {block:PermalinkPage}
  2068. {block:ContentSource} Source: <a href="{SourceURL}" target="_blank">{SourceTitle}</a>{/block:ContentSource}<p>
  2069.  
  2070. {/block:PostNotes}
  2071.  
  2072.  
  2073.  
  2074. {/block:PermalinkPage}
  2075.  
  2076.  
  2077.  
  2078. </div> <!-- END CONTENT -->
  2079.  
  2080.  
  2081. <!----------------------------------------------------------- LIKE/REBLOG -->
  2082. <div class="info-bottom">
  2083.  
  2084. {block:Date}
  2085.  
  2086. <div class="bottom-info">
  2087.  
  2088.  
  2089.  
  2090.  
  2091.  
  2092. {block:NoteCount} &nbsp;&nbsp;
  2093.  
  2094. <b><a href="{Permalink}" title="{NoteCount}">NOTES {NoteCount}</a></b>{/block:NoteCount}
  2095.  
  2096. </div>
  2097.  
  2098. <div class="bottom-share">
  2099. <ul>
  2100. <div class="reblog">
  2101. <a href="{ReblogURL}" target="_blank" title="reblog"><span class="fas fa-sync-alt"></span></a>
  2102. </div>
  2103. <i class="like"><svg width="15" height="15" viewBox="0 0 19 16" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" fill="#000000"> <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
  2104. </svg>{LikeButton size="15"}</i>
  2105.  
  2106.  
  2107. </ul>
  2108.  
  2109. </div>
  2110.  
  2111. {/block:Date}
  2112.  
  2113. </div>
  2114.  
  2115.  
  2116.  
  2117.  
  2118.  
  2119. <!------------------------------------------------------------------ TAGS -->
  2120.  
  2121. <div class="tags-container">
  2122.  
  2123. <div class="tags">
  2124. {block:Tags} {block:HasTags} <a href="{TagURL}"><span class="{text:bullet style}" aria-hidden="true"></span>&nbsp;&nbsp;{Tag}</a> {/block:HasTags} {/block:Tags}
  2125. </div>
  2126.  
  2127. </div>
  2128.  
  2129.  
  2130. {block:PermalinkPage}
  2131.  
  2132.  
  2133. {block:PostNotes} <div class="notes-container"> <div class="notes">
  2134. {PostNotes}</div></div>
  2135. {/block:PostNotes}
  2136.  
  2137.  
  2138. {/block:PermalinkPage}
  2139.  
  2140.  
  2141.  
  2142. {/block:Posts}
  2143.  
  2144.  
  2145.  
  2146. <!------------------------------------------------------------ PAGINATION -->
  2147.  
  2148.  
  2149.  
  2150.  
  2151. {block:Pagination}<div class="pagination-container">
  2152. <div class="pagination">
  2153. {block:PreviousPage}
  2154. <a href="{PreviousPage}">❮</a> {/block:PreviousPage} {block:JumpPagination length="5"} {block:CurrentPage}
  2155. <div class="current"> <span class="current_page"><a>{PageNumber}</a></span> </div>{/block:CurrentPage} {block:JumpPage}
  2156. <a class="jump_page" href="{URL}">{PageNumber}</a> {/block:JumpPage}{/block:JumpPagination} {block:NextPage}
  2157. <a href="{NextPage}">❯</a> {/block:NextPage}
  2158. </div></div>
  2159. {/block:Pagination}
  2160.  
  2161.  
  2162.  
  2163.  
  2164. <!------------------------------------------------------------ END POSTS --> </div> <!-- END CONTENT WHOLE -->
  2165.  
  2166.  
  2167.  
  2168. <div class="credit">
  2169. <a href="https://sacrin-themes.tumblr.com/" target="_blank" title="Sacrin-Themes"><span class="fa fa-moon"></span></a>
  2170. </div>
  2171.  
  2172.  
  2173.  
  2174.  
  2175. </div><!-- content -->
  2176.  
  2177. <!------------------------------------------------------------ CONTENT END -->
  2178.  
  2179. </center>
  2180.  
  2181.  
  2182.  
  2183.  
  2184.  
  2185.  
  2186.  
  2187.  
  2188.  
  2189. </body>
  2190. </html>
Advertisement
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!