API tools faq
paste
Advertisement
userbru

theme 40

userbru
Dec 20th, 2024 (edited)
301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4.  
  5. <!--
  6.  
  7. theme by bru
  8.  
  9. icons: feathericons, iconsax, phosphoricons, cappuccicons
  10.  
  11. masonry: maziekeen
  12.  
  13. -->
  14.  
  15.  
  16.  
  17.  
  18. <html>
  19. <head>
  20.  
  21. <title>{Title}</title>
  22. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33. {block:Options}
  34.  
  35.  
  36. <meta name="color:background" content="#fff"/>
  37. <meta name="color:posts" content="#fff"/>
  38. <meta name="color:text" content="#000"/>
  39. <meta name="color:links" content="#000"/>
  40. <meta name="color:hover" content="#000"/>
  41. <meta name="color:tags" content="#000" />
  42. <meta name="color:sidebar links" content="{AccentColor}"/>
  43. <meta name="color:search background" content="#fff" />
  44. <meta name="color:search text" content="#000"/>
  45. <meta name="color:borders" content="#ddd"/>
  46. <meta name="color:pinned icon" content="#000"/>
  47. <meta name="color:pinned bg" content="#fff"/>
  48. <meta name="color:select" content="#"/>
  49.  
  50.  
  51.  
  52. <meta name="color:night mode button background" />
  53. <meta name="color:night mode icon color"/>
  54.  
  55. <meta name="color:day mode button background" />
  56. <meta name="color:day mode icon color"/>
  57.  
  58.  
  59. <meta name="color:theme controls background"/>
  60. <meta name="color:theme controls icon color"/>
  61.  
  62.  
  63. <meta name="color:question background" content=""/>
  64. <meta name="color:question text" content=""/>
  65. <meta name="color:answer background" content=""/>
  66. <meta name="color:answer text" content=""/>
  67.  
  68.  
  69. <meta name="color:night mode theme controls bg" content=""/>
  70. <meta name="color:night mode background" content="#0D0D0D"/>
  71. <meta name="color:night mode text" content="#fff"/>
  72. <meta name="color:night mode links" content="#fff" />
  73. <meta name="color:night mode hover" content"#fefefe"/>
  74. <meta name="color:night mode posts" content="#070707"/>
  75. <meta name="color:night mode borders" content="#4d4d4d"/>
  76. <meta name="color:night mode search bg" content="#191919"/>
  77.  
  78.  
  79. <meta name="image:background" content=""/>
  80. <meta name="image:side icon" content=""/>
  81. <meta name="image:side image" content=""/>
  82.  
  83.  
  84.  
  85. <meta name="text:desktop description" content=""/>
  86. <meta name="text:border width" content="1px"/>
  87. <meta name="text:border radius" content="4px"/>
  88. <meta name="text:font size" content="16px" />
  89.  
  90.  
  91. <meta name="text:Link 1 URL" content="Link 1 URL"/>
  92. <meta name="text:Link 1 Title" content="Link 1 Title"/>
  93. <meta name="text:Link 2 URL" content="Link 2 URL"/>
  94. <meta name="text:Link 2 Title" content="Link 2 Title"/> <meta name="text:Link 3 URL" content="Link 3 URL"/>
  95. <meta name="text:Link 3 Title" content="Link 3 Title"/>
  96. <meta name="text:Link 4 URL" content="Link 4 URL"/>
  97. <meta name="text:Link 4 Title" content="Link 4 Title"/>
  98.  
  99.  
  100. <meta name="if:Remove background image in night mode" content=""/>
  101. <meta name="if:full background" content=""/>
  102.  
  103.  
  104. {/block:Options}
  105.  
  106. {NewPostStyles}
  107.  
  108.  
  109. <!--- SCRIPTS--->
  110.  
  111.  
  112. <!--- night mode -->
  113.  
  114.  
  115. <script>
  116. document.addEventListener('DOMContentLoaded', function () {
  117. const toggleButton = document.getElementById('daynight-toggle');
  118. const toggleIcon = toggleButton.querySelector('i');
  119.  
  120.  
  121. const currentTheme = localStorage.getItem('theme') || 'day';
  122.  
  123.  
  124. if (currentTheme === 'night') {
  125. document.body.classList.add('night');
  126. toggleButton.classList.add('night-mode');
  127. toggleIcon.classList.replace('ph-sun', 'ph-moon');
  128. }
  129.  
  130.  
  131. toggleButton.addEventListener('click', function () {
  132. document.body.classList.toggle('night');
  133. toggleButton.classList.toggle('night-mode');
  134.  
  135.  
  136. if (toggleIcon.classList.contains('ph-sun')) {
  137. toggleIcon.classList.replace('ph-sun', 'ph-moon');
  138. } else {
  139. toggleIcon.classList.replace('ph-moon', 'ph-sun');
  140. }
  141.  
  142.  
  143. const theme = document.body.classList.contains('night') ? 'night' : 'day';
  144. localStorage.setItem('theme', theme);
  145. });
  146. });
  147. </script>
  148.  
  149.  
  150.  
  151. <script src="https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
  152.  
  153.  
  154. <!-- tooltips -->
  155. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  156. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  157. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  158. <script>
  159. (function($){
  160. $(document).ready(function(){
  161. $("[title]").style_my_tooltips();
  162. });
  163. })(jQuery);
  164. </script>
  165.  
  166. <!-- tumblr controls -->
  167. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  168.  
  169. <script>
  170. $(document).ready(function(){
  171. $('.controls-button').click(function(){
  172. $('body').toggleClass('controls-click');
  173. });
  174. });
  175. </script>
  176.  
  177. <!--- icons --->
  178. <link href="https://iconsax.gitlab.io/i/icons.css" rel="stylesheet">
  179. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  180. <link rel="stylesheet" href="https://static.tumblr.com/svdghan/wUSr83npl/tempcf.css">
  181. <script src="https://unpkg.com/feather-icons"></script>
  182.  
  183.  
  184.  
  185.  
  186. <!--- fonts google --->
  187. <link rel="preconnect" href="https://fonts.googleapis.com">
  188. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  189. <link href="https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Parkinsans&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  190.  
  191.  
  192. <style>
  193.  
  194.  
  195. * {
  196. box-sizing: border-box;
  197. }
  198. :root {
  199. --background-image: url({image:background});
  200. --background: {color:background};
  201. --accent: {color:links};
  202. --text: {color:text};
  203. --borders: {color:borders};
  204. --spacing: 1rem;
  205. --border-width: {text:border width};
  206. --border-radius: {text:border radius};
  207. --posts: {color:posts};
  208. --tags: {color:tags};
  209. --links: {color:links};
  210. --sidebar-links: {color:sidebar links};
  211. --search-background: {color:search background};
  212. --search-text: {color:search text};
  213. --headerimage: url({HeaderImage});
  214. --invert: invert(0);
  215. --night-mode-accent: {color:night mode accent};
  216.  
  217. }
  218.  
  219.  
  220.  
  221. .night-mode-theme body {
  222. transition:all 0.5s ease;
  223. background:{color:night mode background};
  224. color:{color:night mode text};
  225. }
  226.  
  227. .night-mode-theme a {
  228. color:{color:night mode links};
  229. }
  230.  
  231. .night-mode-theme a:hover {
  232. color:{color:night mode hover};
  233. }
  234.  
  235.  
  236. body {
  237. font-family: "Nunito Sans", serif;
  238. font-size: clamp(.92rem, {text:font size}, 20px);
  239. margin: 0;
  240. height: 100vh;
  241. color: var(--text);
  242. background: var(--background) var(--background-image) center center fixed;
  243. {block:iffullbackground}
  244. background-size: cover;
  245. {/block:iffullbackground}}
  246.  
  247.  
  248. a {
  249. color:{color:links};
  250. text-decoration:none!important;
  251. }
  252.  
  253. a:hover {
  254. color:{color:hover}!important;
  255. transition:0.5s ease;
  256. text-decoration:none!important;
  257. font-weight:bold;
  258. }
  259.  
  260. /*GENERAL: SELECTION */
  261.  
  262. ::selection {
  263. background: {color:select};
  264. color: {color:background};
  265. }
  266.  
  267. ::-moz-selection {
  268. background: {color:select};
  269. color: {color:background};
  270. }
  271.  
  272.  
  273. /* --- TOOLTIPS --*/
  274.  
  275. #s-m-t-tooltip {
  276. z-index: 999999999!important;
  277. background: {color:theme controls background};
  278. font-size: 13px;
  279. padding:10px;
  280. font-family:'Roboto', sans-serif;
  281. line-height: 13px;
  282. letter-spacing: 1px;
  283. border-radius:5%;
  284. border:none!important;
  285. background-color:{color:theme controls background};
  286. color:{color:text};
  287. moz-border-radius-bottomright: 5px;
  288. border-bottom-right-radius: 5px;
  289. -moz-border-radius-topleft: 5px;
  290. border-top-left-radius: 5px;
  291. -moz-border-radius-bottomleft: 5px;
  292. border-bottom-left-radius: 5px;
  293. -moz-border-radius-topright: 5px;
  294. border-top-right-radius: 5px;
  295. -o-transition: all 0.3s ease-out;
  296. -webkit-transition: all 0.3s ease-out;
  297. -moz-transition: all 0.3s ease-out;
  298. text-transform: normal;
  299. max-width: 150px;
  300. word-wrap: break-word;
  301. display: block;
  302. margin: 24px 14px 7px 12px;
  303. }
  304.  
  305.  
  306.  
  307. /* THEME CONTROLS */
  308.  
  309. .theme-controls {
  310. position: fixed;
  311. top: var(--spacing, 20px);
  312. right: var(--spacing, 20px);
  313. display: flex;
  314. flex-direction: column;
  315. align-items: center;
  316. gap: 10px;
  317. z-index: 99999999!important;
  318. }
  319.  
  320.  
  321. .theme-controls button,
  322. .theme-controls a {
  323. cursor: pointer;
  324. background: {color:theme controls background};
  325. color: {color:theme controls icon color};
  326. height: 2rem;
  327. width: 2rem;
  328. border: none!important;
  329. border-radius: 50%;
  330. display: flex;
  331. justify-content: center;
  332. align-items: center;
  333. transition: background-color 0.5s ease, transform 0.5s ease;
  334. }
  335.  
  336.  
  337. .theme-controls a:hover {
  338. color:{color:background}!important;
  339. }
  340.  
  341.  
  342. .theme-controls a::before, .theme-controls a:hover::before {
  343. height:0px;
  344. transform:scaleX(0);
  345. }
  346.  
  347. .controls-button i,
  348. #daynight-toggle i,
  349. #credit i {
  350. font-size: 1.2rem;
  351. transition: transform 0.5s ease;
  352. }
  353.  
  354.  
  355. /* TUMBLR CONTROLS */
  356.  
  357. .tmblr-iframe {
  358. z-index: 99999999!important;
  359. opacity: 0;
  360. visibility: hidden;
  361. width: 30px;
  362. position: absolute;
  363. top: 100%;
  364. left: 50%;
  365. transform: translateX(-50%) translateY(-20px);
  366. transition: all 0.5s ease;
  367. }
  368.  
  369.  
  370. body.controls-click .tmblr-iframe {
  371. opacity: 1;
  372. visibility: visible;
  373. transform: translateX(-50%) translateY(10px);
  374. }
  375.  
  376.  
  377.  
  378. /* DAY/NIGHT MODE BUTTON */
  379.  
  380. #daynight-toggle {
  381. background: {color:day mode button background};
  382. color: {color:day mode icon color};
  383. }
  384.  
  385. #daynight-toggle.night-mode {
  386. background-color: {color:night mode button background};
  387. color: {color:night mode icon color};
  388. }
  389.  
  390. #daynight-toggle.night-mode i {
  391. transform: rotate(180deg);
  392. }
  393.  
  394.  
  395.  
  396. /* CREDIT DO NOT REMOVE OR MOVE */
  397.  
  398. #credit {
  399. text-decoration: none;
  400. background: {color:theme controls background};
  401. color: {color:theme controls icon color};
  402. }
  403.  
  404. /* Hover effect for credit */
  405. #credit:hover {
  406. background: {color:night mode button background};
  407. color:{color:night mode icon color};
  408. transition: all 0.3s ease;
  409. }
  410.  
  411. /* --- TOOLTIPS --*/
  412.  
  413. #s-m-t-tooltip {
  414. z-index: 999999999!important;
  415. background: {color:description background};
  416. font-size: 13px;
  417. padding:10px;
  418. font-family:'Poppins', sans-serif;
  419. line-height: 13px;
  420. letter-spacing: 1px;
  421. border-radius:5%;
  422. border:1.5px solid {color:description borders};
  423. background-color:{color:description background};
  424. color:{color:description text};
  425. moz-border-radius-bottomright: 5px;
  426. border-bottom-right-radius: 5px;
  427. -moz-border-radius-topleft: 5px;
  428. border-top-left-radius: 5px;
  429. -moz-border-radius-bottomleft: 5px;
  430. border-bottom-left-radius: 5px;
  431. -moz-border-radius-topright: 5px;
  432. border-top-right-radius: 5px;
  433. -o-transition: all 0.3s ease-out;
  434. -webkit-transition: all 0.3s ease-out;
  435. -moz-transition: all 0.3s ease-out;
  436. text-transform: normal
  437. max-width: 150px;
  438. word-wrap: break-word;
  439. display: block;
  440. margin: 24px 14px 7px 12px;
  441. }
  442.  
  443.  
  444.  
  445. /* SCROLLBAR */
  446.  
  447. ::-webkit-scrollbar {
  448. width: 5px;
  449. background: {color:header bg gradient 1};
  450. border: 1px solid {color:borders};
  451. }
  452.  
  453. ::-webkit-scrollbar-thumb {
  454. background: {color:header bg gradient 3};
  455. border: 1px solid {color:borders};
  456. }
  457.  
  458.  
  459. article a {
  460. text-decoration: none;
  461. }
  462.  
  463. article a:hover {
  464. text-decoration: underline;
  465. }
  466.  
  467. article iframe, .tumblr_video_container {
  468. max-width: 100%;
  469. }
  470.  
  471.  
  472.  
  473. main, .pagination {
  474. display: flex;
  475. flex-wrap: wrap;
  476. align-items: flex-start;
  477. justify-content: space-around;
  478. }
  479.  
  480. main {
  481. max-width:1100px;
  482. margin:auto;
  483. }
  484.  
  485. article, .pagination {
  486. width: 100%;
  487. position:relative;
  488. max-width: 540px;
  489. margin: calc(var(--spacing) * 4) auto;
  490. border: var(--border-width) solid var(--borders);
  491. border-radius: var(--border-radius);
  492. background:var(--posts);
  493. }
  494. aside .pagination {
  495. margin: var(--spacing) auto auto auto;
  496. }
  497.  
  498. article img {
  499. max-width: 100%;
  500. }
  501.  
  502. .night-mode-theme article, .night-mode-theme .pagination {
  503. background:{color:night mode posts};
  504. border:1px solid {color:night mode borders};
  505. }
  506.  
  507. .link-container {
  508. padding: var(--spacing);
  509. margin:var(--spacing);
  510. border:var(--border-width) solid var(--borders);
  511. border-radius: var(--border-radius);
  512. }
  513.  
  514. .caption:empty, p:empty {
  515. display:none;
  516. }
  517.  
  518. .reblog-header a {
  519. display: flex;
  520. align-items:center;
  521. font-weight:bold;
  522. font-size:16px;
  523. }
  524.  
  525.  
  526. .reblog-header img {
  527. width:35px;
  528. height:35px;
  529. margin-right:10px;
  530. border-radius:10px;
  531. }
  532.  
  533.  
  534. .original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
  535. padding: var(--spacing);
  536. }
  537.  
  538. .post-info a {
  539. color:{color:links};
  540. font-weight:bold;
  541. }
  542.  
  543. .post-info {
  544. text-transform:lowercase!important;
  545. }
  546.  
  547. /* MASONRY */
  548. .masonry-navigation {
  549. width: 100%;
  550. font-family:'Work Sans', sans-serif;
  551. border-bottom: 1px solid {color:borders};
  552. margin-bottom:15px;
  553. font-weight:400;
  554. }
  555.  
  556. .masonry-navigation:last-child {
  557. border:none;
  558. }
  559.  
  560. .masonry-navigation-item.one-column {
  561. width: 100%;
  562. padding: 0 5px;
  563. margin-bottom: 10px;
  564. }
  565.  
  566. .masonry-navigation-item.one-column ul {
  567. display: flex;
  568. flex-wrap: wrap;
  569. margin: 0;
  570. padding: 0;
  571. }
  572.  
  573.  
  574. .masonry-navigation-item.one-column ul li {
  575. margin: 4px 15px;
  576. padding: 0;
  577. }
  578.  
  579.  
  580. .masonry-navigation-item.two-columns {
  581. width: 240px;
  582. padding: 0 5px;
  583. margin-bottom: 10px;
  584. }
  585.  
  586.  
  587. .masonry-navigation-item.three-columns {
  588. width: 160px;
  589. padding: 0 5px;
  590. margin-bottom: 10px;
  591. }
  592.  
  593.  
  594. .masonry-navigation-item.scroll {
  595. height:215px;
  596. overflow-y: scroll;
  597. }
  598.  
  599. /* asks */
  600.  
  601. .question, .replies {
  602. margin-top:20px;
  603. border-radius: 24px;
  604. padding:16px;
  605. position:relative;
  606. width:80%;
  607. margin-left:50px;
  608. font-family:"Parkinsans", sans-serif;
  609. border:none!important;
  610. }
  611.  
  612. .question {
  613. background:{color:question background};
  614. color:{color:question text};
  615. }
  616.  
  617. .replies {
  618. background:{color:answer background};
  619. color:{color:answer text};
  620. margin-left:15%;
  621.  
  622.  
  623. }
  624.  
  625. .replies a {
  626. color:{color:answer link};
  627. }
  628.  
  629.  
  630. .question:before, .question:after {
  631. background:{color:question background};
  632. color:{color:question text};
  633. }
  634.  
  635. .night-mode-theme .replies:after, .night-mode-theme .question:after {
  636. background:{color:night mode posts};
  637. }
  638.  
  639.  
  640. .question:before, .replies:before {
  641. content:"";
  642. position: absolute;
  643. height: 22px;
  644. width: 22px;
  645. border-bottom-right-radius: 30px;
  646. bottom: 0;
  647. }
  648.  
  649. .question:before {
  650. left: -8px;
  651. }
  652.  
  653. .question:after {
  654. left: -12px;
  655. }
  656. .question:after, .replies:after {
  657. content:"";
  658. position: absolute;
  659. z-index: 1;
  660. width: 12px;
  661. height: 22px;
  662. background:{color:question background};
  663. border-bottom-right-radius: 24px;
  664. bottom: 0;
  665. background: {color:posts};
  666. }
  667.  
  668.  
  669. .replies {
  670. text-align:right;
  671. }
  672.  
  673. .replies:after {
  674. right:-12px;
  675. transform: scaleX(-1);
  676. }
  677.  
  678. .replies:before {
  679. right:-10px;
  680. transform: scaleX(-1);
  681. background:{color:answer background};
  682. }
  683.  
  684. .asker {
  685. color:{color:links};
  686. font-weight:bold;
  687. display:flex;
  688. align-items:center;
  689. justify-content:center;
  690. }
  691.  
  692. .asker a {
  693. margin-left:0;
  694. }
  695.  
  696. .asker a:hover {
  697. text-decoration:none;
  698. color:{color:hover};
  699. transition: 0.5s ease;
  700. }
  701.  
  702. .asker img {
  703. width:40px;
  704. margin-right:5px;
  705. border-radius:10px;
  706. vertical-align:middle;
  707. }
  708.  
  709. .date {
  710. text-align:center;
  711. margin-bottom:30px;
  712. margin-top:20px;
  713. }
  714.  
  715. /* AUDIO POSTS */
  716.  
  717. .tumblr_audio_player {
  718. width: 100%;
  719. }
  720.  
  721. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  722. height:80px!important;
  723. margin-bottom:10px;
  724. }
  725.  
  726.  
  727. img.album-cover {
  728. border-radius:10px;
  729. margin-bottom:10px;
  730. margin-right:10px;
  731. }
  732.  
  733.  
  734.  
  735. .reblog-content p, .reblog-content h2, .reblog-content h1 {
  736. margin-left: var(--spacing);
  737. margin-right: var(--spacing);
  738. }
  739.  
  740. .quote-container {
  741. border: var(--border-width) solid var(--borders);
  742. margin: var(--spacing);
  743. }
  744.  
  745. .description, aside h2 {
  746. padding: calc(var(--spacing) /2) 0;
  747. margin: 0;
  748. }
  749.  
  750.  
  751. #search-form input {
  752. padding: calc(var(--spacing) / 2);
  753. text-transform:lowercase;
  754. width: 100%;
  755. background: var(--search-background);
  756. margin: calc(var(--spacing) / 2) 0 0 0;
  757. border-radius: var(--border-radius);
  758. border:1px solid {color:borders};
  759. color: {color:text};
  760. outline: none;
  761. }
  762.  
  763. #search-form input:focus {
  764. outline: none;
  765. }
  766.  
  767. .night-mode-theme #search-form input {
  768. background: {color:night mode search bg};
  769. border: 1px solid {color:night mode borders};
  770. outline: none;
  771. }
  772.  
  773. ::placeholder {
  774. color: {color:borders};
  775. }
  776.  
  777.  
  778.  
  779.  
  780. .post-info, .like-and-reblog, .contained {
  781. display: flex;
  782. flex-wrap: wrap;
  783. align-items: center;
  784. justify-content: space-between;
  785. }
  786. .pinned {
  787. background:{color:theme controls background};
  788. font-weight:bold;
  789. color:{color:text};
  790. text-align:center;
  791. }
  792.  
  793. .pinned i {
  794. background:{color:pinned bg};
  795. border-radius:50%;
  796. font-size:13px;
  797. padding:5px;
  798. color:{color:pinned icon};
  799. }
  800.  
  801. .pinned-default {
  802. padding:var(--spacing);
  803. }
  804.  
  805. .like-and-reblog i {
  806. display:inline-flex;
  807. justify-content:space-between;
  808. margin:5px!important;
  809. }
  810.  
  811. .reblog-button i {
  812. font-size:1.3em;
  813. color:transparent;
  814. -webkit-text-stroke-width: 1px;
  815. -webkit-text-stroke-color: {color:links};
  816. transition: all 0.3s ease;
  817. }
  818.  
  819. .night-mode-theme .reblog-button i {
  820. -webkit-text-stroke-color: {color:night mode links};
  821. transition: all 0.3s ease;
  822. }
  823.  
  824.  
  825.  
  826.  
  827. .like-button .like_button iframe {
  828. position: absolute;
  829. top: 0;
  830. left: 0;
  831. right: 0;
  832. bottom: 0;
  833. z-index: 2;
  834. opacity: 0;
  835. width: 100%;
  836. height: 100%;
  837. }
  838.  
  839.  
  840. .like-button {
  841. position: relative;
  842. display: inline-flex;
  843. justify-content: center;
  844. align-items: center;
  845. }
  846.  
  847.  
  848. .like-button .actual-button i {
  849. font-size: 1.3em;
  850. color: transparent;
  851. -webkit-text-stroke-width: 1px;
  852. -webkit-text-stroke-color: {color:links};
  853. transition: all 0.3s ease;
  854. }
  855.  
  856.  
  857. .like-button:hover .actual-button i {
  858. -webkit-text-stroke-color: {color:links};
  859. }
  860.  
  861.  
  862. .like_button.liked + .actual-button i {
  863. -webkit-text-stroke-color: transparent;
  864. background: {color:night mode hover};
  865. -webkit-background-clip: text;
  866. -webkit-text-fill-color: transparent;
  867. }
  868.  
  869. /* night mode */
  870.  
  871. .night-mode-theme .like-button .actual-button i {
  872. -webkit-text-stroke-color: {color:night mode links};
  873. }
  874.  
  875.  
  876. .night-mode-theme .like-button:hover .actual-button i {
  877. -webkit-text-stroke-color: {color:night mode links};
  878. }
  879.  
  880.  
  881. .night-mode-theme .like_button.liked + .actual-button i {
  882. background: {color:night mode hover};
  883.  
  884. }
  885.  
  886. aside {
  887. width: calc(30% - calc(var(--spacing) * 2));
  888. height:100vh;
  889. position: sticky;
  890. top: 0;
  891. }
  892.  
  893. .side-image {
  894. margin-top:280px;
  895. width:300px;
  896. }
  897.  
  898. .side-image img {
  899. border-radius:10px;
  900. }
  901.  
  902. .blog-title {
  903. font-family: {TitleFont};
  904. }
  905.  
  906. .username {
  907. display: flex;
  908. align-items: center;
  909. gap:5px;
  910. margin-top:-60px;
  911. }
  912.  
  913. .username img {
  914. width:70px!important;
  915. border-radius: 50%;
  916. margin-right: 12px;
  917. }
  918.  
  919. .username .text-container {
  920. display: flex;
  921. flex-direction: column;
  922. }
  923.  
  924. .username .blog-title {
  925. font-size: 18px;
  926. font-family: "Parkinsans", serif;
  927. font-weight: bold;
  928. margin: 0;
  929. color: {color:text};
  930. margin-right:10px;
  931. }
  932.  
  933. .username a {
  934. margin-right:10px;
  935. text-decoration: none;
  936. font-weight: 600;
  937. color: {color:links};
  938. font-size: 17px;
  939. margin-top: 4px;
  940. font-family: "Fredoka", serif;
  941.  
  942. }
  943.  
  944. .username a:hover {
  945. color:{color:hover};
  946. transition:0.5s ease;
  947. }
  948.  
  949.  
  950.  
  951. .sidebar-container {
  952. margin: calc(var(--spacing) * 4) auto 0 auto;
  953. border: var(--border-width) solid var(--borders);
  954. padding:var(--spacing);
  955. max-width: 300px;
  956. margin-top:70px;
  957. border-radius: var(--border-radius);
  958. }
  959. .sidebar-style-dash {
  960. padding:0;
  961. text-align:center;
  962. }
  963.  
  964. .sidebar-style-dash .pagination {
  965. border:0 solid transparent;
  966. }
  967. .sidebar-style-dash :is(h2, div){
  968. padding:var(--spacing);
  969. }
  970. .sidebar-style-dash h2 + div, .sidebar-style-dash div + div {
  971. padding-top:0;
  972. }
  973.  
  974. .sidebar-style-bubble {
  975. padding: 0;
  976. border: 0;
  977. background:transparent;
  978. }
  979.  
  980. .bubble {
  981. display:flex;
  982. flex-wrap:wrap;
  983. align-items:center;
  984. }
  985.  
  986. .bubble-desc {
  987. border:var(--border-width) solid var(--borders);
  988. padding: var(--spacing);
  989. width:100%;
  990. background:var(--posts);
  991. border-radius:.6rem;
  992. border-top-left-radius:0;
  993. margin:var(--spacing) 0;
  994. }
  995.  
  996. .night-mode-theme .bubble-desc {
  997. background:{color:night mode posts};
  998. border:1px solid {color:night mode borders};
  999. }
  1000.  
  1001.  
  1002. .nav-container {
  1003. text-align:center;
  1004. width:300px;
  1005. }
  1006.  
  1007. .nav-container a {
  1008. font-size:20px;
  1009. text-align:center;
  1010. padding:5px;
  1011. color:{color:links}!important;
  1012. }
  1013.  
  1014.  
  1015. .sidebar-style-bubble img {
  1016. width:48px;
  1017. border-radius:50%;
  1018. margin-right:.4rem;
  1019. }
  1020.  
  1021. .nav-container a:hover {
  1022. color:{color:hover}!important;
  1023. transition:0.5s ease;
  1024. }
  1025.  
  1026.  
  1027.  
  1028. .night-mode-theme .nav-container a, .night-mode-theme .blog-title {
  1029. color:{color:night mode links}!important;
  1030. }
  1031.  
  1032. .night-mode-theme .nav-container a:hover{
  1033. color:{color:night mode hover}!important;
  1034. }
  1035.  
  1036.  
  1037.  
  1038.  
  1039.  
  1040. section {
  1041. width: 70%;
  1042. }
  1043.  
  1044.  
  1045.  
  1046. .reblog_button {
  1047. margin-right: .6rem;
  1048. }
  1049. .like_button {
  1050. height:20px;
  1051. }
  1052.  
  1053.  
  1054.  
  1055. .pages-container, .nav-container {
  1056. margin: calc(var(--spacing) /4) 0;
  1057. }
  1058. .pages-container a, .nav-container a, .pagination a, .tags a {
  1059. display: inline-block;
  1060. margin-right: .4rem;
  1061. color: var(--text);
  1062. text-decoration:none;
  1063. }
  1064.  
  1065. aside a {
  1066. color: var(--sidebar-links);
  1067. }
  1068.  
  1069. .tags a {
  1070. color: var(--tags);
  1071. }
  1072.  
  1073. .tags a:hover {
  1074. font-weight:normal!important;
  1075. }
  1076.  
  1077. .pages-container a {
  1078. font-weight:bold;
  1079. color:var(--accent);
  1080. }
  1081.  
  1082. .reblogs a, .caption a {
  1083. color:var(--accent);
  1084. }
  1085.  
  1086. .reblogs {
  1087. padding:10px;
  1088. }
  1089.  
  1090. .tumblr_audio_player {
  1091. width: 100%;
  1092. }
  1093.  
  1094. @media only screen and (max-width: 1100px) {
  1095. main, .contained main, section {
  1096. width: 100%;
  1097. height: auto;
  1098. }
  1099. aside, .sidebar-container{
  1100. width: 100%;
  1101. max-width:100%;
  1102. height: auto;
  1103. position:relative;
  1104. }
  1105.  
  1106. .side-image {
  1107. display:none!important;
  1108. }
  1109. .sidebar-container {
  1110. max-width:90%;
  1111. margin:var(--spacing) auto;
  1112. }
  1113.  
  1114. .nav-container {
  1115. width:100%;
  1116. }
  1117.  
  1118. article {
  1119. max-width:90%;
  1120. margin: var(--spacing) auto;
  1121. }
  1122. #side-image {display: none;}
  1123. .grid section {
  1124. column-count: 1;
  1125. }
  1126.  
  1127. }
  1128.  
  1129. .screen-reader {
  1130. border: 0;
  1131. clip: rect(1px, 1px, 1px, 1px);
  1132. clip-path: inset(50%);
  1133. height: 1px;
  1134. margin: -1px;
  1135. overflow: hidden;
  1136. padding: 0;
  1137. position: absolute;
  1138. width: 1px;
  1139. word-wrap: normal !important;
  1140. }
  1141.  
  1142.  
  1143. {CustomCSS}
  1144. </style>
  1145. </head>
  1146. <body class="default {block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  1147. <div class="theme-controls">
  1148.  
  1149. <button class="controls-button">
  1150. <i class="ph ph-gear-six"></i>
  1151. </i>
  1152. </button>
  1153.  
  1154. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class="ph ph-at"></i></a>
  1155.  
  1156.  
  1157. <button id="daynight-toggle">
  1158. <i class="ph ph-sun"></i>
  1159. </button>
  1160.  
  1161. </div>
  1162.  
  1163.  
  1164. <main>
  1165.  
  1166. <section>
  1167.  
  1168. {block:SearchPage}
  1169.  
  1170. <article>
  1171. <div class="reblogs">{lang:Found SearchResultCount results for SearchQuery}</div>
  1172. </article>
  1173. {/block:SearchPage}
  1174. {block:TagPage}
  1175. <article>
  1176. <div class="reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
  1177. </article>
  1178. {/block:TagPage}
  1179. {block:DayPage}
  1180. <article>
  1181. <div class="reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
  1182. </article>
  1183. {/block:DayPage}
  1184. {block:Posts}
  1185. <!-- {block:NoRebloggedFrom}
  1186. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1187. {/block:NoRebloggedFrom} -->
  1188. {block:ContentSource}<!-- {SourceURL}
  1189. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1190. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1191. {/block:ContentSource}
  1192. <article id="post-{PostID}">
  1193.  
  1194.  
  1195. {block:PinnedPostLabel}
  1196. <div class="pinned pinned-default">
  1197.  
  1198. <i class="ph ph-push-pin"></i>
  1199.  
  1200. </div>
  1201. {/block:PinnedPostLabel}
  1202.  
  1203.  
  1204. {block:RebloggedFrom}
  1205. <div class="reblog-header">
  1206. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  1207. <img src={ReblogRootPortraitURL-64} alt="{ReblogRootName}"> {ReblogRootName}
  1208. </a>
  1209. </div>
  1210. {/block:RebloggedFrom}
  1211. {block:Photo}
  1212. <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos">
  1213. {/block:Photo}
  1214.  
  1215. {block:Photoset}
  1216. {Photoset}
  1217. {/block:Photoset}
  1218.  
  1219. {block:Panorama}
  1220. <img src="{photourl-panorama}" alt="{photoalt}">
  1221. {/block:Panorama}
  1222.  
  1223. {block:Quote}
  1224. <div class="quote-container">
  1225. <div class="quote">
  1226. "{Quote}"
  1227. </div>
  1228. <div class="source">
  1229. -{Source}
  1230. </div>
  1231. </div>
  1232. {/block:Quote}
  1233.  
  1234. {block:Chat}
  1235. <ul class="chat">
  1236. {block:Lines}
  1237. <li>
  1238. {block:Label}{Label}{/block:Label}
  1239. {Line}
  1240. </li>
  1241. {/block:Lines}
  1242. </ul>
  1243. {/block:Chat}
  1244.  
  1245. {block:link}
  1246. <div class="link-container">
  1247. <a href="{URL}">
  1248. {Name}
  1249. </a>
  1250. </div>
  1251. {/block:link}
  1252.  
  1253. {block:Video}
  1254. {Video-700}
  1255. {/block:Video}
  1256.  
  1257. {block:Audio}
  1258. {audioembed}
  1259. {/block:Audio}
  1260.  
  1261. {block:Answer}
  1262.  
  1263. {block:Date}
  1264.  
  1265. <div class="date">
  1266.  
  1267. <b> {ShortDayOfWeek}, {DayOfMonth}/{MonthNumber}/{Year}</b> {12Hour}:{Minutes}{AmPm}
  1268. </div>
  1269.  
  1270. {/block:Date}
  1271.  
  1272. <div class="asker">
  1273.  
  1274. <img src="{AskerPortraitURL-40}">
  1275.  
  1276. @{Asker}
  1277.  
  1278.  
  1279.  
  1280. </div>
  1281. <div class="question">
  1282.  
  1283.  
  1284.  
  1285.  
  1286. {Question}
  1287.  
  1288. </div>
  1289.  
  1290. {block:Answerer}
  1291. <div class="replies">
  1292. {Answerer}: {Answer}
  1293. </div>
  1294. {/block:Answerer}
  1295.  
  1296.  
  1297. {block:NotReblog}
  1298.  
  1299.  
  1300.  
  1301. <div class="replies">
  1302. {Replies}
  1303. </div>
  1304.  
  1305.  
  1306. {/block:NotReblog}
  1307.  
  1308. {/block:Answer}
  1309. <!-- captions -->
  1310. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  1311. {block:Text}
  1312. {block:Title}<h2>{Title}</h2>{/block:Title}
  1313. {/block:Text}
  1314. {block:notreblog}
  1315. {block:caption}{Caption}{/block:caption}
  1316. {block:Text}{body}{/block:Text}
  1317. {/block:notreblog}
  1318. {block:Rebloggedfrom}
  1319. {block:Reblogs}
  1320. <div class="reblogs">
  1321. {block:IsNotOriginalEntry}
  1322. <div class="reblog-header">
  1323. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  1324. <img src={PortraitURL-64} alt="{username}"> {username}
  1325. </a>
  1326. </div>
  1327. {/block:IsNotOriginalEntry}
  1328. <div class="reblog-content">
  1329. {Body}
  1330. </div>
  1331. </div>
  1332. {/block:Reblogs}
  1333. {/block:RebloggedFrom}
  1334. </div>
  1335. {block:Date}<div class="post-info">
  1336. <div class="note-info">
  1337. <a href="{Permalink}">posted <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonth}">{ShortDayOfWeek}, {DayOfMonth} {ShortMonth} {Year}</a> with <a href="{Permalink}"> {NoteCountwithLabel}</a></div>
  1338. <div class="like-and-reblog">
  1339. <a href="{ReblogURL}" target="_blank" class="reblog-button" title="reblog">
  1340. <i class="ph ph-repeat"></i> </a>
  1341.  
  1342. <a title="like" class="like-button" href="#">{LikeButton}<span class="actual-button"><i class="ph ph-heart"></i>
  1343. </span></a>
  1344. </div>
  1345. </div>{/block:Date}
  1346. {block:Hastags}
  1347. <div class="tags">
  1348. {block:Tags}
  1349. <a href="{TagURL}">#{Tag}</a>
  1350. {/block:Tags}
  1351. </div>
  1352. {/block:Hastags}
  1353. {PostNotes}
  1354. </article>
  1355. {/block:Posts}
  1356.  
  1357. {block:Pagination}
  1358. <div class="pagination flex centered">
  1359. {block:previouspage}
  1360. <a href="{previouspage}">Prev</a>
  1361. {/block:previouspage}
  1362. {block:JumpPagination length="5"}
  1363. {block:CurrentPage}
  1364. <span class="current-page">
  1365. {PageNumber}
  1366. </span>
  1367. {/block:CurrentPage}
  1368. {block:JumpPage}
  1369. <a href="{URL}">
  1370. {PageNumber}
  1371. </a>
  1372. {/block:JumpPage}
  1373. {/block:JumpPagination}
  1374. {block:nextpage}
  1375. <a href="{nextpage}">Next</a>
  1376. {/block:nextpage}
  1377. </div>
  1378. {/block:Pagination}
  1379. </section>
  1380.  
  1381. <aside>
  1382.  
  1383.  
  1384.  
  1385.  
  1386. <div class="side-image">
  1387. <img src="{image:side image}">
  1388. </div>
  1389. <div class="sidebar-container sidebar-style-bubble">
  1390. <div class="bubble">
  1391. <div class="username">
  1392. <img src="{image:side icon}">
  1393. <div class="text-container">
  1394. {block:ShowTitle}
  1395. <div class="blog-title">{Title}</div>
  1396. {/block:ShowTitle}
  1397. <a href="/">@{name}</a>
  1398. </div>
  1399. </div>
  1400.  
  1401. <div class="bubble-desc">
  1402.  
  1403. <div class="description">{text:desktop description}</div>
  1404.  
  1405. <form action="/search" method="get" id="search-form">
  1406. <input type="text" name="q" class="query" value="" placeholder="Search">
  1407. </form></div>
  1408.  
  1409.  
  1410. </div>
  1411. </div>
  1412.  
  1413.  
  1414. <div class="nav-container">
  1415. <a href="/" title="home"><i class="ph ph-house"></i></a>
  1416. {block:askenabled}
  1417. <a href="/ask" title="inbox"><i class="ph ph-chat"></i></a>
  1418. {/block:askenabled}
  1419.  
  1420.  
  1421. <a href="{text:Link 1 URL}" title="{text:Link 1 Title}"><i class="ph ph-mouse"></i></a>
  1422.  
  1423. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}"><i class="ph ph-pencil-simple"></i></a>
  1424.  
  1425. <a href="{text:Link 3 URL}" title="{text:Link 3 Title}"><i class="ph ph-heart"></i></a>
  1426.  
  1427. <a href="{text:Link 4 URL}" title="{text:Link 4 Title}"><i class="ph ph-play-circle"></i></a>
  1428.  
  1429.  
  1430.  
  1431. </div>
  1432. </aside></main>
  1433.  
  1434.  
  1435. </body>
  1436. </html>
  1437.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!