API tools faq
paste
sacrinteeth

Theme #3 - GROTTO [Light]

sacrinteeth
Jan 2nd, 2021 (edited)
9,086
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6.  
  7.  
  8.  
  9. "GROTTO" THEME #3 | BY SACRIN-THEMES.TUMBLR.COM
  10.  
  11. TERMS
  12.  
  13. + You can use this as a base code, but do not claim as your own unless you make significant changes to it!
  14. + Thanks for using my theme! :) Hope you enjoy it!
  15.  
  16. CREDITS
  17.  
  18. + Scroll to the Top (www.itjungles.com)
  19. + Font Awesome Icons (fontawesome.com)
  20. + Coding Resources
  21.  
  22. octomoosey.tumblr.com
  23. odeysseus.tumblr.com
  24. Themesbyeris.tumblr.com
  25. Htmlauren.tumblr.com
  26. lmthemeslp-tut.tumblr.com
  27. todorokiscute.tumblr.com
  28. bychloethemes.tumblr.com
  29.  
  30.  
  31.  
  32. -->
  33.  
  34. <title>{Title}</title>
  35.  
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  37.  
  38. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  39.  
  40.  
  41. <!---------------------------------------------------------- FONT AWESOME -->
  42.  
  43. <link rel="stylesheet" href=
  44. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
  45. </link>
  46.  
  47. <!--------------------------------------------------------------- JQUERY -->
  48.  
  49. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  50.  
  51. <!--------------------------------------------------------------- FAVICON -->
  52.  
  53. <link rel="icon" href="{image:sidebar image}" type="image/gif" />
  54.  
  55. <!-------------------------------------------------------- SCROLL TO TOP -->
  56. <div style="float:right;bottom: 0px; margin-top:15px; margin-right:3px;"><a href="https://tumblings.net/post/44212620655/tumblreffects" target="_blank"></a></div>
  57.  
  58. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  59.  
  60.  
  61. <div style="position:fixed;bottom:10px;right:10px;z-index:1;">
  62. <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 4}";></i></a></div>
  63.  
  64. <!-------------------------------------------------------- TOOLTIPS -->
  65.  
  66. <script src="https://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
  67. <script>
  68. (function($){
  69. $(document).ready(function(){
  70. $("a[title]").style_my_tooltips({
  71. tip_follows_cursor:true,
  72. tip_delay_time:90,
  73. tip_fade_speed:700,
  74. attribute:"title"
  75. });
  76. });
  77. })(jQuery);
  78. </script>
  79.  
  80. <!---------------------------------------------------- AUDIO PLAYER COLOR -->
  81.  
  82. <script>
  83. $(document).ready(function() {
  84. // audio player
  85. var $audio = $('iframe.tumblr_audio_player');
  86. $audio.load(function() {
  87. $(this).contents().find('head').append('<style type="text/css">' +
  88. '.audio-player { background:transparent; color: #fff !important; }' +
  89. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  90. '</style>');
  91. });
  92. });
  93. </script>
  94.  
  95.  
  96.  
  97.  
  98.  
  99. <!-------------------------------------------------------------------------->
  100. <!-------------------------------------------------------------------------->
  101. <!-------------------------------------------------------------------------->
  102. <!-------------------------------------------------------------------------->
  103. <!-------------------------------------------------------------------------->
  104. <!-------------------------------------------------------------------------->
  105. <!-------------------------------------------------------------------------->
  106. <!-------------------------------------------------------------------------->
  107.  
  108. <head>
  109.  
  110.  
  111. <!---------------------------------------------------------------- IMAGES -->
  112.  
  113. <meta name="image:background" content=""/>
  114. <meta name="image:sidebar image" content=""/>
  115.  
  116. <!---------------------------------------------------------------- COLORS -->
  117. <meta name="color:accent 1" content="#f4f4f4"/>
  118. <meta name="color:accent 2" content="#e9ebe9"/>
  119. <meta name="color:accent 3" content="#6b7569"/>
  120. <meta name="color:accent 4" content="#d1d5cd"/>
  121. <meta name="color:text" content="#5d665c"/>
  122. <meta name="color:text 2" content="#8d9585"/>
  123. <meta name="color:bold" content="#000000"/>
  124. <meta name="color:italics" content="#acbc99"/>
  125. <meta name="color:links" content="#667f61"/>
  126. <meta name="color:links hover" content="#5d665c"/>
  127. <meta name="color:sidebar links hover" content="#ffffff"/>
  128. <meta name="color:blockquote" content="#bbc3b3"/>
  129.  
  130. <!-------------------------------------------------------- FONT SELECTION -->
  131. <meta name="font:title" content="Favorit"/>
  132. <meta name="font:text" content="Favorit"/>
  133.  
  134. <!----------------------------------------------------------------- TOGGLE-->
  135.  
  136. <meta name="if:sidebar image" content="0" />
  137.  
  138. <!------------------------------------------------------------------ TEXT -->
  139. <meta name="text:link 1" content="ask" />
  140. <meta name="text:link 1 url" content="/ask" />
  141. <meta name="text:link 2" content="archive" />
  142. <meta name="text:link 2 url" content="/archive" />
  143. <meta name="text:link 3" content="" />
  144. <meta name="text:link 3 url" content="" />
  145. <meta name="text:link 4" content="" />
  146. <meta name="text:link 4 url" content="" />
  147. <meta name="text:SCM music player" content="" />
  148.  
  149.  
  150.  
  151. <style type="text/css">
  152.  
  153. /*----------------------------------------------------------- SCROLLBAR --*/
  154.  
  155.  
  156. ::-webkit-scrollbar {
  157.  
  158. width: 10px;
  159. background: {color:accent 1};
  160. }
  161.  
  162. ::-webkit-scrollbar-track {
  163.  
  164. background: none;
  165. }
  166.  
  167.  
  168. ::-webkit-scrollbar-thumb {
  169.  
  170. border-radius: 15px;
  171. background:{color:accent 4};
  172.  
  173. }
  174.  
  175. ::-webkit-scrollbar-thumb:horizontal {
  176.  
  177. background:{color:accent 4};
  178.  
  179. }
  180.  
  181. /*---------------------------------------------------------------- MAIN --*/
  182.  
  183.  
  184. body{
  185. background-image:url('{image:background}');
  186. background-attachment: fixed;
  187. background-repeat: repeat;
  188. background-color: {color:accent 1};
  189. margin-left:0px;
  190. margin-top:0px;
  191. color:{color:text};
  192. font-family:{font:text};
  193. font-size:12px;
  194. line-height:25px;
  195. letter-spacing:1px;
  196.  
  197. }
  198.  
  199. a{
  200. text-decoration:none;
  201. color:{color:links};
  202. transition:0.4;
  203. }
  204.  
  205. a:hover {
  206. color:{color:links hover};
  207.  
  208. }
  209.  
  210. b {
  211. color:{color:bold};
  212. }
  213.  
  214. i {
  215. color:{color:italics};
  216. }
  217.  
  218.  
  219. li {
  220. margin-left: -15px;
  221. list-style-type: none;
  222. }
  223.  
  224. li:before {
  225.  
  226. content: "•";
  227. font-family: 'Font Awesome\ 5 Free';
  228. font-weight: 900;
  229. font-size:15px;
  230. margin-left: -20px;
  231. margin-right: 8px;
  232. }
  233.  
  234. blockquote {
  235. padding-left:10px;
  236. border-left:1px dashed {color:blockquote};
  237. margin-left:10px;
  238. }
  239.  
  240.  
  241. .content {
  242.  
  243. width:80%;
  244. max-width:800px;
  245. margin:3em auto;
  246. display:grid;
  247. grid-template-columns:1fr 2fr;
  248. grid-gap:4em;
  249. background:transparent;
  250. margin-top:-30px;
  251.  
  252. }
  253.  
  254. .title {
  255. font-size: 30px;
  256. text-align: center;
  257. padding:10px;
  258. margin-bottom:10px;
  259. color: {color:accent 3};
  260. font-family:{font:title};
  261. line-height:35px;
  262. }
  263.  
  264. .title a {
  265. font-size: 30px;
  266. text-align: center;
  267. padding:10px;
  268. margin-bottom:10px;
  269. color: {color:accent 3};
  270. font-family:{font:title};
  271.  
  272.  
  273. }
  274.  
  275.  
  276.  
  277. /*---------------------------------------------------------------- POSTS --*/
  278.  
  279. #postmargin{
  280.  
  281. padding-top: 10px;
  282. width:400px;
  283. margin-top:120px;
  284. }
  285.  
  286. .posts{
  287.  
  288. background-color:{color:accent 2};
  289. width:450px;
  290. padding:40px 30px 40px 30px;
  291. overflow: hidden;
  292. border-radius:10px;
  293. margin-bottom:50px;
  294. margin-left:70%;
  295.  
  296. }
  297.  
  298.  
  299. .posts img:not(.lightbox-image){
  300. max-width:100%;
  301. text-align:center;
  302. border-radius:10px;
  303. }
  304.  
  305.  
  306. .avatar img {
  307.  
  308. border-radius:100px!important;
  309. width:30px!important;
  310. height:30px!important;
  311. margin-top:10px;
  312. }
  313.  
  314.  
  315. .avatar-box {
  316.  
  317. display:flex;
  318. flex-direction: row;
  319.  
  320. }
  321.  
  322. .username {
  323. margin-left:10px;
  324. margin-top:13px;
  325. }
  326.  
  327.  
  328.  
  329. /*-------------------------------------------------------------- SIDEBAR --*/
  330.  
  331. .sidebar {
  332. margin-left:-50px;
  333. background:transparent;
  334. height:100vh;
  335.  
  336. }
  337.  
  338. .sticky {
  339. position:fixed;
  340. top:0;
  341. margin-top:90px;
  342.  
  343. }
  344.  
  345. .desc-box {
  346.  
  347. width:200px;
  348. padding:30px 20px 30px 20px;
  349. height:auto;
  350. margin-top:10px;
  351. background:{color:accent 2};
  352. border-radius:10px;
  353. text-align:center;
  354. }
  355.  
  356.  
  357.  
  358. {block:ifsidebarimage}
  359. .sidebar-image {
  360.  
  361.  
  362. width: 90px!important;
  363. height: 90px!important;
  364. border-radius:100px;
  365. margin-bottom:20px;
  366.  
  367. }
  368. {/block:ifsidebarimage}
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375.  
  376. .link-box {
  377.  
  378. width:200px;
  379. padding:20px;
  380. height:auto;
  381. margin-top:20px;
  382. background:transparent;
  383. border-radius:10px;
  384. }
  385.  
  386. .link-box a {
  387.  
  388. padding:10px 12px 10px 12px;
  389. background:{color:accent 2};
  390. border-radius:100px;
  391. transition:0.4s;
  392. margin-right:5px;
  393. font-size:15px;
  394.  
  395. }
  396.  
  397. .link-box a:hover {
  398.  
  399. background:{color:sidebar links hover};
  400. transition:0.4s;
  401. }
  402.  
  403. .link-box i {
  404.  
  405. color:{color:accent 3};
  406. }
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413. .pagination-box {
  414.  
  415. width:200px;
  416. padding:20px;
  417. height:auto;
  418. margin-top:-6px;
  419. background:transparent;
  420. border-radius:10px;
  421. font-size:30px;
  422.  
  423. }
  424.  
  425. .pagination {
  426. color:#000;
  427. display:flex;
  428. flex-direction: row;
  429. justify-content: space-around;
  430. }
  431.  
  432. .pagination a {
  433.  
  434. padding:10px 12px 10px 12px;
  435. background:{color:accent 2};
  436. transition:0.4s;
  437. margin-right:5px;
  438. font-size:15px;
  439. border-radius:6px;
  440. }
  441.  
  442.  
  443. .pagination a:hover {
  444.  
  445. background:{color:sidebar links hover};
  446. transition:0.4s;
  447. }
  448.  
  449. .pagination i {
  450.  
  451. color:{color:accent 3};
  452. }
  453.  
  454.  
  455. /*----------------------------------------------------------------- TAGS --*/
  456.  
  457.  
  458. .tags-container {
  459.  
  460. display:flex;
  461. justify-content:left;
  462. align-items:left;
  463. flex-direction:row;
  464. -webkit-transition: all 0.7s ease-in-out;
  465. transition: all 0.7s ease-in-out;
  466. -moz-transition: all 0.7s ease-in-out;
  467. -o-transition: all 0.7s ease-in-out;
  468. position:relative;
  469.  
  470. }
  471.  
  472.  
  473. .tags a {
  474.  
  475. background:{color:accent 1};
  476. color:{color:text};
  477. padding:7px;
  478. padding-left: 10px;
  479. padding-right:10px;
  480. border-radius:6px;
  481. margin-right:5px;
  482. -webkit-transition: all 0.5s ease-in-out;
  483. transition: all 0.5s ease-in-out;
  484. -moz-transition: all 0.5s ease-in-out;
  485. -o-transition: all 0.5s ease-in-out;
  486. box-shadow: 0px 5px 30px -9px rgba(0,0,0,0.12);
  487. }
  488.  
  489.  
  490. .tags a:hover {
  491.  
  492. background:{color:accent 3};
  493. color:{color:accent 1};
  494. padding:8px;
  495. border-radius:7px;
  496. padding-left: 12px;
  497. padding-right:12px;
  498. -webkit-transition: all 0.5s ease-in-out;
  499. transition: all 0.5s ease-in-out;
  500. -moz-transition: all 0.5s ease-in-out;
  501. -o-transition: all 0.5s ease-in-out;
  502.  
  503. }
  504.  
  505.  
  506. .tags {
  507.  
  508. height:0px;
  509. line-height:330%;
  510. text-align:left;
  511. font-size:12px;
  512. opacity:0;
  513. -webkit-transition: all 0.5s ease-in-out;
  514. transition: all 0.5s ease-in-out;
  515. -moz-transition: all 0.5s ease-in-out;
  516. -o-transition: all 0.5s ease-in-out;
  517. margin-top:-60px;
  518.  
  519. }
  520.  
  521.  
  522. .posts:hover .tags {
  523.  
  524. opacity:1;
  525. -webkit-transition: all 0.7s ease-in-out;
  526. transition: all 0.7s ease-in-out;
  527. -moz-transition: all 0.7s ease-in-out;
  528. -o-transition: all 0.7s ease-in-out;
  529. margin-bottom:0px;
  530. float:left;
  531. padding:5px;
  532. width:450px;
  533. margin-top:20px;
  534. height:auto;
  535. }
  536.  
  537.  
  538. /*--------------------------------------------------------------- NOTES --*/
  539.  
  540. .notes-container {
  541.  
  542. margin: 0;
  543. padding: 0;
  544. position:relative;
  545. width:490px;
  546. margin-left:280px;
  547. border-radius:7px;
  548. background:{color:accent 2};
  549. height:400px;
  550. overflow:auto;
  551. padding:15px;
  552. margin-top:auto;
  553.  
  554. }
  555.  
  556.  
  557. .notes li:before {
  558.  
  559. margin-left: 0px;
  560. float:left;
  561. content: "";
  562. font-family: 'Font Awesome\ 5 Free';
  563. font-size:15px;
  564. }
  565.  
  566.  
  567. .notes li {
  568.  
  569. list-style-type: none;
  570. padding:5px;
  571. margin-left:-20px;
  572. width: 100%;
  573. float: left;
  574. text-align:left;
  575.  
  576. }
  577.  
  578.  
  579.  
  580. .notes img {
  581.  
  582. margin-right: 15px;
  583. margin-left: 15px;
  584. float: left;
  585. width: 20px;
  586. height: 20px;
  587. border-radius: 100px;
  588. }
  589.  
  590.  
  591.  
  592. /*------------------------------------------------------ ASK & QUESTIONS --*/
  593.  
  594.  
  595. .askerbg {
  596.  
  597. padding: 0px;
  598. border-radius: 100px;
  599.  
  600. }
  601.  
  602. .askerbg img {
  603.  
  604. border-radius:100px!important;
  605.  
  606. }
  607.  
  608.  
  609.  
  610. .question {
  611.  
  612. width: auto;
  613. margin-top: 10px;
  614. margin-bottom:20px;
  615. color:{color:text 2};
  616. padding: 10px;
  617. border-radius: 7px;
  618. background:{color:accent 1};
  619.  
  620. }
  621.  
  622. /*----------------------------------------------------------- SEARCH BAR --*/
  623.  
  624. .search {
  625.  
  626. margin-top:20px;
  627.  
  628. }
  629.  
  630.  
  631. .sfm input {
  632. width:150px;
  633. background-color: #f5f5f5;
  634. font-size: 11px;
  635. border: 0px;
  636. text-transform: uppercase;
  637. margin-top: 0px;
  638. color: #999;
  639. letter-spacing: 1px;
  640. padding: 4px 8px;
  641. font-family: {font:text};
  642. border-radius: 20px;
  643. padding: 8px 20px 8px 20px;
  644. border-radius: 70px;
  645. color:{color:text 2};
  646. transition: 0.4s;
  647. background:{color:accent 1};
  648.  
  649. }
  650.  
  651.  
  652. /*---------------------------------------------------------------- QUOTE --*/
  653.  
  654. #quote{
  655. font-size:20px;
  656. margin-bottom:20px;
  657. margin-top:20px;
  658. font-weight:Bold;
  659. }
  660.  
  661. #link{
  662. text-align:center;
  663. font-size:15px;
  664. }
  665.  
  666. /*------------------------------------------------------------ PERMALINK --*/
  667.  
  668. .permalink
  669. {
  670.  
  671. display:flex;
  672. flex-direction: row;
  673. justify-content: space-around;
  674. }
  675.  
  676. .permalink-box {
  677. width:100%;
  678. margin-top:30px;
  679. padding-top:10px;
  680. padding-bottom:10px;
  681. height:auto;
  682. text-align:center;
  683. background:{color:accent 1};
  684. border-radius:100px;
  685.  
  686. }
  687.  
  688. /*----------------------------------------------------------------- CHAT --*/
  689.  
  690. .chatbox {
  691. margin-top:-30px;
  692. margin-bottom:180px;
  693.  
  694. }
  695.  
  696. .answer span,.convo i {
  697.  
  698.  
  699. border-radius:1em;
  700. padding:.5em 10px;
  701. max-width:75%;
  702. position:relative;
  703. margin-bottom:10px;
  704.  
  705.  
  706. }
  707.  
  708. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11 {
  709.  
  710. color:{color:text 2};
  711. border-radius: 7px;
  712. background:{color:accent 1};
  713. float:left;
  714. height:auto;
  715. left:3px;
  716. }
  717.  
  718.  
  719. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after {
  720.  
  721.  
  722. content:' ';
  723. position:absolute;
  724. border:8px solid {color:accent 1};
  725. top:1em;
  726. right:99%;
  727. margin-top:-7px;
  728. clip-path: polygon(100% 11%, 35% 45%, 100% 85%);
  729.  
  730.  
  731. }
  732.  
  733.  
  734. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12 {
  735. color:{color:text 2};
  736. border-radius: 7px;
  737. background:{color:accent 1};
  738. float:right;
  739. right:3px;
  740. height:auto;
  741. }
  742.  
  743.  
  744. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after {
  745. content:' ';
  746. position:absolute;
  747. border:8px solid {color:accent 1};
  748. top:1em;
  749. left:99%;
  750. clip-path: polygon(0 8%, 0 86%, 55% 48%);
  751. margin-top:-7px;
  752. }
  753.  
  754.  
  755. /*--------------------------------------------------- LIKE/REBLOG BUTTON --*/
  756.  
  757. .like svg path, .reblog svg path {
  758.  
  759. fill:{color:links};
  760. transition: 0.4s;
  761. }
  762.  
  763.  
  764. .reblog {
  765. float:right;
  766. margin-left:40px;
  767. margin-top:0px;
  768.  
  769. }
  770.  
  771. .reblog a {
  772. color:{color:links};
  773. }
  774.  
  775. .reblog a:hover {
  776.  
  777. color:{color:links hover};
  778. transition: 0.4s;
  779.  
  780. }
  781.  
  782. .like {
  783.  
  784. float:left;
  785. margin-right:20px;
  786. position: relative;
  787. margin-top:2px;
  788.  
  789. }
  790.  
  791. /* Position like button above your custom one */
  792. .like .like_button {
  793. position: absolute;
  794. top: 0;
  795. opacity: 0;
  796.  
  797. }
  798.  
  799. /* Keep like functionality active */
  800. .like .like_button.liked {
  801. opacity: 1;
  802. }
  803.  
  804. /*---------------------------------------------------------- AUDIO POSTS --*/
  805.  
  806. .playbutton-container {
  807.  
  808. position:relative;
  809. margin-left:20px;
  810. z-index:9;
  811. overflow:hidden;
  812. padding:20px;
  813. text-align: center;
  814. opacity: .8;
  815. padding:20px;
  816. width:60px;
  817. height:60px;
  818. }
  819.  
  820. .playbutton {
  821.  
  822. border-radius:100px;
  823. width:30px;
  824. height:30px;
  825. margin-top:50px;
  826. margin-left:5px;
  827.  
  828. }
  829.  
  830. .playbutton-bg {
  831.  
  832. margin-top:-45px;
  833. margin-left:30px;
  834. position: absolute;
  835. width: 40px;
  836. height: 40px;
  837. background-color: #000;
  838. padding: 10px;
  839. border-radius: 40px;
  840. opacity: .7;
  841. z-index:1;
  842.  
  843. }
  844.  
  845.  
  846. .albumart img {
  847.  
  848. position:relative;
  849. margin-top:-75px;
  850. margin-left:0px
  851. height:120px!important;
  852. width:120px!important;
  853. border-radius:100px!important;
  854.  
  855. }
  856.  
  857. .trackinfo {
  858.  
  859. padding: 10px 20px 10px 20px;
  860. margin-bottom:10px;
  861. color:{color:accent 3};
  862. top:-10px;
  863. position:relative;
  864. margin-left:140px;
  865. height:auto;
  866. margin-top:-120px;
  867. border-radius:6px;
  868. text-align:left;
  869. background:{color:accent 1};
  870.  
  871. }
  872.  
  873. .trackname {
  874.  
  875. position:relative;
  876. font-size:12px;
  877. text-transform:uppercase;
  878. font-weight: bold;
  879.  
  880.  
  881. }
  882.  
  883. .artist {
  884.  
  885. font-size:11px;
  886. text-transform:uppercase;
  887.  
  888. }
  889.  
  890. .album {
  891.  
  892. font-style: italic;
  893. font-size:11px;
  894.  
  895. }
  896.  
  897.  
  898. /*------------------------------------------------------------ TOOL TIPS --*/
  899.  
  900. #s-m-t-tooltip {
  901.  
  902. margin-left:15px;
  903. margin-top:-21px;
  904. letter-spacing:0px;
  905. font-family:{font:text};
  906. text-transform:auto;
  907. font-size:12px;
  908. color: {color:accent 1};
  909. padding: 3px;
  910. z-index:99999999999999999999999;
  911. transition:all 0.4s;
  912. background:{color:accent 3};
  913. padding: 5px 10px 5px 10px;
  914. border-radius: 100px;
  915.  
  916. }
  917.  
  918. /*------------------------------------------------------ TUMBLR CONTROLS --*/
  919.  
  920.  
  921. iframe#tumblr_controls, .iframe-controls--desktop {
  922.  
  923.  
  924. top:0px!important; /* or whatever you want */
  925. right:-30px!important; /* or whatever you want */
  926. transform:scale(0.8,0.8); /* or whatever you want */
  927. -webkit-filter:invert(100%); filter:invert(100%);
  928. opacity:0!important;
  929. -webkit-backface-visibility:hidden;
  930. padding:10px 40px 10px 10px;
  931. -webkit-transition:opacity .3s ease-out;
  932. transition:opacity .3s ease-out;
  933.  
  934.  
  935. }
  936.  
  937.  
  938. #tumblr_controls:hover, .tmblr-iframe:hover {
  939.  
  940. opacity:.5!important;
  941. }
  942.  
  943.  
  944. /*-------------------------------------------------------------- CREDIT --*/
  945.  
  946.  
  947. .credit {
  948.  
  949. position:fixed;
  950. bottom:18px;
  951. right:25px;
  952. font-size: 20px;
  953.  
  954. }
  955.  
  956. .credit a {
  957. color:{color:accent 1};
  958. }
  959.  
  960. /*-------------------------------------------------------- SCROLL TO TOP --*/
  961.  
  962. #scrollToTop:link,
  963. #scrollToTop:visited {
  964.  
  965. display: none;
  966. position: fixed;
  967. bottom:48px;
  968. right:17px;
  969. font-size: 20px;
  970. padding: 13px;
  971. color:{color:accent 4};
  972.  
  973. }
  974.  
  975. /*--------------------------------------------------------------- FOOTER --*/
  976.  
  977. .footer {
  978.  
  979. height:100px;
  980. }
  981.  
  982.  
  983. /*------------------------------------------------- FIX TEXT POST IMAGES --*/
  984.  
  985. iframe, img, embed, object, video:not(.lightbox-image) {
  986. max-width: 100%;
  987. }
  988.  
  989.  
  990. img:not(.lightbox-image) {
  991. height: auto;
  992. width: auto;
  993. }
  994.  
  995.  
  996. /*------------------------------------------- STYLE/HEAD END & BODY START--*/
  997.  
  998.  
  999. </style></head><body>
  1000.  
  1001. <!-------------------------------------------------------------------------->
  1002. <!-------------------------------------------------------------------------->
  1003. <!-------------------------------------------------------------------------->
  1004. <!-------------------------------------------------------------------------->
  1005. <!-------------------------------------------------------------------------->
  1006. <!-------------------------------------------------------------------------->
  1007. <!-------------------------------------------------------------------------->
  1008. <!-------------------------------------------------------------------------->
  1009. <!-------------------------------------------------------------------------->
  1010. <!-------------------------------------------------------------------------->
  1011.  
  1012.  
  1013. <div class="content">
  1014.  
  1015.  
  1016. <!--------------------------------------------------------- SIDEBAR START -->
  1017.  
  1018. <div class="sidebar"><!-- sidebar wrapper -->
  1019. <div class="sticky">
  1020. <div class="desc-box">
  1021.  
  1022. <div class="title">
  1023. <a href="/">{Title}</a>
  1024. </div>
  1025.  
  1026. {block:ifsidebarimage}
  1027. <center><img class="sidebar-image" src="{image:Sidebar image}"/></center> {block:ifsidebarimage}
  1028.  
  1029. {description}
  1030.  
  1031. <!--------------------------------------------------------------- SEARCH -->
  1032.  
  1033. <div class="search">
  1034.  
  1035. <form onsubmit="return tagSearch(this)" class="sfm">
  1036.  
  1037. <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}'}" />
  1038.  
  1039. </form>
  1040.  
  1041. </div>
  1042.  
  1043. </div><!--desc box-->
  1044.  
  1045. <!---------------------------------------------------------------- LINKS -->
  1046.  
  1047. <div class="link-box">
  1048. <center>
  1049.  
  1050. {block:iflink1url} <a href="{text:link 1 url}" title="{text:link 1}"> <i class="fab fa-canadian-maple-leaf"></i></a>{block:iflink1url}
  1051. {block:iflink2url} <a href="{text:link 2 url}" title="{text:link 2}"> <i class="fab fa-pagelines"></i></a>{block:iflink2url}
  1052. {block:iflink3url} <a href="{text:link 3 url}" title="{text:link 3}"> <i class="fas fa-seedling"></i></a> {block:iflink3url}
  1053. {block:iflink4url} <a href="{text:link 4 url}" title="{text:link 4}"> <i class="fas fa-tree"></i></a>{block:iflink4url}
  1054.  
  1055. </center>
  1056. </div><!-- link box-->
  1057.  
  1058. <!------------------------------------------------------------ PAGINATION -->
  1059.  
  1060. <div class="pagination-box">
  1061. <center>
  1062. <div class="pagination">
  1063. {block:PreviousPage}
  1064. <div class="previous-button"><a href="{PreviousPage}"> <i class="fas fa-angle-left"></i> </a></div>
  1065. {/block:PreviousPage}
  1066.  
  1067. {block:NextPage}
  1068. <div class="next-button"><a href="{NextPage}"> <i class="fas fa-angle-right"></i> </a></div>
  1069. {/block:NextPage}
  1070. </div>
  1071. <center>
  1072. </div><!-- pagination box-->
  1073.  
  1074.  
  1075. </div> <!-- sticky -->
  1076.  
  1077.  
  1078.  
  1079. <!-------------------------------------------------------------------------->
  1080. <!-------------------------------------------------------------------------->
  1081. <!-------------------------------------------------------------------------->
  1082. <!-------------------------------------------------------------------------->
  1083. <!-------------------------------------------------------------------------->
  1084. <!-------------------------------------------------------------------------->
  1085. <!-------------------------------------------------------------------------->
  1086. <!-------------------------------------------------------------------------->
  1087. <!-------------------------------------------------------------------------->
  1088. <!-------------------------------------------------------------------------->
  1089.  
  1090.  
  1091.  
  1092. <!----------------------------------------------------------- POSTS START -->
  1093.  
  1094. <div id="postmargin">
  1095. {block:Posts}
  1096. <div class="posts">
  1097.  
  1098.  
  1099.  
  1100. <!------------------------------------------------------------ TEXT POSTS -->
  1101.  
  1102.  
  1103. {block:Text}
  1104.  
  1105.  
  1106. <div id="link">
  1107. {block:Title}
  1108. <div class="title">{Title}</div>
  1109. {/block:Title}
  1110. </div>
  1111.  
  1112. {block:Caption}
  1113.  
  1114. <div class="caption">
  1115.  
  1116. {block:NotReblog}
  1117. {Caption}
  1118. {/block:NotReblog}
  1119.  
  1120. {block:RebloggedFrom}{block:Reblogs}
  1121. <div class="comment_container">
  1122. <div class="commenter">
  1123. <div class="avatar-box">
  1124. <div class="avatar">
  1125.  
  1126. <img src="{PortraitURL-64}" />
  1127.  
  1128.  
  1129. </div>
  1130.  
  1131. <span>
  1132. {block:HasPermalink}
  1133. <a href="{Permalink}">
  1134. {/block:HasPermalink}
  1135. <div class="username">{Username}</div>
  1136. {block:HasPermalink}</a>
  1137. {/block:HasPermalink}
  1138.  
  1139. </div>
  1140. </span>
  1141. </div>
  1142.  
  1143. <blockquote>
  1144. <div class="comment">{Body}</div>
  1145. </blockquote>
  1146. </div>
  1147. {/block:Reblogs}{/block:RebloggedFrom}
  1148. </div>
  1149. {/block:Caption}
  1150.  
  1151. {Body}
  1152. {/block:Text}
  1153.  
  1154.  
  1155.  
  1156. <!----------------------------------------------------------------- PHOTO -->
  1157.  
  1158.  
  1159.  
  1160. {block:Photo}
  1161.  
  1162. <center>
  1163. {LinkOpenTag}
  1164. <img src="{PhotoURL-500}" width="500">
  1165. {LinkCloseTag}
  1166. </center>
  1167.  
  1168.  
  1169. {block:Caption}
  1170.  
  1171. <div class="caption">
  1172.  
  1173. {block:NotReblog}
  1174. {Caption}
  1175. {/block:NotReblog}
  1176.  
  1177. {block:RebloggedFrom}{block:Reblogs}
  1178. <div class="comment_container">
  1179. <div class="commenter">
  1180. <div class="avatar-box">
  1181. <div class="avatar">
  1182.  
  1183. <img src="{PortraitURL-64}" />
  1184. </div>
  1185.  
  1186. <span>
  1187. {block:HasPermalink}
  1188. <a href="{Permalink}">
  1189. {/block:HasPermalink}
  1190. <div class="username">{Username}</div>
  1191. {block:HasPermalink}</a>
  1192. {/block:HasPermalink}
  1193.  
  1194. </div>
  1195. </span>
  1196. </div>
  1197.  
  1198. <blockquote>
  1199. <div class="comment">{Body}</div>
  1200. </blockquote>
  1201. </div>
  1202. {/block:Reblogs}{/block:RebloggedFrom}
  1203. </div>
  1204. {/block:Caption}
  1205.  
  1206.  
  1207.  
  1208. {/block:Photo}
  1209.  
  1210.  
  1211.  
  1212.  
  1213.  
  1214.  
  1215.  
  1216. <!-------------------------------------------------------------- PHOTOSET -->
  1217.  
  1218.  
  1219.  
  1220. {block:Photoset}
  1221.  
  1222.  
  1223. <center>
  1224. {Photoset-400}
  1225. </center>
  1226.  
  1227. {block:Caption}
  1228.  
  1229. <div class="caption">
  1230.  
  1231. {block:NotReblog}
  1232. {Caption}
  1233. {/block:NotReblog}
  1234.  
  1235. {block:RebloggedFrom}{block:Reblogs}
  1236. <div class="comment_container">
  1237. <div class="commenter">
  1238. <div class="avatar-box">
  1239. <div class="avatar">
  1240.  
  1241. <img src="{PortraitURL-64}" />
  1242.  
  1243.  
  1244. </div>
  1245.  
  1246. <span>
  1247. {block:HasPermalink}
  1248. <a href="{Permalink}">
  1249. {/block:HasPermalink}
  1250. <div class="username">{Username}</div>
  1251. {block:HasPermalink}</a>
  1252. {/block:HasPermalink}
  1253.  
  1254. </div>
  1255. </span>
  1256. </div>
  1257.  
  1258. <blockquote>
  1259. <div class="comment">{Body}</div>
  1260. </blockquote>
  1261. </div>
  1262. {/block:Reblogs}{/block:RebloggedFrom}
  1263. </div>
  1264. {/block:Caption}
  1265.  
  1266.  
  1267. {/block:Photoset}
  1268.  
  1269.  
  1270.  
  1271. <!---------------------------------------------------------------- QUOTES -->
  1272.  
  1273. {block:Quote}
  1274.  
  1275. <div id="quote">
  1276. <i class="fas fa-quote-left" style="font-size:30px; color:{color:text}"></i>
  1277. {Quote}
  1278. </div>
  1279. {block:Source}— {Source}{/block:Source}
  1280.  
  1281. {/block:Quote}
  1282.  
  1283. <!----------------------------------------------------------------- LINKS -->
  1284.  
  1285. {block:Link}
  1286.  
  1287. <div id="link"><a href="{URL}" {Target}>{Name}</a></div>
  1288.  
  1289. {block:Description}{Description}{/block:Description}
  1290.  
  1291. {/block:Link}
  1292.  
  1293. <!----------------------------------------------------------------- CHAT -->
  1294.  
  1295.  
  1296. {block:Chat}
  1297.  
  1298. <div class="chatbox">
  1299.  
  1300. {block:Title}
  1301. <h1>{Title}</h1>{/block:Title}<br>
  1302.  
  1303. <ul class="convo">
  1304.  
  1305. {block:Lines}
  1306. <i class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}{Line}</i>
  1307. {/block:Lines}
  1308.  
  1309. </ul>
  1310.  
  1311. </div>
  1312.  
  1313. {/block:Chat}
  1314.  
  1315.  
  1316.  
  1317. <!------------------------------------------------------------ AUDIO POSTS-->
  1318.  
  1319.  
  1320. {block:Audio}
  1321. {block:AudioPlayer}
  1322.  
  1323. <div class="playbutton-container">
  1324. <div class="playbutton">
  1325. {AudioPlayerBlack}
  1326. </div>
  1327. </div>
  1328.  
  1329. <div class="playbutton-bg"></div>
  1330.  
  1331. {block:AlbumArt}
  1332. <div class="albumart"><img src="{AlbumArtURL}"></div>
  1333. {/block:AlbumArt}
  1334.  
  1335. <div class="trackinfo">
  1336.  
  1337. <div class="trackname">
  1338. {block:TrackName}{TrackName}{/block:TrackName}
  1339. </div>
  1340. <div class="artist">
  1341. {block:Artist}{Artist}{/block:Artist}
  1342. </div>
  1343. <div class="album">
  1344. {block:Album}{Album}{/block:Album}
  1345. </div>
  1346.  
  1347. </div>
  1348.  
  1349. {block:Caption}
  1350.  
  1351. <div class="caption">
  1352.  
  1353. {block:NotReblog}
  1354. {Caption}
  1355. {/block:NotReblog}
  1356.  
  1357. {block:RebloggedFrom}{block:Reblogs}
  1358. <div class="comment_container">
  1359. <div class="commenter">
  1360. <div class="avatar-box">
  1361. <div class="avatar">
  1362.  
  1363. <img src="{PortraitURL-64}" />
  1364.  
  1365.  
  1366. </div>
  1367.  
  1368. <span>
  1369. {block:HasPermalink}
  1370. <a href="{Permalink}">
  1371. {/block:HasPermalink}
  1372. <div class="username">{Username}</div>
  1373. {block:HasPermalink}</a>
  1374. {/block:HasPermalink}
  1375.  
  1376. </div>
  1377. </span>
  1378. </div>
  1379.  
  1380. <blockquote>
  1381. <div class="comment">{Body}</div>
  1382. </blockquote>
  1383. </div>
  1384. {/block:Reblogs}{/block:RebloggedFrom}
  1385. </div>
  1386. {/block:Caption}
  1387.  
  1388. {/block:AudioPlayer}
  1389. {/block:Audio}
  1390.  
  1391.  
  1392.  
  1393. <!---------------------------------------------------------------- VIDEOS -->
  1394.  
  1395.  
  1396.  
  1397. {block:Video}
  1398.  
  1399. {Video-500}
  1400.  
  1401.  
  1402. {block:Caption}
  1403.  
  1404. <div class="caption">
  1405.  
  1406. {block:NotReblog}
  1407. {Caption}
  1408. {/block:NotReblog}
  1409.  
  1410. {block:RebloggedFrom}{block:Reblogs}
  1411. <div class="comment_container">
  1412. <div class="commenter">
  1413. <div class="avatar-box">
  1414. <div class="avatar">
  1415.  
  1416. <img src="{PortraitURL-64}" />
  1417.  
  1418.  
  1419. </div>
  1420.  
  1421. <span>
  1422. {block:HasPermalink}
  1423. <a href="{Permalink}">
  1424. {/block:HasPermalink}
  1425. <div class="username">{Username}</div>
  1426. {block:HasPermalink}</a>
  1427. {/block:HasPermalink}
  1428.  
  1429. </div>
  1430. </span>
  1431. </div>
  1432.  
  1433. <blockquote>
  1434. <div class="comment">{Body}</div>
  1435. </blockquote>
  1436. </div>
  1437. {/block:Reblogs}{/block:RebloggedFrom}
  1438. </div>
  1439. {/block:Caption}
  1440.  
  1441.  
  1442. {/block:Video}
  1443.  
  1444.  
  1445.  
  1446. <!----------------------------------------------------------------- ASKS -->
  1447.  
  1448.  
  1449. {block:Answer}
  1450. <table style="padding-bottom:5px;margin-bottom:5px;">
  1451. <tr>
  1452. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  1453. <div class="question">{Question}</div>
  1454. </td>
  1455. </tr>
  1456. </table>
  1457. {Answer}
  1458. {/block:Answer}
  1459.  
  1460.  
  1461. <!--------------------------------------------------------------POST INFO -->
  1462.  
  1463. {block:Date}
  1464.  
  1465. <div class="permalink-box">
  1466. <div class="permalink">
  1467.  
  1468. <div class="date-container">
  1469. <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</a>
  1470.  
  1471.  
  1472.  
  1473. {block:NoteCount}
  1474. • <a href="{Permalink}">{NoteCount}</a> notes
  1475.  
  1476. {/block:NoteCount}
  1477. </div>
  1478.  
  1479. {block:RebloggedFrom}
  1480. <div class="source"><a href="{Permalink}">Permalink</a> •
  1481. <a href="{ReblogRootURL}">source</a></div>
  1482. {/block:RebloggedFrom}
  1483.  
  1484. <div class="share">
  1485. <div class="reblog">
  1486. <a href="{ReblogURL}" target="_blank"><span class="fas fa-sync-alt"></span></a>
  1487. <div class="like"> <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#010101"> <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></svg>
  1488.  
  1489. {LikeButton size="14"}
  1490.  
  1491.  
  1492.  
  1493. </div>
  1494. </div>
  1495. </div>
  1496. </div>
  1497. {/block:Date}
  1498.  
  1499.  
  1500.  
  1501.  
  1502. <!------------------------------------------------------------------ TAGS -->
  1503.  
  1504. </div>
  1505.  
  1506.  
  1507. {block:date}
  1508.  
  1509.  
  1510. <div class="tags-container">
  1511. <div class="tags">
  1512. {block:Tags}{block:HasTags}
  1513. <a href="{TagURL}">{Tag}</a>
  1514. {/block:HasTags}{/block:Tags}
  1515. </div>
  1516. </div>
  1517.  
  1518.  
  1519. {/block:date}
  1520.  
  1521.  
  1522.  
  1523.  
  1524.  
  1525. </div>
  1526. {/block:Posts}
  1527.  
  1528.  
  1529.  
  1530.  
  1531.  
  1532.  
  1533. <!-------------------------------------------------------------------------->
  1534. <!-------------------------------------------------------------------------->
  1535. <!-------------------------------------------------------------------------->
  1536. <!-------------------------------------------------------------------------->
  1537. <!-------------------------------------------------------------------------->
  1538. <!-------------------------------------------------------------------------->
  1539. <!-------------------------------------------------------------------------->
  1540. <!-------------------------------------------------------------------------->
  1541. <!-------------------------------------------------------------------------->
  1542. <!-------------------------------------------------------------------------->
  1543.  
  1544.  
  1545.  
  1546.  
  1547.  
  1548.  
  1549.  
  1550.  
  1551. <!-------------------------------------------------------- PERMALINK PAGE -->
  1552.  
  1553. {block:PermalinkPage}
  1554. {block:PostNotes}
  1555. <div class="notes-container">
  1556. <div class="notes">
  1557. {PostNotes}
  1558. </div>
  1559. </div>
  1560. {/block:PostNotes}
  1561. {/block:PermalinkPage}
  1562.  
  1563.  
  1564. <!---------------------------------------------------------------- FOOTER -->
  1565.  
  1566. <div class="credit">
  1567. <a href="https://sacrin-themes.tumblr.com/" target="_blank" title="Sacrin-Themes">
  1568. <span class="fas fa-star" style="color:{color:accent 4};"></span></a>
  1569. </div>
  1570.  
  1571.  
  1572. {text:SCM music player}
  1573.  
  1574.  
  1575. <div class="footer"></div>
  1576.  
  1577.  
  1578. </div> <!--content-->
  1579.  
  1580. <!------------------------------------------------------------------- END -->
  1581.  
  1582. </body></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!