API tools faq
paste
Advertisement
userbru

theme 38.

userbru
Sep 28th, 2024 (edited)
793
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 69.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4.  
  5.  
  6.  
  7.  
  8. THEME BY BRU
  9.  
  10.  
  11. search: glenthemes https://git.new/glen-searchbar
  12. fonts: google
  13. icons: cappucicons, feathericons
  14.  
  15.  
  16.  
  17. -->
  18. <html>
  19. <head>
  20. <title>{Title}</title>
  21. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25. {block:Options}
  26.  
  27.  
  28.  
  29.  
  30.  
  31. <!--- general colors -->
  32.  
  33.  
  34. <meta name="color:background" content="#fff"/>
  35. <meta name="color:posts" content="#fff"/>
  36. <meta name="color:text" content="#000"/>
  37. <meta name="color:borders" content=""/>
  38. <meta name="color:select" content=""/>
  39. <meta name="color:links" content="#000" />
  40. <meta name="color:like and reblog" content=""/>
  41.  
  42.  
  43. <meta name="color:reblog header background" content=""/>
  44. <meta name="color:reblog header link" content=""/>
  45. <meta name="color:reblog header link hover" content=""/>
  46.  
  47.  
  48. <meta name="color:question background" content=""/>
  49. <meta name="color:question text" content=""/>
  50. <meta name="color:answer background" content=""/>
  51. <meta name="color:answer text" content=""/>
  52.  
  53.  
  54. <meta name="color:tags" content="#000" />
  55. <meta name="color:tag hover background" content=""/>
  56. <meta name="color:tag hover text" content=""/>
  57.  
  58.  
  59. <!---- theme controls ---->
  60.  
  61. <meta name="color:night mode button background" />
  62. <meta name="color:night mode icon color"/>
  63.  
  64. <meta name="color:day mode button background" />
  65. <meta name="color:day mode icon color"/>
  66.  
  67.  
  68. <meta name="color:theme controls background"/>
  69. <meta name="color:theme controls icon color"/>
  70.  
  71. <!--header -->
  72. <!-- background-->
  73. <meta name="color:header bg gradient 1" content=""/>
  74. <meta name="color:header bg gradient 2" content=""/>
  75. <meta name="color:header bg gradient 3" content=""/>
  76.  
  77. <meta name="color:box shadow" content=""/>
  78. <meta name="color:icon shadow" content=""/>
  79. <meta name="color:icon gradient 1" content=""/>
  80. <meta name="color:icon gradient 2" content=""/>
  81.  
  82. <meta name="color:blog title" content=""/>
  83.  
  84. <meta name="color:blog user" content=""/>
  85. <meta name="color:blog user hover" content=""/>
  86.  
  87. <meta name="color:header links" content=""/>
  88. <meta name="color:header link hover" content=""/>
  89. <meta name="color:header link background" content=""/>
  90.  
  91. <meta name="color:description text" content=""/>
  92. <meta name="color:description borders" content=""/>
  93. <meta name="color:description background" content=""/>
  94.  
  95. <meta name="color:search background" content=""/>
  96. <meta name="color:search text" content=""/>
  97. <meta name="color:search button" content=""/>
  98. <meta name="color:search hover background" content=""/>
  99. <meta name="color:search hover text" content=""/>
  100.  
  101.  
  102. <!--- night mode --->
  103.  
  104. <meta name="color:night mode theme controls bg" content=""/>
  105. <meta name="color:night mode background" content="#fff" />
  106. <meta name="color:night mode posts" content=""/>
  107. <meta name="color:night mode links" content=""/>
  108. <meta name="color:night mode hover" content=""/>
  109. <meta name="color:night mode text" content=""/>
  110. <meta name="color:night mode tags" content=""/>
  111. <meta name="color:night mode header bg" content=""/>
  112.  
  113.  
  114. <meta name="text:link 1 url" content=""/>
  115. <meta name="text:link 2 url" content=""/>
  116. <meta name="text:link 3 url" content=""/>
  117.  
  118.  
  119.  
  120. <meta name="text:desktop description" content="Write your description here."/>
  121. <meta name="text:border width" content="1px"/>
  122. <meta name="text:border radius" content="4px"/>
  123. <meta name="text:font size" content="16px" />
  124. <meta name="text:border header width" content="3px"/>
  125.  
  126. <meta name="text:search suggestion 1" content="/tagged/"/>
  127. <meta name="text:search suggestion title 1" content="search suggestion 1"/>
  128. <meta name="text:search suggestion 2" content="/tagged/"/>
  129. <meta name="text:search suggestion title 2" content="search suggestion 2"/>
  130. <meta name="text:search suggestion 3" content="/tagged/"/>
  131. <meta name="text:search suggestion title 3" content="search suggestion 3"/>
  132. <meta name="text:search suggestion 4" content="/tagged/"/>
  133. <meta name="text:search suggestion title 4" content="search suggestion 4"/>
  134.  
  135.  
  136. <meta name="image:background" content=""/>
  137. <meta name="image:header icon" content=""/>
  138.  
  139.  
  140. <meta name="if:Remove background image in night mode" content=""/>
  141. <meta name="if:full background" content=""/>
  142.  
  143.  
  144. <meta name="select:Border Style" content="dashed" title="dashed"/>
  145. <meta name="select:Border Style" content="solid" title="solid"/>
  146.  
  147.  
  148.  
  149. <meta name="select:Font" content="Roboto Flex" title="Roboto Flex" />
  150. <meta name="select:Font" content="Inter Tight" title="Inter Tight"/>
  151. <meta name="select:Font" content="Golos Text" title="Golos Text"/>
  152.  
  153. {/block:Options}
  154.  
  155. {NewPostStyles}
  156.  
  157.  
  158. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  159.  
  160.  
  161. <!-- icons -->
  162.  
  163. <link rel="stylesheet" href="https://static.tumblr.com/svdghan/wUSr83npl/tempcf.css">
  164. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  165.  
  166.  
  167.  
  168. <!--- night mode --->
  169.  
  170. <script>
  171. document.addEventListener('DOMContentLoaded', function () {
  172. const toggleButton = document.getElementById('daynight-toggle');
  173. const toggleIcon = toggleButton.querySelector('i');
  174.  
  175.  
  176. const currentTheme = localStorage.getItem('theme') || 'day';
  177.  
  178.  
  179. if (currentTheme === 'night') {
  180. document.body.classList.add('night');
  181. toggleButton.classList.add('night-mode');
  182. toggleIcon.classList.replace('cp-sun', 'cp-moon');
  183. }
  184.  
  185.  
  186. toggleButton.addEventListener('click', function () {
  187. document.body.classList.toggle('night');
  188. toggleButton.classList.toggle('night-mode');
  189.  
  190.  
  191. if (toggleIcon.classList.contains('cp-sun')) {
  192. toggleIcon.classList.replace('cp-sun', 'cp-moon');
  193. } else {
  194. toggleIcon.classList.replace('cp-moon', 'cp-sun');
  195. }
  196.  
  197.  
  198. const theme = document.body.classList.contains('night') ? 'night' : 'day';
  199. localStorage.setItem('theme', theme);
  200. });
  201. });
  202. </script>
  203.  
  204. <!-- tooltips -->
  205. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  206. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  207. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  208. <script>
  209. (function($){
  210. $(document).ready(function(){
  211. $("[title]").style_my_tooltips();
  212. });
  213. })(jQuery);
  214. </script>
  215.  
  216. <!-- tumblr controls -->
  217. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  218.  
  219. <script>
  220. $(document).ready(function(){
  221. $('.controls-button').click(function(){
  222. $('body').toggleClass('controls-click');
  223. });
  224. });
  225. </script>
  226.  
  227.  
  228. <script src="https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
  229.  
  230. <!--- search by glenthemes --->
  231. <link href="https://search-dropdown.gitlab.io/i/2.1/style.css" rel="stylesheet">
  232. <script src="https://search-dropdown.gitlab.io/i/2.1/init.min.js"></script>
  233.  
  234.  
  235.  
  236.  
  237. <!--- fonts --->
  238.  
  239. <link rel="preconnect" href="https://fonts.googleapis.com">
  240. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  241. <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Figtree:ital,wght@0,300..900;1,300..900&family=Golos+Text:[email protected]&family=Inter+Tight:ital@0;1&family=Roboto+Flex:opsz,[email protected],100..1000&display=swap" rel="stylesheet">
  242.  
  243.  
  244. <style>
  245.  
  246. * {
  247. box-sizing: border-box;
  248. }
  249. :root {
  250. --background-image: url({image:background});
  251. --background: {color:background};
  252. --accent: {AccentColor};
  253. --text: {color:text};
  254. --borders: {color:borders};
  255. --spacing: 1rem;
  256. --border-width: {text:border width};
  257. --border-radius: {text:border radius};
  258. --posts: {color:posts};
  259. --tags: {color:tags};
  260. --links: {color:links};
  261. --sidebar-links: {color:sidebar links};
  262. --search-background: {color:search background};
  263. --search-text: {color:search text};
  264. --headerimage: url({HeaderImage});
  265. --invert: invert(0);
  266. }
  267.  
  268.  
  269.  
  270. .night-mode-theme {
  271. --background: {color:night mode background};
  272. --accent: {color:night mode links};
  273. {block:ifRemoveBackgroundImageInNightMode}
  274. --background-image: url('');
  275. {/block:ifRemoveBackgroundImageInNightMode}
  276. --text: {color:night mode text};
  277. --posts: {color:night mode posts};
  278. --invert: invert(1);
  279. --links: {color:night mode links};
  280. --tags: {color:night mode tags};
  281. }
  282.  
  283. .night-mode-theme header {
  284. background:{color:night mode header bg}!important;
  285. color:{color:night mode text}!important;
  286. }
  287.  
  288. .night-mode-theme header a {
  289. color:{color:night mode links};
  290. }
  291.  
  292. .night-mode-theme .blog-title {
  293. color:{color:night mode text}!important;
  294. }
  295.  
  296. .night-mode-theme .blog-user a,.night-mode-theme .nav-container a {
  297. color:{color:night mode links}!important;
  298. }
  299.  
  300. .night-mode-theme header a:hover {
  301. background:{color:night mode hover}!important;
  302. color:{color:night mode header bg}!important;
  303. }
  304.  
  305. /* THEME CONTROLS */
  306.  
  307. .theme-controls {
  308. position: fixed;
  309. top: var(--spacing, 20px);
  310. right: var(--spacing, 20px);
  311. display: flex;
  312. flex-direction: column;
  313. align-items: center;
  314. gap: 10px;
  315. z-index: 99999999!important;
  316. }
  317.  
  318.  
  319. .theme-controls button,
  320. .theme-controls a {
  321. cursor: pointer;
  322. background: {color:theme controls background};
  323. color: {color:theme controls icon color};
  324. height: 2rem;
  325. width: 2rem;
  326. border: none!important;
  327. border-radius: 50%;
  328. display: flex;
  329. justify-content: center;
  330. align-items: center;
  331. transition: background-color 0.5s ease, transform 0.5s ease;
  332. }
  333.  
  334.  
  335. .theme-controls a::before, .theme-controls a:hover::before {
  336. height:0px;
  337. transform:scaleX(0);
  338. }
  339.  
  340. .controls-button i,
  341. #daynight-toggle i,
  342. #credit i {
  343. font-size: 1.2rem;
  344. transition: transform 0.5s ease;
  345. }
  346.  
  347.  
  348. /* TUMBLR CONTROLS */
  349.  
  350. .tmblr-iframe {
  351. z-index: 99999999!important;
  352. opacity: 0;
  353. visibility: hidden;
  354. width: 30px;
  355. position: absolute;
  356. top: 100%;
  357. left: 50%;
  358. transform: translateX(-50%) translateY(-20px);
  359. transition: all 0.5s ease;
  360. }
  361.  
  362.  
  363. body.controls-click .tmblr-iframe {
  364. opacity: 1;
  365. visibility: visible;
  366. transform: translateX(-50%) translateY(10px);
  367. }
  368.  
  369.  
  370.  
  371. /* DAY/NIGHT MODE BUTTON */
  372.  
  373. #daynight-toggle {
  374. background: {color:day mode button background};
  375. color: {color:day mode icon color};
  376. }
  377.  
  378. #daynight-toggle.night-mode {
  379. background-color: {color:night mode button background};
  380. color: {color:night mode icon color};
  381. }
  382.  
  383. #daynight-toggle.night-mode i {
  384. transform: rotate(180deg);
  385. }
  386.  
  387.  
  388.  
  389. /* CREDIT DO NOT REMOVE OR MOVE */
  390.  
  391. #credit {
  392. text-decoration: none;
  393. background: {color:theme controls background};
  394. color: {color:theme controls icon color};
  395. }
  396.  
  397. /* Hover effect for credit */
  398. #credit:hover {
  399. background: {color:night mode button background};
  400. color:{color:night mode icon color};
  401. transition: all 0.3s ease;
  402. }
  403.  
  404. /* --- TOOLTIPS --*/
  405.  
  406. #s-m-t-tooltip {
  407. z-index: 999999999!important;
  408. background: {color:description background};
  409. font-size: 13px;
  410. padding:10px;
  411. font-family:'Poppins', sans-serif;
  412. line-height: 13px;
  413. letter-spacing: 1px;
  414. border-radius:5%;
  415. border:1.5px solid {color:description borders};
  416. background-color:{color:description background};
  417. color:{color:description text};
  418. moz-border-radius-bottomright: 5px;
  419. border-bottom-right-radius: 5px;
  420. -moz-border-radius-topleft: 5px;
  421. border-top-left-radius: 5px;
  422. -moz-border-radius-bottomleft: 5px;
  423. border-bottom-left-radius: 5px;
  424. -moz-border-radius-topright: 5px;
  425. border-top-right-radius: 5px;
  426. -o-transition: all 0.3s ease-out;
  427. -webkit-transition: all 0.3s ease-out;
  428. -moz-transition: all 0.3s ease-out;
  429. text-transform: normal
  430. max-width: 150px;
  431. word-wrap: break-word;
  432. display: block;
  433. margin: 24px 14px 7px 12px;
  434. }
  435.  
  436.  
  437.  
  438. /* SCROLLBAR */
  439.  
  440. ::-webkit-scrollbar {
  441. width: 5px;
  442. background: {color:header bg gradient 1};
  443. border: 1px solid {color:borders};
  444. }
  445.  
  446. ::-webkit-scrollbar-thumb {
  447. background: {color:header bg gradient 3};
  448. border: 1px solid {color:borders};
  449. }
  450.  
  451.  
  452. body {
  453. font-family: {select:Font}, sans-serif;
  454. font-size: clamp(.92rem, {text:font size}, 20px);
  455. margin: 0;
  456. height: 100vh;
  457. color: var(--text);
  458. background: var(--background) var(--background-image) center center fixed;
  459. transition: background-color 0.5s ease, color 0.5s ease;
  460. {block:iffullbackground}
  461. background-size: cover;
  462. {/block:iffullbackground}
  463.  
  464. }
  465.  
  466.  
  467. a {
  468. color:{color:links};
  469. text-decoration: none;
  470. position:relative;
  471. border-bottom:none;
  472. }
  473.  
  474. a:hover {
  475. color: {color:tag hover background};
  476. text-decoration:none;
  477. }
  478.  
  479. a::before {
  480. content: "";
  481. position: absolute;
  482. display: block;
  483. width: 100%;
  484. height: 1px;
  485. bottom: 0;
  486. left: 0;
  487. background: linear-gradient(to right, {color:icon gradient 1}, {color:icon gradient 2});
  488. transform: scaleX(0);
  489. transition: transform 0.3s ease;
  490. }
  491.  
  492. a:hover::before {
  493. transform: scaleX(1);
  494. }
  495.  
  496.  
  497. ::selection {
  498. background:{color:select};
  499. color:{color:background};
  500. }
  501.  
  502. ::-moz-selection {
  503. background:{color:select};
  504. color:{color:background};
  505. }
  506.  
  507.  
  508. /* HEADER AND SIDEBAR */
  509.  
  510.  
  511.  
  512.  
  513. /* Header */
  514. header {
  515. margin: var(--spacing) auto;
  516. max-width: 100%;
  517. height: auto;
  518. padding: 5%;
  519. background: linear-gradient(to right, {color:header bg gradient 1}, {color:header bg gradient 2}, {color:header bg gradient 3});
  520. backdrop-filter: blur(10px);
  521.  
  522. display: flex;
  523. flex-direction: column;
  524. align-items: center;
  525. justify-content: center;
  526. text-align: center;
  527. gap: 20px;
  528.  
  529. transition: all 0.5s ease;
  530. opacity: 1;
  531. margin-top: 0px;
  532. border-bottom:1px solid {color:borders};
  533. }
  534.  
  535. header.fade-out {
  536. opacity: 0;
  537. transition: opacity 0.5s ease;
  538.  
  539. }
  540.  
  541.  
  542.  
  543. /* SIDEBAR */
  544.  
  545. header.sidebar {
  546. display: flex;
  547. flex-direction: column !important;
  548. align-items: center;
  549. justify-content: center;
  550. position: fixed;
  551. right: 0px;
  552. width: 500px;
  553. height: 100%;
  554. padding: 20px;
  555. z-index: 9999;
  556. background: linear-gradient(to right, {color:sidebar bg gradient 1}, {color:sidebar bg gradient 2});
  557. box-shadow: 0px 0px 0px {color:box shadow} !important;
  558. transform: translateX(100%);
  559. transition: all 0.5s ease;
  560. opacity: 0;
  561. border-left: 1px solid {color:borders};
  562. }
  563.  
  564.  
  565.  
  566. header.sidebar.active {
  567. transform: translateX(0);
  568. opacity: 1;
  569. }
  570.  
  571. header.sidebar .header-icon {
  572. display:flex;
  573. justify-content: center;
  574. width:100%;
  575. margin-bottom:10px;
  576. }
  577.  
  578.  
  579. header.sidebar .header-icon img {
  580. width: 70px;
  581. }
  582.  
  583. /* Navigation in sidebar */
  584. header.sidebar .nav-container {
  585. margin-top: 10px;
  586. width:auto;
  587. font-size: 16px;
  588. margin-right:10px;
  589. text-align:right;
  590. text-transform: lowercase;
  591. display: flex;
  592. align-items:center;
  593. text-align:center;
  594. margin-bottom:20px;
  595. border:none!important;
  596. flex-direction: column;
  597. }
  598.  
  599.  
  600. header.sidebar .intro-wrap {
  601. display: flex;
  602. flex-direction: column!important;
  603. align-items:center;
  604. margin-bottom:10px;
  605. margin-top: 10px;
  606. margin-right:20px;
  607. }
  608.  
  609.  
  610. header.sidebar .blog-user, .description {
  611. display:flex;
  612. margin-bottom:10px;
  613.  
  614. }
  615.  
  616. header.sidebar .blog-title {
  617. color:{color:blog title};
  618. margin-bottom:10px;
  619. }
  620.  
  621. header.sidebar .description {
  622. color:{color:description text};
  623. padding:15px!important;
  624. word-wrap:break-word;
  625. display:block;
  626. }
  627.  
  628. header.sidebar .blog-user {
  629. color:{color:blog user};
  630. }
  631.  
  632.  
  633. header.sidebar .bio {
  634. display: flex;
  635. align-items: center;
  636. margin-right:20px;
  637. }
  638.  
  639.  
  640. header.sidebar .searchblock {
  641. position:relative;
  642. top:0;
  643. margin-top:25px;
  644. left:0;
  645. margin-left:25px;
  646. z-index:69;
  647. max-width:300px;
  648. text-shadow:10%;
  649. margin-right:30px;
  650. }
  651.  
  652.  
  653. header.sidebar .searchbar-field {
  654. border:{color:borders};
  655. border-radius:3px;
  656. padding:10px;
  657. font-family:"Golos Text", sans-serif;
  658. Font-size:12px;
  659. background:{color:search background};
  660. margin-right:8px;
  661. color:{color:search text};
  662. }
  663.  
  664.  
  665. header.sidebar .searchbar-button button {
  666. border:{color:borders};
  667. border-radius:3px;
  668. padding:10px;
  669. font-family:"Figtree", sans-serif;
  670. font-size:10.5px;
  671. text-transform:uppercase;
  672. color:{color:search text};
  673. background:{color:search button};
  674. }
  675.  
  676. header.sidebar .search-suggestions {
  677. margin-top:10px;
  678. margin:10px;
  679. border:{color:borders};
  680. border-radius:3px;
  681. background:{color:search background};
  682. color:{color:search text};
  683. font-size:12px;
  684. }
  685.  
  686. header.sidebar .search-suggestions a {
  687. border-radius:5px;
  688. padding:10px;
  689. }
  690.  
  691. header.sidebar .search-suggestions a:hover {
  692. background:{color:search hover background}!important;
  693. color:{color:search hover text}!important;
  694. }
  695.  
  696.  
  697.  
  698.  
  699. /* header features */
  700.  
  701.  
  702. .header-features {
  703. width: auto;
  704. position: relative;
  705. display: flex;
  706. align-items: center;
  707. justify-content: center;
  708. margin: 0 auto;
  709. padding: 20px;
  710. text-align:left;
  711. }
  712.  
  713. /* ICON */
  714.  
  715. .header-icon {
  716. position: relative;
  717. display: inline-block;
  718. margin-right: 20px;
  719. }
  720.  
  721. .header-icon::before {
  722. content: '';
  723. position: absolute;
  724. top: 0;
  725. left: 0;
  726. right: 0;
  727. bottom: 0;
  728. border-radius: 100%;
  729. z-index: 0;
  730. box-shadow: 0px 0px 50px {color:icon shadow};
  731. }
  732.  
  733. .header-icon img {
  734. width: 120px;
  735. border-radius: 100%;
  736. position: relative;
  737. z-index: 1;
  738. display: block;
  739. margin: auto;
  740. padding: 5px;
  741. background: linear-gradient(100deg, {color:icon gradient 1}, {color:icon gradient 2});
  742. }
  743.  
  744. /* INTRO */
  745.  
  746.  
  747. .intro-wrap {
  748. padding: 20px;
  749. flex: 1;
  750. }
  751.  
  752. .blog-title {
  753.  
  754. font-family: "Archivo Black", sans-serif;
  755. font-size: 26px;
  756. margin-top:20px;
  757. margin-bottom: 10px;
  758. color: {color:blog title};
  759. text-shadow:1px 1px 1px {color:icon shadow};
  760. }
  761.  
  762. .bio {
  763. display: flex;
  764. align-items: center;
  765. gap: 15px;
  766. margin-bottom:10px; }
  767.  
  768. .description {
  769. position: relative;
  770. font-size: 14.5px;
  771. vertical-align: middle;
  772. color: {color:description text};
  773. font-family: "Inter Tight", sans-serif;
  774. font-weight: 300;
  775. text-transform:normal;
  776. margin-right:10px;
  777. padding: 15px!important;
  778. border-radius: 15px;
  779. border: 1px solid {color:description borders};
  780. background: {color:description background};
  781. margin-bottom:10px;
  782. }
  783.  
  784.  
  785. .description a {
  786. color:{color:posts};
  787. }
  788.  
  789. .description b, .description i, .description a {
  790. margin-left:5px!important;
  791. }
  792.  
  793.  
  794. .description::after {
  795. content: '';
  796. position: absolute;
  797. left: -10px;
  798. top: 55%;
  799. width: 0;
  800. height: 0;
  801. border-top: 10px solid {color:description background};
  802. border-right: 10px solid transparent;
  803. border-left: 10px solid transparent;
  804. transform: translateY(-50%);
  805. }
  806.  
  807.  
  808.  
  809.  
  810. .blog-user {
  811. font-family: "Golos Text", sans-serif;
  812. color: {color:blog user};
  813. font-size: 18px;
  814. font-weight: 600;
  815. text-shadow:1px 1px 3px {color:icon shadow};
  816. margin-bottom:10px;
  817. }
  818.  
  819. .blog-user a {
  820. text-decoration:none;
  821. color:{color:blog user};
  822. }
  823.  
  824. .blog-user a:hover {
  825. color:{color:blog user hover};
  826. transition:0.5s;
  827. }
  828.  
  829. .blog-user i:before {
  830. content:'\eca1';
  831. font-family:'cappuccicons';
  832. margin-left:2px;
  833. font-size:15px;
  834. color:{color:blog user};
  835. }
  836.  
  837.  
  838. /* NAVIGATION AND SEARCH */
  839.  
  840.  
  841. .nav-container {
  842. font-size:15px;
  843. font-weight:600;
  844. text-transform:lowercase;
  845. width:auto;
  846. border-top:1px solid {color:borders};
  847. border-bottom:1px solid {color:borders};
  848.  
  849. }
  850.  
  851. .nav-container a {
  852.  
  853. padding:5px;
  854. text-decoration:none;
  855. color:{color:header links}!important;
  856. vertical-align:middle;
  857. margin-top:5px;
  858. margin-bottom:5px;
  859.  
  860. }
  861.  
  862. .nav-container a:hover {
  863. color:{color:header link hover};
  864. transition:0.5s;
  865. background:{color:header link background};
  866. border-radius:5px;
  867. }
  868.  
  869. .nav-container i:before {
  870. content='';
  871. font-family:'cappuccicons';
  872. font-size:13.5px;
  873. }
  874.  
  875.  
  876.  
  877. .searchblock {
  878. position:relative;
  879. top:0;
  880. margin-top:25px;
  881. left:0;
  882. margin-left:25px;
  883. z-index:69;
  884. max-width:300px;
  885. text-shadow:10%;
  886. }
  887.  
  888.  
  889. .searchbar-field {
  890. border:{color:borders};
  891. border-radius:3px;
  892. padding:10px;
  893. font-family:"Golos Text", sans-serif;
  894. Font-size:12px;
  895. background:{color:search background};
  896. margin-right:8px;
  897. color:{color:search text};
  898. }
  899.  
  900.  
  901. .searchbar-button button {
  902. border:{color:borders};
  903. border-radius:3px;
  904. padding:10px;
  905. font-family:"Figtree", sans-serif;
  906. font-size:10.5px;
  907. text-transform:uppercase;
  908. color:{color:search text};
  909. background:{color:search button};
  910. }
  911.  
  912. .search-suggestions {
  913. margin-top:10px;
  914. margin:10px;
  915. border:{color:borders};
  916. border-radius:3px;
  917. background:{color:search background};
  918. color:{color:search text};
  919. font-size:12px;
  920. }
  921.  
  922. .search-suggestions a {
  923. border-radius:5px;
  924. padding:10px;
  925. }
  926.  
  927. .search-suggestions a:hover {
  928. background:{color:search hover background}!important;
  929. color:{color:search hover text}!important;
  930. }
  931.  
  932. /* search customization */
  933.  
  934. :root {
  935. --Search-Suggestions-Expand-Speed:420ms;
  936. --Search-Suggestions-HOVER-Speed:0.25s;
  937. }
  938.  
  939.  
  940.  
  941.  
  942. /** END HEADER **/
  943.  
  944.  
  945. /* POSTS */
  946.  
  947. article a {
  948. text-decoration: none;
  949. }
  950.  
  951. article a:hover {
  952. text-decoration: underline;
  953. }
  954.  
  955. article iframe, .tumblr_video_container {
  956. max-width: 100%;
  957. }
  958.  
  959.  
  960. main, .pagination {
  961. display: flex;
  962. flex-wrap: wrap;
  963. align-items: flex-start;
  964. justify-content: space-around;
  965. }
  966.  
  967. main {
  968. display: flex;
  969. flex-wrap: wrap;
  970. justify-content: space-around;
  971. max-width: 1100px;
  972. margin: auto;
  973. transition: margin-left 0.5s ease;
  974. }
  975. article {
  976. background: {color:posts};
  977. padding: 10px;
  978. border: 1px solid {color:borders};
  979. width: 100%;
  980. max-width: 540px;
  981. margin: calc(var(--spacing) * 4) auto;
  982. border-radius: 10px;
  983. background: var(--posts);
  984. transition: transform 0.5s ease;
  985. }
  986.  
  987.  
  988. main.sidebar-active {
  989. margin-right: 400px;
  990. }
  991.  
  992.  
  993. article, .pagination {
  994. width: 100%;
  995. position:relative;
  996. max-width: 540px;
  997. margin: calc(var(--spacing) * 4) auto;
  998. border: var(--border-width) solid var(--borders);
  999. border-radius: 10px;
  1000. background:var(--posts);
  1001. }
  1002.  
  1003. aside .pagination {
  1004. margin: var(--spacing) auto auto auto;
  1005. }
  1006.  
  1007. article img {
  1008. max-width: 100%;
  1009. }
  1010.  
  1011. .link-container {
  1012. padding: var(--spacing);
  1013. margin:var(--spacing);
  1014. border:var(--border-width) solid var(--borders);
  1015. border-radius: var(--border-radius);
  1016. }
  1017.  
  1018. .caption:empty, p:empty {
  1019. display:none;
  1020. }
  1021.  
  1022.  
  1023. /* REBLOG HEADER */
  1024.  
  1025. .reblog-header {
  1026. overflow: hidden;
  1027. border-bottom:1px solid {color:borders};
  1028. margin-bottom:10px;
  1029. }
  1030.  
  1031. .reblog-header-user {
  1032. display: flex;
  1033. align-items: center;
  1034. justify-content:center;
  1035. background-color:{color:reblog header background};
  1036. padding:5px;
  1037. border-radius:12px;
  1038. }
  1039.  
  1040. .reblog-header a {
  1041. color:{color:reblog header link};
  1042. text-decoration: none;
  1043. padding:5px;
  1044. font-family: "Golos Text", system-ui;
  1045. font-optical-sizing: auto;
  1046. font-weight: 700;
  1047. font-style: normal;
  1048. }
  1049.  
  1050. .reblog-header a::before, .reblog-header a:hover::before {
  1051. height:0px;
  1052. transform: scaleX(0);
  1053. }
  1054.  
  1055. .reblog-header a:hover {
  1056. color: {color:reblog header link hover};
  1057. transition: 0.3s;
  1058. text-decoration:none;
  1059. }
  1060.  
  1061.  
  1062. .reblog-header img {
  1063. width: 50px;
  1064. padding: 5px;
  1065. border-radius: 15px;
  1066. display: block;
  1067. }
  1068.  
  1069.  
  1070. .original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
  1071. padding: var(--spacing);
  1072. }
  1073.  
  1074. .reblog-content p, .reblog-content h2, .reblog-content h1 {
  1075. margin-left: var(--spacing);
  1076. margin-right: var(--spacing);
  1077. }
  1078.  
  1079. .quote-container, .replies, .question {
  1080. border: var(--border-width) solid var(--borders);
  1081. margin: var(--spacing);
  1082. }
  1083.  
  1084. .description, aside h2 {
  1085. padding: calc(var(--spacing) /2) 0;
  1086. margin: 0;
  1087. }
  1088. #search-form input {
  1089. padding: calc(var(--spacing) / 2);
  1090. width:100%;
  1091. background:var(--search-background);
  1092. margin: calc(var(--spacing) /2) 0 0 0;
  1093. border:var(--border-width) solid var(--borders);
  1094. border-radius:var(--border-radius);
  1095. color:var(--search-text);
  1096. }
  1097. ::placeholder {
  1098. color:var(--search-text);
  1099. }
  1100.  
  1101. .post-info, .contained {
  1102. display: flex;
  1103. flex-wrap: wrap;
  1104. align-items: center;
  1105. justify-content: space-between;
  1106. }
  1107.  
  1108.  
  1109. .post-info {
  1110. font-size: 16px;
  1111. display: flex;
  1112. align-items: center;
  1113. padding:10px;
  1114. margin-top:20px;
  1115. border-top:1px solid {color:borders};
  1116.  
  1117. }
  1118.  
  1119. .post-info a {
  1120. text-decoration: none;
  1121. display: flex;
  1122. align-items: center;
  1123. margin-right:10px;
  1124. }
  1125.  
  1126. .post-info a:hover {
  1127. text-decoration:none;
  1128. color:{color:reblog header link hover};
  1129. transition:0.5s ease;
  1130. }
  1131.  
  1132.  
  1133. .post-notes {
  1134. padding: 10px;
  1135. }
  1136.  
  1137. .post-notes ol {
  1138. list-style-type: none;
  1139. padding-left: 0;
  1140. padding:10px;
  1141. }
  1142.  
  1143. .post-notes ol li::before {
  1144. content: '◦ ';
  1145. color: {color:reblog header background};
  1146. margin-right:5px;
  1147. }
  1148.  
  1149. .post-notes img {
  1150. width:20px;
  1151. border-radius:100%;
  1152. }
  1153.  
  1154. .post-notes li {
  1155. margin-bottom:5px;
  1156. }
  1157.  
  1158. .post-notes a {
  1159. font-weight:bold;
  1160. margin-right:5px;
  1161. }
  1162.  
  1163.  
  1164.  
  1165. .note-info {
  1166. font-size: 15px;
  1167. display: flex;
  1168. align-items: center;
  1169. text-transform:lowercase;
  1170. }
  1171.  
  1172. .note-info a {
  1173. margin-right: 5px;
  1174. font-weight:bold;
  1175. }
  1176.  
  1177.  
  1178.  
  1179.  
  1180. /* PINNED POST */
  1181.  
  1182. .pinned {
  1183. color:{color:blog title};
  1184. font-weight:bold;
  1185. font-size:15px;
  1186. text-transform:uppercase;
  1187. font-family:'Inter Tight', sans-serif;
  1188. }
  1189. .pinned-default {
  1190. padding:var(--spacing);
  1191. }
  1192.  
  1193. .pinned i:before{
  1194. content='\ebf5'
  1195. font-family:'cappuccicons';
  1196. margin-right:5px;
  1197. border:2px solid {color:borders};
  1198. padding:10px;
  1199. border-radius:100%;
  1200. font-family:16px;
  1201. background:{color:theme controls background};
  1202. color:{color:theme controls icon color};
  1203. }
  1204.  
  1205.  
  1206. /* LIKE AND REBLOG BUTTONS */
  1207.  
  1208.  
  1209. .controls {
  1210. display: flex;
  1211. align-items: center;
  1212. }
  1213.  
  1214. .controls a {
  1215. display: inline-flex;
  1216. align-items: center;
  1217. color: {color:like and reblog}!important;
  1218. padding: 5px;
  1219. width: 25px;
  1220. height: 25px;
  1221. }
  1222.  
  1223. .controls a:hover {
  1224. color: {color:header bg gradient 1};
  1225. text-decoration:none;
  1226. }
  1227.  
  1228.  
  1229.  
  1230. .controls .reblog {
  1231. opacity: .93;
  1232. }
  1233.  
  1234. .controls .like .liked + svg {
  1235. opacity: 1;
  1236. }
  1237.  
  1238. .controls .like .liked + svg path {
  1239. fill: {color:night mode button background};
  1240. }
  1241.  
  1242. .controls .like .like_button {
  1243. position: relative;
  1244. }
  1245.  
  1246. .controls .like .like_button iframe {
  1247. position: absolute;
  1248. top: 0;
  1249. left: 0;
  1250. bottom: 0;
  1251. right: 0;
  1252. z-index: 2;
  1253. opacity: 0;
  1254. color: {color:like and reblog};
  1255. }
  1256.  
  1257.  
  1258. .controls a::before, .controls a:hover::before {
  1259. height:0px;
  1260. transform:scaleX(0);
  1261. }
  1262.  
  1263.  
  1264. .pages-container, .nav-container {
  1265. margin: calc(var(--spacing) /4) 0;
  1266. }
  1267. .pages-container a, .nav-container a, .pagination a {
  1268. display: inline-block;
  1269. margin-right: .4rem;
  1270. color: var(--text);
  1271. text-decoration:none;
  1272. }
  1273.  
  1274.  
  1275.  
  1276.  
  1277.  
  1278. .tags a {
  1279. font-family:'Golos Text';
  1280. margin-right:10px;
  1281. }
  1282.  
  1283. .tags a:hover {
  1284. color:{color:tag hover text}!important;
  1285. background:{color:tag hover background}!important;
  1286. border-radius:5%;
  1287. text-decoration:none!important;
  1288. transition:0.5s ease;
  1289. }
  1290.  
  1291. .tags {
  1292. padding:10px;
  1293. color:{color:tags};
  1294. }
  1295.  
  1296. .pages-container a {
  1297. font-weight:bold;
  1298. color:var(--accent);
  1299. }
  1300.  
  1301. .reblogs a, .caption a {
  1302. color:var(--accent);
  1303. }
  1304.  
  1305. .tumblr_audio_player {
  1306. width: 100%;
  1307. }
  1308.  
  1309. @media only screen and (max-width: 1100px) {
  1310. main, .contained main, section {
  1311. width: 100%;
  1312. height: auto;
  1313. }
  1314.  
  1315. article {
  1316. max-width:90%;
  1317. margin: var(--spacing) auto;
  1318. }
  1319.  
  1320. .grid section {
  1321. column-count: 1;
  1322. }
  1323.  
  1324.  
  1325. header.sidebar {
  1326. display:none;
  1327.  
  1328. }
  1329.  
  1330. }
  1331.  
  1332. .screen-reader {
  1333. border: 0;
  1334. clip: rect(1px, 1px, 1px, 1px);
  1335. clip-path: inset(50%);
  1336. height: 1px;
  1337. margin: -1px;
  1338. overflow: hidden;
  1339. padding: 0;
  1340. position: absolute;
  1341. width: 1px;
  1342. word-wrap: normal !important;
  1343. }
  1344.  
  1345.  
  1346. /* asks */
  1347.  
  1348. .question, .replies {
  1349. margin-top:20px;
  1350. border-radius: 24px;
  1351. padding:16px;
  1352. position:relative;
  1353. width:70%;
  1354. margin-left:50px;
  1355. font-family:"Inter Tight", sans-serif;
  1356. border:none!important;
  1357. }
  1358.  
  1359. .question {
  1360. background:{color:question background};
  1361. color:{color:question text};
  1362. }
  1363.  
  1364. .replies {
  1365. background:{color:answer background};
  1366. color:{color:answer text};
  1367. margin-left:15%;
  1368.  
  1369.  
  1370. }
  1371.  
  1372. .replies a {
  1373. color:{color:answer link};
  1374. }
  1375.  
  1376.  
  1377. .question:before, .question:after {
  1378. background:{color:question background};
  1379. color:{color:question text};
  1380. }
  1381.  
  1382. .night-mode-theme .replies:after, .night-mode-theme .question:after {
  1383. background:{color:night mode posts};
  1384. }
  1385.  
  1386.  
  1387. .question:before, .replies:before {
  1388. content:"";
  1389. position: absolute;
  1390. height: 22px;
  1391. width: 22px;
  1392. border-bottom-right-radius: 30px;
  1393. bottom: 0;
  1394. }
  1395.  
  1396. .question:before {
  1397. left: -8px;
  1398. }
  1399.  
  1400. .question:after {
  1401. left: -12px;
  1402. }
  1403. .question:after, .replies:after {
  1404. content:"";
  1405. position: absolute;
  1406. z-index: 1;
  1407. width: 12px;
  1408. height: 22px;
  1409. background:{color:question background};
  1410. border-bottom-right-radius: 24px;
  1411. bottom: 0;
  1412. background: {color:posts};
  1413. }
  1414.  
  1415.  
  1416. .replies:after {
  1417. right:-12px;
  1418. transform: scaleX(-1);
  1419. }
  1420.  
  1421. .replies:before {
  1422. right:-10px;
  1423. transform: scaleX(-1);
  1424. background:{color:answer background};
  1425. }
  1426.  
  1427. .asker {
  1428. color:{color:links};
  1429. font-weight:bold;
  1430. display:flex;
  1431. align-items:center;
  1432. justify-content:center;
  1433. }
  1434.  
  1435. .asker a {
  1436. margin-left:0;
  1437. }
  1438.  
  1439. .asker a:hover {
  1440. text-decoration:none;
  1441. color:{color:reblog header link hover};
  1442. }
  1443.  
  1444. .asker img {
  1445. width:40px;
  1446. margin-right:5px;
  1447. border-radius:10px;
  1448. vertical-align:middle;
  1449. }
  1450.  
  1451. .date {
  1452. text-align:center;
  1453. margin-bottom:30px;
  1454. }
  1455.  
  1456.  
  1457. /* spotify links */
  1458.  
  1459. iframe[src*='open.spotify.com'][src*='track'],
  1460. figure[data-npf*='open.spotify.com'][data-npf*='track'] {
  1461. display: flex;
  1462. justify-content: center;
  1463. align-items: center;
  1464. height: 80px !important;
  1465. width: 400px;
  1466. margin: 0 auto;
  1467. }
  1468.  
  1469.  
  1470. .tmblr-full > .audio-caption .audio-details {
  1471. background:{color:search background};
  1472. color:{color:search text};
  1473. padding:10px;
  1474. margin-bottom:10px;
  1475. border-radius:10px;
  1476. }
  1477.  
  1478.  
  1479. img.album-cover {
  1480. margin-left:10px;
  1481. margin-bottom:10px;
  1482. border-radius:10px;
  1483. }
  1484.  
  1485.  
  1486. {CustomCSS}
  1487. </style>
  1488. </head>
  1489.  
  1490. <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">
  1491.  
  1492.  
  1493.  
  1494. <div class="theme-controls">
  1495.  
  1496. <button class="controls-button">
  1497. <i class="cp cp-cog">
  1498. </i>
  1499. </button>
  1500.  
  1501. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class="cp cp-deer"></i></a>
  1502.  
  1503.  
  1504. <button id="daynight-toggle">
  1505. <i class="cp cp-sun"></i>
  1506. </button>
  1507.  
  1508. </div>
  1509.  
  1510.  
  1511.  
  1512.  
  1513. <header>
  1514. <div class="header-features">
  1515.  
  1516. <div class="header-icon">
  1517. <img src="{image:header icon}">
  1518. </div>
  1519. <div class="intro-wrap">
  1520. <div class="blog-title">{Title}</div>
  1521. <div class="bio">
  1522. <div class="blog-user"><a href="">@{name}</a> <i class="cp cp-stars-o"></i>
  1523.  
  1524. </div>
  1525. <div class="description">{text:desktop description}</div>
  1526. </div>
  1527.  
  1528. <div class="nav-container">
  1529.  
  1530. <a href="/"><i class="cp cp-home"></i> {lang:Home}</a>
  1531.  
  1532. {block:askenabled}
  1533. <a href="/ask"><i class="cp cp-envelope-alt"></i> inbox</a>
  1534. {/block:askenabled}
  1535.  
  1536.  
  1537. <a href="{text:Link 1 URL}"><i class="cp cp-lemon"></i> Link 1</a>
  1538. <a href="{text:Link 2 URL}"><i class="cp cp-mushroom"></i> Link 2</a>
  1539. <a href="{text:Link 3 URL}"><i class="cp cp-orange"></i> Link 3</a>
  1540.  
  1541. </div>
  1542.  
  1543.  
  1544. <!--- search --->
  1545.  
  1546.  
  1547. <!-----
  1548.  
  1549. switch the emojis that appear by looking for the emoji you want and copying/pasting it before {text:search suggestion title 1}
  1550.  
  1551. here's where to find them: https://html-css-js.com/html/character-codes/
  1552.  
  1553.  
  1554. ---->
  1555.  
  1556. <form class="searchblock" action="/search" method="get">
  1557.  
  1558. <input class="searchbar-field" type="text" name="q" value="{SearchQuery}" placeholder="Looking for something?">
  1559.  
  1560. <div class="searchbar-button">
  1561. <button type="submit">Search</button>
  1562. </div>
  1563.  
  1564. <div class="search-suggestions-wrapper">
  1565. <div class="search-suggestions">
  1566. <a href="{text:search suggestion 1}">🧡 {text:search suggestion title 1}</a>
  1567. <a href="{text:search suggestion 2}">💛 {text:search suggestion title 2} </a>
  1568. <a href="{text:search suggestion 3}">🍊{text:search suggestion title 3}</a>
  1569. <a href="{text:search suggestion 4}">🍋 {text:search suggestion title 4}</a>
  1570. </div>
  1571. </div>
  1572. </form>
  1573.  
  1574.  
  1575. </div>
  1576.  
  1577. </div>
  1578. </header>
  1579.  
  1580.  
  1581. <main>
  1582. <section>
  1583. {block:SearchPage}
  1584. <article>
  1585. <div class="reblogs">{lang:Found SearchResultCount results for SearchQuery}</div>
  1586. </article>
  1587. {/block:SearchPage}
  1588. {block:TagPage}
  1589. <article>
  1590. <div class="reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
  1591. </article>
  1592. {/block:TagPage}
  1593. {block:DayPage}
  1594. <article>
  1595. <div class="reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
  1596. </article>
  1597. {/block:DayPage}
  1598. {block:Posts}
  1599. <!-- {block:NoRebloggedFrom}
  1600. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1601. {/block:NoRebloggedFrom} -->
  1602. {block:ContentSource}<!-- {SourceURL}
  1603. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1604. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1605. {/block:ContentSource}
  1606.  
  1607.  
  1608.  
  1609. <article id="post-{PostID}">
  1610.  
  1611. <!--- PINNED POST --->
  1612.  
  1613. {block:PinnedPostLabel}
  1614.  
  1615. <div class="pinned pinned-default">
  1616.  
  1617. <i class="cp cp-pin"></i>
  1618.  
  1619. pinned
  1620.  
  1621. </div>
  1622. {/block:PinnedPostLabel}
  1623.  
  1624.  
  1625. {block:RebloggedFrom}
  1626.  
  1627. <div class="reblog-header">
  1628.  
  1629. <div class="reblog-header-user">
  1630.  
  1631. <img src="{ReblogRootPortraitURL-64}">
  1632.  
  1633.  
  1634. <a href="{permalink" {block:isdeactivated}class="inactive"{/block:isdeactivated}> @{ReblogRootName} </a>
  1635. </div>
  1636.  
  1637. </a>
  1638. </div>
  1639. {/block:RebloggedFrom}
  1640. {block:Photo}
  1641. <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos">
  1642. {/block:Photo}
  1643.  
  1644. {block:Photoset}
  1645. {Photoset}
  1646. {/block:Photoset}
  1647.  
  1648. {block:Panorama}
  1649. <img src="{photourl-panorama}" alt="{photoalt}">
  1650. {/block:Panorama}
  1651.  
  1652. {block:Quote}
  1653. <div class="quote-container">
  1654. <div class="quote">
  1655. "{Quote}"
  1656. </div>
  1657. <div class="source">
  1658. -{Source}
  1659. </div>
  1660. </div>
  1661. {/block:Quote}
  1662.  
  1663. {block:Chat}
  1664. <ul class="chat">
  1665. {block:Lines}
  1666. <li>
  1667. {block:Label}{Label}{/block:Label}
  1668. {Line}
  1669. </li>
  1670. {/block:Lines}
  1671. </ul>
  1672. {/block:Chat}
  1673.  
  1674. {block:link}
  1675. <div class="link-container">
  1676. <a href="{URL}">
  1677. {Name}
  1678. </a>
  1679. </div>
  1680. {/block:link}
  1681.  
  1682. {block:Video}
  1683. {Video-700}
  1684. {/block:Video}
  1685.  
  1686. {block:Audio}
  1687. {audioembed}
  1688. {/block:Audio}
  1689.  
  1690. {block:Answer}
  1691.  
  1692. {block:Date}
  1693.  
  1694. <div class="date">
  1695.  
  1696. <b> {ShortDayOfWeek}, {MonthNumber}, {Year}</b> {12Hour}:{Minutes}{AmPm}
  1697. </div>
  1698.  
  1699. {/block:Date}
  1700.  
  1701. <div class="asker">
  1702.  
  1703. <img src="{AskerPortraitURL-40}">
  1704.  
  1705. @{Asker}
  1706.  
  1707.  
  1708.  
  1709. </div>
  1710. <div class="question">
  1711.  
  1712.  
  1713.  
  1714.  
  1715. {Question}
  1716.  
  1717. </div>
  1718.  
  1719. {block:Answerer}
  1720. <div class="replies">
  1721. {Answerer}: {Answer}
  1722. </div>
  1723. {/block:Answerer}
  1724.  
  1725.  
  1726. {block:NotReblog}
  1727.  
  1728.  
  1729.  
  1730. <div class="replies">
  1731. {Replies}
  1732. </div>
  1733.  
  1734.  
  1735. {/block:NotReblog}
  1736.  
  1737. {/block:Answer}
  1738.  
  1739.  
  1740.  
  1741.  
  1742.  
  1743. <!-- captions -->
  1744. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  1745. {block:Text}
  1746. {block:Title}<h2>{Title}</h2>{/block:Title}
  1747. {/block:Text}
  1748. {block:notreblog}
  1749. {block:caption}{Caption}{/block:caption}
  1750. {block:Text}{body}{/block:Text}
  1751. {/block:notreblog}
  1752. {block:Rebloggedfrom}
  1753. {block:Reblogs}
  1754. <div class="reblogs">
  1755. {block:IsNotOriginalEntry}
  1756. <div class="reblog-header">
  1757. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  1758. <img src={PortraitURL-64} alt="{username}"> {username}
  1759. </a>
  1760. </div>
  1761. {/block:IsNotOriginalEntry}
  1762. <div class="reblog-content">
  1763. {Body}
  1764. </div>
  1765. </div>
  1766. {/block:Reblogs}
  1767. {/block:RebloggedFrom}
  1768. </div>
  1769. {block:Date}
  1770.  
  1771.  
  1772. <!-------- POST INFO --->
  1773.  
  1774. <div class="post-info">
  1775. <div class="note-info">
  1776.  
  1777. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}"> {ShortDayOfWeek}, {ShortMonth} {DayOfMonth} {Year}</a>
  1778.  
  1779. <a href="{Permalink}#notes" title="{NoteCountWithLabel}"> +{NoteCount}</a></div>
  1780.  
  1781.  
  1782.  
  1783. <div class="controls">
  1784. <a href="{ReblogURL}" target="_blank" class="reblog">
  1785. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 361.095 361.095">
  1786. <g>
  1787. <g>
  1788. <path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333 c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5 s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733 C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617 c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6 c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z" fill="{color:like and reblog}"/>
  1789. </g>
  1790. </g>
  1791. </svg>
  1792. </a>
  1793. <a href="#" class="like">{LikeButton}
  1794. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 442.403 442.403">
  1795. <g>
  1796. <g>
  1797. <path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z" fill="{color:like and reblog}"/>
  1798. </g>
  1799. </g>
  1800. </svg>
  1801. </a>
  1802. </div>
  1803. </div>{/block:Date}
  1804. {block:Hastags}
  1805. <div class="tags">
  1806. {block:Tags}
  1807. <a href="{TagURL}">#{Tag}</a>
  1808. {/block:Tags}
  1809. </div>
  1810. {/block:Hastags}
  1811.  
  1812. <div class="post-notes">
  1813. {PostNotes}
  1814.  
  1815. </div>
  1816. </article>
  1817. {/block:Posts}
  1818.  
  1819. {block:Pagination}
  1820. <div class="pagination flex centered">
  1821. {block:previouspage}
  1822. <a href="{previouspage}">Prev</a>
  1823. {/block:previouspage}
  1824. {block:JumpPagination length="5"}
  1825. {block:CurrentPage}
  1826. <span class="current-page">
  1827. {PageNumber}
  1828. </span>
  1829. {/block:CurrentPage}
  1830. {block:JumpPage}
  1831. <a href="{URL}">
  1832. {PageNumber}
  1833. </a>
  1834. {/block:JumpPage}
  1835. {/block:JumpPagination}
  1836. {block:nextpage}
  1837. <a href="{nextpage}">Next</a>
  1838. {/block:nextpage}
  1839. </div>
  1840. {/block:Pagination}
  1841. </section></main>
  1842. </body>
  1843.  
  1844. <script>
  1845. window.addEventListener('scroll', function() {
  1846. const header = document.querySelector('header');
  1847. const main = document.querySelector('main');
  1848.  
  1849. if (window.scrollY > 200) {
  1850. if (!header.classList.contains('sidebar')) {
  1851. header.classList.add('sidebar');
  1852. setTimeout(() => {
  1853. header.classList.add('active');
  1854. main.classList.add('sidebar-active'); // Shift main content
  1855. }, 100);
  1856. }
  1857. } else {
  1858. if (header.classList.contains('sidebar')) {
  1859. header.classList.remove('active');
  1860. main.classList.remove('sidebar-active'); // Restore main content
  1861. setTimeout(() => {
  1862. header.classList.remove('sidebar');
  1863. }, 500);
  1864. }
  1865. }
  1866. });
  1867. </script>
  1868.  
  1869.  
  1870.  
  1871. <script>
  1872. var spotsongs = document.querySelectorAll("iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']");
  1873.  
  1874. Array.prototype.forEach.call(spotsongs,function(minitrack){
  1875. minitrack.setAttribute("height","80");
  1876. });
  1877. </script>
  1878.  
  1879.  
  1880. </html>
  1881.  
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!