Advertisement
userbru

theme twenty-three.

Feb 14th, 2022 (edited)
1,380
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.32 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. <link rel="shortcut icon" href="{Favicon}">
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}">
  9. {/block:Description}
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11.  
  12. <!--
  13.  
  14. code by bru
  15.  
  16. icons by font-awesome, phosphoricons, boxicons
  17. navbar by codinglab
  18. tooltips by tippy
  19. NPF fix by glenthemes
  20. fade-in by cory laviska
  21. tumblr controls, masonry by maziekeen
  22. popup by odeysseus
  23. searchbox/entries by glenthemes
  24. not found by fukuo
  25. scroll to top by paulund
  26. animated link by tobias sahlin
  27.  
  28.  
  29. -->
  30.  
  31. <meta name="color:Background" content="#fff">
  32. <meta name="color:Posts" content="#fff">
  33. <meta name="color:Sidenav" content="#000">
  34. <meta name="color:Subtitle" content="#000"/>
  35. <meta name="color:Gradient 1" content="#000"/>
  36. <meta name="color:Gradient 2" content="#fff"/>
  37. <meta name="color:Gradient 3" content="#000"/>
  38. <meta name="color:Sidelink Hover Button" content="#fff"/>
  39. <meta name="color:Text" content="#3f3f3f">
  40. <meta name="color:Borders" content="#f1f1f1">
  41. <meta name="color:Links" content="#333">
  42. <meta name="color:Hover" content="#999">
  43. <meta name="color:Asks" content="#fff">
  44. <meta name="color:Select Text" content="#f1f1f1"/>
  45. <meta name="color:Custom Scrollbar" content="#333"/>
  46. <meta name="color:Gradient 1 Tooltips" content="#ffb3b3"/>
  47. <meta name="color:Gradient 2 Tooltips" content="#ffdada"/>
  48. <meta name="color:Not Found Gradient BG 1" content="#d2c1fe"/>
  49. <meta name="color:Not Found Gradient BG 2" content="#8172aa"/>
  50. <meta name="color:Not Found Text" content="#000"/>
  51. <meta name="color:Not Found Link" content="#ffccd8"/>
  52.  
  53. <meta name="image:Sidebar Image" content=""/>
  54.  
  55. <meta name="if:Sidebar Image" content="1" />
  56.  
  57. <meta name="text:Subtitle" content="Subtitle here"/>
  58. <meta name="text:Desktop Description" content="Desktop description here"/>
  59. <meta name="text:Home Title" content="Home"/>
  60. <meta name="text:Ask Title" content="Ask"/>
  61. <meta name="text:About Title" content="About"/>
  62. <meta name="text:Link 2 Url" content="/"/>
  63. <meta name="text:Link 2 Title" content=""/>
  64. <meta name="text:Link 3 Url" content="/"/>
  65. <meta name="text:Link 3 Title" content=""/>
  66. <meta name="text:Link 4 Url" content="/"/>
  67. <meta name="text:Link 4 Title" content=""/>
  68. <meta name="text:Link 5 Url" content="/"/>
  69. <meta name="text:Link 5 Title" content=""/>
  70. <meta name="text:Link 6 Url" content="/"/>
  71. <meta name="text:Link 6 Title" content=""/>
  72. <meta name="text:Pop Up" content="/">
  73.  
  74.  
  75. <!---- ABOUT TEXT --->
  76.  
  77. <meta name="text:Name" content=""/>
  78. <meta name="text:Tracked Tag" content=""/>
  79. <meta name="text:Age" content=""/>
  80. <meta name="text:Pronouns" content=""/>
  81. <meta name="text:Sexuality" content=""/>
  82. <meta name="text:Country" content=""/>
  83. <meta name="text:Race Ethnicity" content=""/>
  84. <meta name="text:Zodiac" content=""/>
  85.  
  86.  
  87.  
  88. <!-- GOOGLE FONTS & ICON FONTS-->
  89.  
  90. <link rel="preconnect" href="https://fonts.googleapis.com">
  91. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  92. <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300&family=Poppins&display=swap" rel="stylesheet">
  93. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  94. <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  95.  
  96. <!-- SCRIPTS -->
  97.  
  98. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  99.  
  100. <!--
  101. NPF IMAGES READJUSTMENT | @glenthemes
  102. v2.0 [last updated: 2021-06-03]
  103. -->
  104. <link href="//glen-npf-2020.glitch.me/npf-override.css" rel="stylesheet">
  105. <script src="//glen-npf-2020.glitch.me/npf-evenize.js"></script>
  106.  
  107. <style type="text/css">
  108. :root {
  109. --NPF-Image-Spacing:4px;
  110. --NPF-Bottom-Gap-From-Captions:1em;
  111. }
  112. </style>
  113.  
  114. <script type="text/javascript" src="https://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  115.  
  116. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  117.  
  118. <link href="https://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  119. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  120.  
  121. <script src="https://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:200, tip_fade_speed:300 }); }); })(jQuery); </script>
  122.  
  123. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  124. $(document).ready(function(){
  125. $('.click,.fade').click(function() {
  126. $('#pop').fadeToggle();
  127. });
  128. });
  129. </script>
  130.  
  131. <script type="text/javascript">
  132. if(location.href=='https://{name}.tumblr.com/ask') location.replace('https://{name}.tumblr.com/msg');;
  133. </script>
  134.  
  135.  
  136. <style type="text/css">
  137.  
  138.  
  139.  
  140. /* NAVBAR */
  141.  
  142. nav {
  143. position: fixed;
  144. top: -10px;
  145. left: 0;
  146. height: 90px;
  147. width: 100%;
  148. z-index: 100;
  149. backdrop-filter: blur(16px) saturate(180%);
  150. -webkit-backdrop-filter: blur(16px) saturate(180%);
  151. background-color: rgba(255, 255, 255, 0.76);
  152. border: 1px solid rgba(209, 213, 219, 0.3);
  153.  
  154. }
  155.  
  156.  
  157. nav .nav-bar{
  158. position: relative;
  159. height: 100%;
  160. max-width: 1000px;
  161. width: 100%;
  162. margin: 0 auto;
  163. padding: 0 30px;
  164. display: flex;
  165. align-items: center;
  166. justify-content: space-between;
  167. }
  168.  
  169. nav .nav-bar .sidebarOpen{
  170. color: {color:text};
  171. font-size: 25px;
  172. padding: 10px;
  173. cursor: pointer;
  174. display: none;
  175. }
  176. nav .nav-bar .logo a{
  177. font-size: 25px;
  178. font-weight: 500;
  179. color: {color:text};
  180. text-decoration: none;
  181. font-family:'Poppins', sans-serif;
  182. }
  183.  
  184.  
  185. .nav-bar .nav-links{
  186. display: flex;
  187. align-items: center;
  188. }
  189.  
  190. .nav-bar .nav-links li{
  191. margin: 0 5px;
  192. list-style: none;
  193. font-family:'Poppins', sans-serif;
  194. }
  195.  
  196. .nav-links li a{
  197. position: relative;
  198. font-size: 15px;
  199. font-weight: 400;
  200. color: {color:text};
  201. text-decoration: none;
  202. padding: 10px;
  203. }
  204.  
  205. .nav-links li a::before{
  206. content: '';
  207. position: absolute;
  208. left: 50%;
  209. bottom: 0;
  210. transform: translateX(-50%);
  211. height: 6px;
  212. width: 6px;
  213. border-radius: 50%;
  214. background-color: {color:gradient 3};
  215. opacity: 0;
  216. transition: all 0.3s ease;
  217. }
  218.  
  219.  
  220. .nav-links li:hover a::before{
  221. opacity: 1;
  222. }
  223.  
  224.  
  225.  
  226. @media (max-width: 790px) {
  227. nav .nav-bar .sidebarOpen{
  228. display: block;
  229. }
  230.  
  231. .menu{
  232. position: fixed;
  233. height: 100%;
  234. width: 320px;
  235. left: -100%;
  236. top: 0;
  237. padding: 20px;
  238. backdrop-filter: blur(19px) saturate(92%);
  239. -webkit-backdrop-filter: blur(19px) saturate(92%);
  240. background-color: rgba(217, 177, 255, 0.69);
  241. border: 1px solid rgba(209, 213, 219, 0.3);
  242. z-index: 100;
  243. transition: all 0.4s ease;
  244. }
  245.  
  246. nav.active .menu{
  247. left: -0%;
  248. }
  249.  
  250. nav.active .nav-bar .navLogo a{
  251. opacity: 0;
  252. transition: all 0.3s ease;
  253. }
  254.  
  255. .menu .logo-toggle{
  256. display: block;
  257. width: 100%;
  258. display: flex;
  259. align-items: center;
  260. justify-content: space-between;
  261. }
  262.  
  263.  
  264. .nav-bar .nav-links{
  265. flex-direction: column;
  266. padding-top: 30px;
  267. width:90%;
  268. }
  269.  
  270. .nav-links li a{
  271. display: block;
  272. margin-top: 20px;
  273. }
  274. }
  275.  
  276. .about {
  277. height: 100%;
  278. width: 0;
  279. position: fixed;
  280. z-index: 9999999;
  281. top: 0;
  282. left: 0;
  283. background-color: {color:Sidenav};
  284. overflow-x: hidden;
  285. transition: 0.5s;
  286. padding-top: 60px;
  287. color:#fff;
  288. }
  289.  
  290. .about a {
  291. text-decoration: none;
  292. color:#fff;
  293. display: block;
  294. transition: 0.3s;
  295. }
  296.  
  297. .about a:hover {
  298. color: {color:gradient 2};
  299. }
  300.  
  301. .about a::before {
  302. content: "";
  303. position: justify;
  304. display: block;
  305. width:100%;
  306. height:0px;
  307. bottom: 0;
  308. left: 0;
  309. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  310. transform: scaleX(0);
  311. transition: transform 0.3s ease;
  312. }
  313.  
  314. .about a:hover::before {
  315. transform: scaleX(1);
  316. }
  317.  
  318.  
  319. .about .closebtn {
  320. position: absolute;
  321. top:0;
  322. right: 25px;
  323. font-size: 12px;
  324. margin-left: 50px;
  325. border:1px solid {color:Hover};
  326. border-radius:4px;
  327. padding:10px;
  328. }
  329.  
  330. .closebtn {
  331. margin-top:15px;
  332. }
  333.  
  334. .about-icon {
  335. width:50px;
  336. border-radius:100%;
  337. }
  338.  
  339. main {
  340. transition: margin-left .5s;
  341. padding: 16px;
  342. }
  343.  
  344. .about h3 {
  345. font-family:'Poppins',sans-serif;
  346. font-size:14px;
  347. font-weight:bold;
  348. }
  349.  
  350. .about h4 {
  351. font-family:'Manrope', sans-serif;
  352. font-size:12px;
  353. margin-top:-10px;
  354. }
  355.  
  356. .about-info {
  357. display:flex;
  358. justify-content:center;
  359. flex-wrap:wrap;
  360. gap:30px;
  361. padding:10px;
  362. }
  363.  
  364. .about-title {
  365. font-family:'Poppins',sans-serif;
  366. font-weight:bold;
  367. display: block;
  368. padding: 6px 5px 0;
  369. }
  370. .about li {
  371. list-style-type:circle;
  372. font-family:'Manrope', sans-serif;
  373. display: inline-block;
  374. padding: 5px 5px 0;
  375. }
  376.  
  377.  
  378. /* each profile box */
  379. .profile {
  380. margin-left:100px;
  381. margin-bottom: 25px;
  382. margin-top:20px;
  383. box-sizing: border-box;
  384. width:720px;
  385. outline: 1px solid {color:Hover}; /* you'll have to change the color here, or delete this line if you don't want the border */
  386. }
  387.  
  388. /* each row wrapping the first info,
  389. ex: 1 row: full name and main aliases, 2 row: birth year and species/gender */
  390. .profile-row {
  391. display: flex;
  392. justify-content: center;
  393. }
  394.  
  395. /* each info individually (name and description), full name is an info, main aliases is an info, links is an info, birth year is an info */
  396. .profile-info {
  397. width: 700px;
  398. display: inline-block;
  399. margin: 5px 15px;
  400. }
  401.  
  402. .profile-title {
  403. font-weight: bold;
  404. padding: 0 5px 0;
  405. margin-top:20px;
  406. display: block;
  407. text-transform: uppercase;
  408. font-family:'Poppins', sans-serif;
  409. color:{color:Gradient 2};
  410. }
  411.  
  412. .profile-description {
  413. max-height: 200px;
  414. padding: 0 5px 0;
  415. display: inline-block;
  416. overflow: auto;
  417. }
  418.  
  419. .about h1 {
  420. text-align:center;
  421. text-transform:uppercase;
  422. font-family:'Poppins', sans-serif;
  423. font-weight:bold;
  424. }
  425.  
  426. .social-wrap a {
  427. font-size: 26px;
  428. font-weight:400;
  429. color: #000;
  430. list-style-type: none;
  431. display: inline-block;
  432. padding: 15px 13px 10px;
  433. margin-right:10px;
  434. text-shadow:none;
  435. margin-left:20px;
  436. margin-right:30px;
  437. padding:10px;
  438. margin-top:10px;
  439. margin-bottom:10px;
  440. border-radius:10px 10px 10px 10px;
  441. }
  442.  
  443.  
  444. .social-wrap a:hover {
  445. color:{color:Sidelink Hover Button};
  446. }
  447.  
  448.  
  449.  
  450.  
  451.  
  452. /*GENERAL SECTION */
  453.  
  454.  
  455. /* TOOLTIPS */
  456. .tippy-tooltip.gradient-theme {
  457. background-image:linear-gradient(to right, {color:gradient 1 tooltips}, {color:gradient 2 tooltips});
  458. color:var(--boxes);
  459. text-align:center;
  460. font-family:'Public Sans', sans-serif;
  461. font-weight:bold;
  462. text-transform:uppercase;
  463. letter-spacing:1px;
  464. font-size:0.90em;
  465. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  466.  
  467. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  468. fill:var(--text);}
  469.  
  470. /* ----- TUMBLR CONTROLS ---- */
  471.  
  472.  
  473. .controls-button {
  474. position: fixed;
  475. cursor: help;
  476. top: 20px;
  477. right: 2rem;
  478. z-index: 1000;
  479. cursor: pointer;
  480. right:1.5rem;
  481. }
  482.  
  483. .tmblr-iframe {
  484. z-index: 999999999!important;
  485. opacity: 0;
  486. visibility: hidden;
  487. width:30px;
  488. -webkit-transition: all 0.5s;
  489. -moz-transition: all 0.5s;
  490. -ms-transition: all 0.5s;
  491. -o-transition: all 0.5s;
  492. transition: all 0.5s;
  493. }
  494.  
  495. body.controls-click .tmblr-iframe {
  496. opacity: 1;
  497. margin-right: 4rem;
  498. display:inline;
  499. vertical-align:bottom;
  500. visibility: visible;
  501. -webkit-transition: all 0.5s;
  502. -moz-transition: all 0.5s;
  503. -ms-transition: all 0.5s;
  504. -o-transition: all 0.5s;
  505. transition: all 0.5s;
  506. }
  507.  
  508.  
  509.  
  510.  
  511. /*END OF GENERAL: TUMBLR CONTROLS */
  512.  
  513. /*GENERAL: SCROLLBAR */
  514.  
  515. ::-webkit-scrollbar {
  516. width:0px;
  517. height:17px;
  518. }
  519. ::-webkit-scrollbar {
  520. background-color:rgb(255,255,255); /* background color */
  521. }
  522. ::-webkit-scrollbar-track {
  523. border:8px solid rgb(255,255,255); /* background color */
  524. background-color:rgb(230,230,230); /* light border color */
  525. }
  526. ::-webkit-scrollbar-thumb {
  527. border:8px solid rgb(255,255,255); /* background color */
  528. background-color:rgb(144,144,144); /* dark border color */
  529. min-height:24px;
  530. min-width:24px;
  531. }
  532. /*END OF GENERAL: SCROLLBAR */
  533.  
  534. /*GENERAL: SELECTION */
  535.  
  536. ::selection {
  537. background: {color:gradient 3};
  538. color:#000;
  539. }
  540.  
  541. ::-moz-selection {
  542. background: {color:gradient 3};
  543. color:#000;
  544. }
  545.  
  546. /*END OF GENERAL: SELECT */
  547.  
  548. /*GENERAL: STYLING */
  549.  
  550. body {
  551. font-size:12px;
  552. font-family: 'Manrope', sans-serif;
  553. text-align:justify;
  554. margin:0;
  555. line-height:1.5em;
  556. -moz-osx-font-smoothing:grayscale;
  557. -webkit-font-smoothing:antialiased;
  558. font-smoothing:antialiased;
  559. color:{color:text};
  560. background:{color:background};
  561. opacity: 1;
  562. transition: 1s opacity;
  563.  
  564. }
  565.  
  566. body.fade-out {
  567. opacity: 0;
  568. transition: none;
  569. }
  570.  
  571. html {
  572. background-color: {color:background};
  573. }
  574.  
  575. #s-m-t-tooltip {
  576. font-size:12px;
  577. font-family: 'Manrope', sans-serif;
  578. max-width:300px;
  579. background:{color:posts};
  580. margin:10px;
  581. padding:5px;
  582. border:0px;
  583. border-radius:0px;
  584. color:{color:text};
  585. z-index:999999;
  586. font-style:none;
  587. box-shadow: 0px 0px 0px rgba(0,0,0,.1);
  588. text-transform:lowercase;
  589. }
  590.  
  591.  
  592. a {
  593. color:{color:links};
  594. text-decoration:none;
  595. font-family:'Poppins', sans-serif;
  596. position:relative;
  597. cursor:pointer;
  598. -webkit-transition:all 0.2s;
  599. -moz-transition:all 0.2s;
  600. -ms-transition:all 0.2s;
  601. -o-transition:all 0.2s;
  602. transition:all 0.2s;
  603. }
  604.  
  605. a:hover {
  606. text-decoration:none;
  607. color:{color:Sidelink Hover Button};
  608. -webkit-transition:all 0.2s;
  609. -moz-transition:all 0.2s;
  610. -ms-transition:all 0.2s;
  611. -o-transition:all 0.2s;
  612. transition:all 0.2s;
  613. }
  614.  
  615.  
  616. a::before {
  617. content: "";
  618. position: absolute;
  619. display: block;
  620. width: 100%;
  621. height: 2px;
  622. bottom: 0;
  623. left: 0;
  624. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  625. transform: scaleX(0);
  626. transition: transform 0.3s ease;
  627. }
  628.  
  629. a:hover::before {
  630. transform: scaleX(1);
  631. }
  632.  
  633. small, sub, sup {
  634. font-size:12px;
  635. }
  636.  
  637. b, 700, strong {
  638. color:{color:links};
  639. }
  640.  
  641. .entry h1 {
  642. font-size:18px!important;
  643. }
  644.  
  645. pre {
  646. font-size:12px;
  647. font-family: 'Manrope', sans-serif;
  648. }
  649.  
  650.  
  651. blockquote {
  652. display:block;
  653. margin:0;
  654. margin-left:5px;
  655. margin-right:5px;
  656. padding-left:10px;
  657. border-left:2px #f1f1f1 solid;
  658. }
  659.  
  660. blockquote blockquote {
  661. border:none;
  662. padding:0;
  663. margin:0;
  664. }
  665.  
  666.  
  667. img {
  668. border:0;
  669. max-width:100%;
  670. height:auto;
  671. margin-left:0px;
  672. }
  673.  
  674. hr {
  675. margin:1em 0;
  676. border:0;
  677. height:1px;
  678. -moz-box-sizing:border-box;
  679. box-sizing:border-box;
  680. background-color:{color:borders};
  681. }
  682.  
  683. ol {
  684. margin-left:-25px;
  685. }
  686.  
  687. ul {
  688. margin-left:-25px;
  689. }
  690.  
  691. li {
  692. list-style-type:circle;
  693. }
  694.  
  695. /*END OF GENERAL: STYLING */
  696.  
  697. /*GENERAL: CONTAINERS */
  698.  
  699. .main {
  700. margin:150px auto;
  701. padding-left:300px;
  702. width:540px;
  703. }
  704.  
  705. .asidecontainer {
  706. position:fixed;
  707. height:100%;
  708. margin-left:-380px;
  709. }
  710.  
  711. /*END OF GENERAL: CONTAINERS */
  712.  
  713.  
  714.  
  715.  
  716. /*END OF GENERAL SECTION */
  717.  
  718.  
  719. /*-------------------------------------------------------------------------*/
  720.  
  721.  
  722. /*SIDEBAR SECTION */
  723.  
  724.  
  725. /*SIDEBAR: GENERAL */
  726.  
  727. aside {
  728. width:300px;
  729. height:auto;
  730. padding:10px 10px 0px 10px;
  731. margin-left:-60px;
  732. top: {text:post margin}px;
  733. text-align:Center;
  734. position:fixed;
  735. overflow:hidden;
  736. background:{color:posts};
  737. border-radius: 12px;
  738. border: 1px solid rgba(209, 213, 219, 0.3);
  739. box-shadow: 2px 2px 2px 0 #fff;
  740. }
  741.  
  742. /*END OF SIDEBAR: GENERAL */
  743.  
  744. /*SIDEBAR: IMAGE */
  745.  
  746. aside img {
  747. width:268px;
  748. border-radius:5px;
  749. margin-top:10px;
  750. }
  751.  
  752. /*END OF SIDEBAR: IMAGE */
  753.  
  754. /*SIDEBAR: TITLE*/
  755.  
  756. .subtitle {
  757. margin-top:10px;
  758. font-family:'Poppins', sans-serif;
  759. font-size:12px;
  760. color:{color:Subtitle};
  761. border-bottom:1px solid {color:Borders};
  762. }
  763.  
  764. /*END OF SIDEBAR: TITLE*/
  765.  
  766. /*SIDEBAR: DESCRIPTION */
  767.  
  768. .description {
  769. color:{color:text}!important;
  770. margin-bottom:20px;
  771. margin-top:10px;
  772. font-size:13px;
  773. }
  774.  
  775. /*END OF SIDEBAR: DESCRIPTION */
  776.  
  777. /*SIDEBAR: NAVIGATION */
  778.  
  779. .sidenav {
  780. overflow:visible;
  781. margin-top:0px;
  782. padding:10px;
  783. margin-left:-10px;
  784. backdrop-filter: blur(16px) saturate(180%);
  785. -webkit-backdrop-filter: blur(16px) saturate(180%);
  786. background-color:{color:Sidenav};
  787. border: 1px solid rgba(209, 213, 219, 0.3);
  788. border-radius:0px 0px 12px 12px;
  789. width:100%;
  790. height:50px;
  791. }
  792.  
  793. .sidenav a {
  794. color:{color:links};
  795. margin-bottom:10px;
  796. display:inline-block;
  797. vertical-align:middle;
  798. margin-right:5px;
  799. font-weight:600;
  800. padding:10px;
  801. border-radius:100%;
  802. color:#fff;
  803.  
  804. }
  805.  
  806. .sidenav a:hover {
  807. color:{color:Sidelink Hover Button};
  808. }
  809.  
  810. .sidenav a::before {
  811. content: "";
  812. position: absolute;
  813. display: block;
  814. width: 100%;
  815. height: 0px;
  816. bottom: 0;
  817. left: 0;
  818. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  819. transform: scaleX(0);
  820. transition: transform 0.3s ease;
  821. }
  822.  
  823. .sidenav a:hover::before {
  824. transform: scaleX(1);
  825. }
  826.  
  827.  
  828. /*---------------- SEARCH BOX ---------------------*/
  829.  
  830. /* POP UP BOX */
  831.  
  832. .click { cursor:help } /* for question mark cursor on hover */
  833.  
  834. #pop {
  835. width:100%;
  836. height:100%;
  837. top:0;left:0;
  838. position:fixed;
  839. z-index:999;
  840. background:rgba(255,255,255,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  841. display:none;
  842. }
  843. .fade {
  844. top:0;
  845. left:0;
  846. position:fixed;
  847. z-index:1000;
  848. width:100%;
  849. height:100%;
  850. }
  851.  
  852. .popup {
  853. top:50%;
  854. left:50%;
  855. font-family:'Manrope', sans-serif;
  856. text-transform:lowercase;
  857. font-weight:400;
  858. color:{color:Text}!important;
  859. transform:translate(-50%,-50%);
  860. position:fixed;
  861. background:#fff; /* background of popup box */
  862. padding:20px; /* padding of popup box */
  863. z-index:10000;
  864. width:600px!important;
  865. height:440px;/* width of popup */
  866. border:1px solid #eee; /* popup border */
  867. }
  868.  
  869. .popup a {
  870. background:none!important;
  871. padding:0px!important;
  872. color:{color:Links}!important;
  873. text-transform:none!important;
  874. }
  875.  
  876. /* SEARCH BOX */
  877.  
  878. #searchblock {
  879. position:fixed;
  880. top:0;
  881. left:0;
  882. right:0;
  883. margin-top:50px;
  884. margin-left:50px;
  885. margin-right:50px;
  886. height:0px;
  887. text-align:center;
  888. }
  889.  
  890. .typing, .typing::placeholder, #searchentries, #searchentries a, .enter {
  891. background-color:#fff;
  892. padding:5px;
  893. text-transform:uppercase;
  894. letter-spacing:0.5px;
  895. color:#999;
  896. font-size:12px;
  897. text-align:left;
  898. }
  899.  
  900. .typing, #searchentries {
  901. width:400px;
  902. }
  903.  
  904. .typing {
  905. margin-bottom:0px;
  906. outline:none;
  907. border:0px solid transparent;
  908. }
  909.  
  910. .typing::placeholder {
  911. padding:0px;!important;
  912. }
  913.  
  914. #searchentries {
  915. margin-top:10px;
  916. background-color:rgba(255,255,255,0.55)!important;
  917. }
  918.  
  919. #searchentries a {
  920. display:block;
  921. margin-bottom:5px;
  922. text-align:center!important;
  923. }
  924.  
  925. #searchentries a:hover {
  926. background-color:rgba(255,255,255,0.8)!important;
  927. }
  928.  
  929.  
  930. #searchentries a::before {
  931. content: "";
  932. position: absolute;
  933. display: block;
  934. width: 100%;
  935. height: 0px!important;
  936. bottom: 0;
  937. left: 0;
  938. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  939. transform: scaleX(0);
  940. transition: transform 0.3s ease;
  941. }
  942.  
  943. #searchentries a:hover::before {
  944. transform: scaleX(1);
  945. }
  946.  
  947. .enter {
  948. margin-left:4px;
  949. margin-bottom:0px;
  950. outline:none;
  951. border:0px solid transparent;
  952. cursor:pointer;
  953. }
  954.  
  955.  
  956. /* SCROLL TO TOP */
  957.  
  958. .scrollToTop{
  959. width:100px;
  960. height:130px;
  961. padding:10px;
  962. text-align:center;
  963. background: whiteSmoke;
  964. font-weight: bold;
  965. color: #444;
  966. text-decoration: none;
  967. position:fixed;
  968. top:75px;
  969. right:40px;
  970. display:none;
  971. background: url('arrow_up.png') no-repeat 0px 20px;
  972. }
  973. .scrollToTop:hover{
  974. text-decoration:none;
  975. }
  976.  
  977.  
  978. /*END OF SIDEBAR: NAVIGATION */
  979.  
  980.  
  981. /*END OF SIDEBAR SECTION */
  982.  
  983.  
  984. /*-------------------------------------------------------------------------*/
  985.  
  986.  
  987. /*POSTS SECTION */
  988.  
  989.  
  990. /*POSTS: GENERAL */
  991.  
  992. .content {
  993. margin:0px 0px;
  994. }
  995.  
  996. .entry {
  997. width:580px;
  998. margin-bottom:150px;
  999. padding:10px;
  1000. background-color:{color:Posts};
  1001. border-radius: 12px;
  1002. border: 1px solid rgba(209, 213, 219, 0.3);
  1003. box-shadow: 2px 2px 2px 0 #fff;
  1004. }
  1005.  
  1006. .entry 700, b, strong {
  1007. color:{color:links};
  1008. }
  1009.  
  1010. .entry:last-child {
  1011. margin-bottom:0;
  1012. }
  1013.  
  1014. .post {
  1015. margin:0px 0px 0px 0px;
  1016. width:540px;
  1017. position:relative;
  1018. padding:20px;
  1019. }
  1020.  
  1021. .text:last-child, .text *:last-child {
  1022. margin-bottom:0px;
  1023. }
  1024.  
  1025. .vignette, #vignette {
  1026. opacity:0;
  1027. }
  1028.  
  1029. .lightbox-image, #tumblr_lightbox img {
  1030. box-shadow:none !important;
  1031. border-radius:0px !important;
  1032. max-width:none;
  1033. }
  1034. .tmblr-lightbox, #tumblr_lightbox {
  1035. background-color:rgba(255,255,255,.75) !important;
  1036. }
  1037.  
  1038. /*END OF POSTS: GENERAL */
  1039.  
  1040. /*POSTS: CAPTIONS */
  1041.  
  1042. .caption {
  1043. width:540px;
  1044. margin-top:10px;
  1045. padding:0px;
  1046. margin-bottom:0px;
  1047. border:0;
  1048. text-align:justify;
  1049. }
  1050.  
  1051. .caption blockquote {
  1052. max-width:540px;
  1053. font-weight:normal;
  1054. border:0;
  1055. margin:0px 0px 7px 0px;
  1056. padding:0;
  1057. }
  1058.  
  1059. .caption blockquote:last-child {
  1060. margin:0px;
  1061. }
  1062.  
  1063. .caption p {
  1064. padding:0;
  1065. margin:0;
  1066. }
  1067.  
  1068. .caps blockquote {
  1069. max-width:540px;
  1070. margin:10px 0px 10px 0px;
  1071. font-weight:normal;
  1072. border-left:1px solid {color:borders};
  1073. padding-left:10px;
  1074. padding-right:10px;
  1075. }
  1076.  
  1077. .caps a.tumblr_blog {
  1078. padding-bottom:0px;
  1079. border-bottom:0;
  1080. text-overflow:ellipsis;
  1081. vertical-align:middle;
  1082. font-weight: 600;
  1083. text-transform:lowercase;
  1084. color:{color:links}!important;
  1085. -webkit-transition:all 0.2s;
  1086. -moz-transition:all 0.2s;
  1087. -ms-transition:all 0.2s;
  1088. -o-transition:all 0.2s;
  1089. transition:all 0.2s;
  1090. margin-top:0px;
  1091. margin-bottom:0px;
  1092. line-height:16px!important;
  1093. }
  1094.  
  1095. .caps a.tumblr_blog:hover {
  1096. color:{color:links}!important;
  1097. text-decoration:none;
  1098. -webkit-transition:all 0.2s;
  1099. -moz-transition:all 0.2s;
  1100. -ms-transition:all 0.2s;
  1101. -o-transition:all 0.2s;
  1102. transition:all 0.2s;
  1103. }
  1104.  
  1105. .caps .ic{
  1106. width:18px;
  1107. height:18px;
  1108. margin-right:10px;
  1109. display:inline-block;
  1110. float:left;
  1111. background:transparent;
  1112. text-align:left;
  1113. padding:0;
  1114. margin-left:0;
  1115. margin-top:0;
  1116. }
  1117.  
  1118. .caps {
  1119. margin:0px 0px 0px 0px;
  1120. padding:0;
  1121. border-left:0;
  1122. }
  1123.  
  1124. .caps p {
  1125. margin:5px 0 5px 0;
  1126. font-weight:normal;
  1127. padding:0;
  1128. border-left:0;
  1129. }
  1130.  
  1131. .caps p:last-child {
  1132. margin:5px 0 0 0;
  1133. }
  1134.  
  1135. .caps b {
  1136. color:{color:links};
  1137. font-weight:400;
  1138. }
  1139.  
  1140. .caps hr {
  1141. margin:0;
  1142. border:0;
  1143. }
  1144.  
  1145. .caps img {
  1146. margin-top:10px;
  1147. max-width:100%;
  1148. display:inline-block;
  1149. }
  1150.  
  1151. /*END OF POSTS: CAPTIONS */
  1152.  
  1153. /*POSTS: ASKS */
  1154.  
  1155. .askerbg {
  1156. padding: 0px;
  1157. border-radius: 100px;
  1158.  
  1159. }
  1160.  
  1161.  
  1162. .askerbg img {
  1163. border-radius:100px!important;
  1164. width:50px!important;
  1165. }
  1166.  
  1167. .question {
  1168. width:auto;
  1169. font-family: 'Poppins', sans-serif;
  1170. margin-top: 10px;
  1171. margin-bottom:20px;
  1172. color:{color:text};
  1173. padding: 10px;
  1174. border-radius:1px 15px 15px 15px;
  1175. background:{color:Asks};
  1176. }
  1177.  
  1178. /*END OF POSTS: ASKS */
  1179.  
  1180. /*POSTS: STYLES */
  1181.  
  1182. .chat {
  1183. list-style-type:none;
  1184. margin-bottom:10px;
  1185. }
  1186.  
  1187. .chat .label {
  1188. line-height:1.5em;
  1189. }
  1190.  
  1191. .quote {
  1192. margin-bottom:5px;
  1193. }
  1194.  
  1195. .source {
  1196. }
  1197.  
  1198. .media {
  1199. position:relative;
  1200. display:inline-block;
  1201. width:100%;
  1202. }
  1203.  
  1204. .media img {
  1205. position:relative;
  1206. display:inline-block;
  1207. width:540px!important;
  1208. }
  1209.  
  1210. .media a::before {
  1211. content: "";
  1212. position: absolute;
  1213. display: block;
  1214. width: 100%;
  1215. height: 0px!important;
  1216. bottom: 0;
  1217. left: 0;
  1218. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  1219. transform: scaleX(0);
  1220. transition: transform 0.3s ease;
  1221. }
  1222.  
  1223. .media a:hover::before {
  1224. transform: scaleX(1);
  1225. }
  1226.  
  1227.  
  1228. .audio {
  1229. text-align:center;
  1230. display:flex;
  1231. border-bottom:1px solid {color:Borders};
  1232. align-items: center;
  1233. position: relative;
  1234. }
  1235.  
  1236. .album-art {
  1237. z-index: 1;
  1238. display: inline-block;
  1239. vertical-align: middle;
  1240. float: left;
  1241. width: 8rem;
  1242. height: 8rem;
  1243. }
  1244.  
  1245. .button {
  1246. width:30px;
  1247. height:30px;
  1248. display:inline-block;
  1249. vertical-align:middle;
  1250. overflow: hidden;
  1251. position: relative;
  1252. z-index: 2;
  1253. margin: 0.7rem;
  1254. display:hidden;
  1255. }
  1256.  
  1257. .audiobox {
  1258. background-color: #f2f2f2;
  1259. z-index: 3;
  1260. position: absolute;
  1261. margin: 2.8rem;
  1262. border-radius: 50%;
  1263. backdrop-filter: blur(3px) saturate(179%);
  1264. -webkit-backdrop-filter: blur(3px) saturate(179%);
  1265. background-color: rgba(229, 228, 255, 0.04);
  1266. border-radius: 12px;
  1267. border: 1px solid rgba(209, 213, 219, 0.3);
  1268. }
  1269.  
  1270. .audio_trackinfo {
  1271. width:8rem;
  1272. height:6rem;
  1273. display: flex;
  1274. flex: 4;
  1275. align-items: flex-start;
  1276. justify-content: center;
  1277. flex-direction: column;
  1278. padding: 0.5rem;
  1279. padding: 1rem;
  1280. color:{color:Text};
  1281. }
  1282.  
  1283. .audio_trackname {
  1284. font-weight:600;
  1285. font-family:'Poppins', sans-serif;
  1286. color:{color:Text};
  1287. text-align:center;
  1288. font-size:1.6rem;
  1289. }
  1290.  
  1291. .spotify_audio_player {
  1292. max-width: 100%;
  1293. height: 80px;
  1294. }
  1295.  
  1296. /*END OF POSTS: STYLES */
  1297.  
  1298. /*END OF POSTS SECTION /*
  1299.  
  1300.  
  1301. /*-------------------------------------------------------------------------*/
  1302.  
  1303.  
  1304. /*POST INFO SECTION */
  1305.  
  1306.  
  1307. /*POST INFO: BOTTOM */
  1308.  
  1309. .postinfo {
  1310. margin:65px 0 0 0;
  1311. margin:20px 0px 0px 0px;
  1312. text-align:left;
  1313. color:#fff;
  1314. background:transparent;
  1315. line-height:1.5em!important;
  1316. background-color:{color:Sidenav};
  1317. border: 1px solid rgba(209, 213, 219, 0.3);
  1318. border-radius:0px 0px 12px 12px;
  1319. width:100%;
  1320. height:auto;
  1321. padding:10px;
  1322. margin-left:-10px;
  1323. margin-bottom:-10px;
  1324.  
  1325. }
  1326.  
  1327. .postinfo b {
  1328. }
  1329.  
  1330. .postinfo a {
  1331. display:inline-block;
  1332. height:14px;
  1333. line-height:10px;
  1334. color:#fff;
  1335. }
  1336.  
  1337.  
  1338. .postinfo i {
  1339. font-style: normal;
  1340. }
  1341.  
  1342. .postinfo a:hover {
  1343. color:{color:gradient 3};
  1344. }
  1345.  
  1346. .postinfo p {
  1347. margin-top:-10px!important;
  1348. }
  1349.  
  1350. svg {
  1351. width:12px;
  1352. height:auto;
  1353. opacity:.7;
  1354. padding:1px;
  1355. display:block;
  1356. color:#fff;
  1357. overflow:visible;
  1358. margin-left:5px;
  1359. margin-top:-3px;
  1360. background:transparent;
  1361. }
  1362.  
  1363. .controls a {
  1364. position:relative;
  1365. display:inline-block;
  1366. overflow:hidden;
  1367. padding:5px;
  1368. width:18px;
  1369. height:12px;
  1370. color:#333;
  1371. margin-left:-7px;
  1372. background:transparent;
  1373. }
  1374.  
  1375. .controls a::before {
  1376. content: "";
  1377. position: absolute;
  1378. display: block;
  1379. width: 100%;
  1380. height: 0px;
  1381. bottom: 0;
  1382. left: 0;
  1383. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  1384. transform: scaleX(0);
  1385. transition: transform 0.3s ease;
  1386. }
  1387.  
  1388. .controls a:hover::before {
  1389. transform: scaleX(1);
  1390. }
  1391.  
  1392.  
  1393. .controls .reblog {
  1394. opacity:0.93;
  1395. background:transparent;
  1396. }
  1397.  
  1398. .controls .reblog svg {
  1399. width:16px;
  1400. background:transparent;
  1401. }
  1402.  
  1403. .controls .like .liked + svg {
  1404. opacity:1;
  1405. background:transparent;
  1406. }
  1407.  
  1408. .controls .like .liked + svg path {
  1409. fill:#ffaaaa;
  1410. }
  1411.  
  1412. .controls .like .like_button {
  1413. position:relative;
  1414. background:transparent;
  1415. }
  1416.  
  1417. .controls .like .like_button iframe {
  1418. position:absolute;
  1419. top:0;
  1420. left:0;
  1421. bottom:0;
  1422. right:0;
  1423. z-index:2;
  1424. opacity:0.000001;
  1425. }
  1426.  
  1427. .tags {
  1428. color:{color:links}!important;
  1429. word-break:break-word;
  1430. text-align:left;
  1431. text-transform:lowercase;
  1432. opacity:1;
  1433. -webkit-transition: all 0.7s ease;
  1434. transition: all 0.7s ease;
  1435. -moz-transition: all 0.7s ease;
  1436. -o-transition: all 0.7s ease;
  1437. text-align:justify!important;
  1438. }
  1439.  
  1440. .tags a {
  1441. font-style:none;
  1442. margin-right:2px;
  1443. margin-top:10px;
  1444. border-radius:4px;
  1445. text-transform:lowercase;
  1446. color:#fff;
  1447. }
  1448.  
  1449. .tags a:hover {
  1450. text-decoration:none;
  1451. color:{color:gradient 3};
  1452. }
  1453.  
  1454. /*END OF POST INFO: BOTTOM */
  1455.  
  1456. /*POST INFO: PERMALINK */
  1457.  
  1458. ol.notes {
  1459. list-style-type:none!important;
  1460. font-style:normal;
  1461. margin-top:-137px;
  1462. margin-left:0px;
  1463. width:580px;
  1464. }
  1465.  
  1466. li.note {
  1467. margin-left:30px;
  1468. padding:10px;
  1469. font-style:normal;
  1470. width:580px;
  1471. list-style-type:circle!important;
  1472. }
  1473.  
  1474. li.note:before {
  1475. content:"";
  1476. padding:0;
  1477. list-style-type:none!important;
  1478. }
  1479.  
  1480. .more_notes_link, .notes_loading {
  1481. float:center;
  1482. text-align:center!important;
  1483. text-transform:lowercase!important;
  1484. font-weight:400!important;
  1485. }
  1486.  
  1487. .notes img {
  1488. display:inline;
  1489. width:20px;
  1490. border-radius:100%;
  1491. margin-right:10px;
  1492. }
  1493.  
  1494. .notes {
  1495. background-color:{color:posts};
  1496. margin-right:0px;
  1497. margin-left:0px;
  1498. width:580px;
  1499. padding:10px;
  1500. margin-top:-60px;
  1501. border-radius:5px;
  1502. }
  1503.  
  1504. ol.notes li.note blockquote {
  1505. border:0;
  1506. padding:0px 0px;
  1507. margin:0px 0 0 0px;
  1508. list-style-type:none!important;
  1509. }
  1510.  
  1511. /*END OF POST INFO: PERMALINK */
  1512.  
  1513.  
  1514. /*END OF POST INFO SECTION */
  1515.  
  1516.  
  1517. /*-------------------------------------------------------------------------*/
  1518.  
  1519.  
  1520. /*PAGINATION SECTION */
  1521.  
  1522.  
  1523. /*PAGINATION: GENERAL */
  1524.  
  1525. .pagi {
  1526. margin-top:20px;
  1527. text-align:center;
  1528. font-size:14px;
  1529. margin-left:10px;
  1530. padding-top:20px;
  1531. width:540px;
  1532. }
  1533.  
  1534. .pagi a {
  1535. color:{color:links};
  1536. }
  1537.  
  1538. .pagi a:hover {
  1539. color:{color:hover};
  1540. }
  1541.  
  1542. /*END OF PAGINATION: GENERAL */
  1543.  
  1544.  
  1545. /*END OF PAGINATION SECTION */
  1546.  
  1547. /* MASONRY NAVIGATION CSS PART */
  1548. .masonry-navigation {
  1549. width: 100%;
  1550. border-bottom: 1px solid #e2e2e2;
  1551. margin-bottom:15px;
  1552. }
  1553.  
  1554. .masonry-navigation:last-child {
  1555. border:none;
  1556. }
  1557.  
  1558. .masonry-navigation-item.one-column {
  1559. width: 100%;
  1560. padding: 0 5px;
  1561. margin-bottom: 10px;
  1562. }
  1563.  
  1564. .masonry-navigation-item.one-column ul {
  1565. display: flex;
  1566. flex-wrap: wrap;
  1567. margin: 0;
  1568. padding: 0;
  1569. }
  1570.  
  1571. /* if you have any problem with one colum lists (ul li) you edit here */
  1572. .masonry-navigation-item.one-column ul li {
  1573. margin: 4px 15px;
  1574. padding: 0;
  1575. }
  1576.  
  1577. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  1578. .masonry-navigation-item.two-columns {
  1579. width: 240px;
  1580. padding: 0 5px;
  1581. margin-bottom: 10px;
  1582. }
  1583.  
  1584. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  1585. .masonry-navigation-item.three-columns {
  1586. width: 160px;
  1587. padding: 0 5px;
  1588. margin-bottom: 10px;
  1589. }
  1590.  
  1591. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  1592. .masonry-navigation-item.scroll {
  1593. height:215px;
  1594. overflow-y: scroll;
  1595. }
  1596.  
  1597.  
  1598. /* ----------- NOT FOUND PAGE ---------*/
  1599.  
  1600. .wrapper_notfound {
  1601. position: fixed;
  1602. visibility:hidden;
  1603. left: 0px;
  1604. top: 0px;
  1605. width: 100%;
  1606. height: 100%;
  1607. background-image:linear-gradient(to right, {color:Not Found Gradient BG 1}, {color:Not Found Gradient BG 2});
  1608. z-index: 999999999999;
  1609. }
  1610.  
  1611. .actual_notfound {
  1612. position: absolute;
  1613. color:{color:Not Found Text};
  1614. left:50%;
  1615. top:50%;
  1616. font-family:'Poppins', sans-serif;
  1617. transform:translate(-50%, -50%);
  1618. width:calc(600px + 0.25vw);
  1619. font-size:calc(22px + 0.25vw);
  1620. line-height:170%;
  1621. text-align: center;
  1622. }
  1623.  
  1624. .actual_notfound a {
  1625. color:{color:Not Found Link};
  1626. text-decoration: none;
  1627. }
  1628.  
  1629. .actual_notfound::selection {
  1630. color:{color:select background};
  1631. }
  1632.  
  1633. /*-----*/
  1634.  
  1635.  
  1636. /*-------------------------------------------------------------------------*/
  1637.  
  1638. #credit {
  1639. position: fixed;
  1640. bottom: 20px;
  1641. right: 20px;
  1642. font-size: 15px;
  1643. color:{color:text};
  1644. border:1px solid {color:Borders};
  1645. border-radius:3px;
  1646. padding:10px;
  1647. background-image:linear-gradient(to right, {color:gradient 2}, {color:gradient 3});
  1648. }
  1649.  
  1650. </style></head>
  1651.  
  1652. <body>
  1653.  
  1654. <script>
  1655. document.body.classList.add('fade-out');
  1656. window.addEventListener('DOMContentLoaded', () => {
  1657. document.body.classList.remove('fade-out');
  1658. });
  1659. </script>
  1660.  
  1661.  
  1662. <div id="pop"> <div class="fade"></div>
  1663. <div class="popup">
  1664. <div id="searchblock">
  1665.  
  1666. <form class="find" action="/search" method="get">
  1667.  
  1668. <a class="expand"><input class="typing" type="text" name="q" value="{SearchQuery}" placeholder="looking for something?" autocomplete="off"/></a>
  1669.  
  1670. <input class="enter" type="submit" value="search"/>
  1671.  
  1672. </form>
  1673.  
  1674. <div id="searchentries">
  1675. <a href="/tagged/">search entry</a><br>
  1676. <a href="/tagged/">search entry</a><br>
  1677. <a href="/tagged/">search entry</a><br>
  1678. <a href="/tagged/">search entry</a><br>
  1679. <a href="/tagged/">search entry</a><br>
  1680. <a href="/tagged/">search entry</a><br>
  1681. <a href="/tagged/">search entry</a><br>
  1682. <a href="/tagged/">search entry</a><br>
  1683. </div><!--END 'searchentries' div-->
  1684. </div><!--END 'searchblock' div-->
  1685. </div>
  1686. </div>
  1687.  
  1688. <!-- NAVBAR -->
  1689.  
  1690. <nav>
  1691. <div class="nav-bar">
  1692. <i class='bx bx-menu sidebarOpen' ></i>
  1693.  
  1694. <img src="{PortraitURL-128}" style="width:40px; border-radius:100%">
  1695. <span class="logo navLogo"><a href="/">{Title}</a></span>
  1696.  
  1697. <div class="menu">
  1698.  
  1699. <ul class="nav-links">
  1700. <li><a href="/">{text:Home Title}</a></li>
  1701. <li><a href="/ask">{text:Ask Title}</a></li>
  1702. <li><a style="font-size:15px;cursor:pointer" onclick="openAbout()">{text:About Title}</a></li>
  1703. <li><a href="{text:Link 2 Url}">{text:Link 2 Title}</a></li>
  1704. <li><a href="{text:Link 3 Url}">{text:Link 3 Title}</a></li>
  1705. <li><a href="{text:Link 4 Url}">{text:Link 4 Title}</a></li>
  1706. <li><a href="{text:Link 5 Url}">{text:Link 5 Title}</a></li>
  1707. <li><a href="{text:Link 6 Url}">{text:Link 6 Title}</a></li>
  1708. </ul>
  1709. </div>
  1710.  
  1711. </div>
  1712. </nav>
  1713.  
  1714. <!-- ABOUT MENU -->
  1715.  
  1716. <div id="myabout" class="about">
  1717. <a href="javascript:void(0)" class="closebtn" onclick="closeAbout()"><i class="cp cp-cross" style="font-size:11px"></i> close</a>
  1718.  
  1719. <center>
  1720. <img src="{PortraitURL-128}" class="about-icon">
  1721. <a href="/"><h3>{Title}</h3></a>
  1722. <h4>@{Name}</h4>
  1723. </center>
  1724.  
  1725. <div class="profile">
  1726. <div class="profile-row">
  1727. <div class="profile-info">
  1728. <div class="profile-title"><i class="cp cp-user"></i> name.</div>
  1729. <div class="profile-description">{text:Name}</div>
  1730. </div> <!-- this closes the profile-info -->
  1731. <div class="profile-info">
  1732. <div class="profile-title"><i class="cp cp-target-o"></i> tracked tag.</div>
  1733. <div class="profile-description">{text:Tracked Tag}</div>
  1734. </div> <!-- this closes the profile-info -->
  1735. </div> <!-- this closes the profile-row -->
  1736. <div class="profile-row">
  1737. <div class="profile-info">
  1738. <div class="profile-title"><i class="cp cp-balloons"></i> age.</div>
  1739. <div class="profile-description">{text:Age}</div>
  1740. </div> <!-- this closes the profile-info -->
  1741. <div class="profile-info">
  1742. <div class="profile-title"><i class="cp cp-stars"></i> pronouns.</div>
  1743. <div class="profile-description">{text:Pronouns}</div>
  1744. </div> <!-- this closes the profile-info -->
  1745. </div> <!-- this closes the profile-row -->
  1746. <div class="profile-row">
  1747. <div class="profile-info">
  1748. <div class="profile-title"><i class="cp cp-rainbow"></i> sexuality.</div>
  1749. <div class="profile-description">{text:Sexuality}</div>
  1750. </div> <!-- this closes the profile-info -->
  1751. <div class="profile-info">
  1752. <div class="profile-title"><i class="cp cp-location"></i> country.</div>
  1753. <div class="profile-description">{text:Country}</div>
  1754. </div> <!-- this closes the profile-info -->
  1755. </div> <!-- this closes the profile-row -->
  1756. <div class="profile-row">
  1757. <div class="profile-info">
  1758. <div class="profile-title"><i class="cp cp-earth"></i> race/ethnicity.</div>
  1759. <div class="profile-description">{text:Race Ethnicity}</div>
  1760. </div> <!-- this closes the profile-info -->
  1761. <div class="profile-info">
  1762. <div class="profile-title"><i class="cp cp-z-gemini"></i> zodiac.</div>
  1763. <div class="profile-description">{text:Zodiac}</div>
  1764. </div> <!-- this closes the profile-info -->
  1765. </div> <!-- this closes the profile-row -->
  1766. <div class="profile-row">
  1767. <div class="profile-info">
  1768. <div class="profile-title"><i class="cp cp-sunflower"></i> About me.</div>
  1769. <div class="profile-description">You can write whatever you want about yourself here! You can add links, <b>bolded texts</b>, <i>italics</i>, <strike>strike text</strike> & etc.
  1770.  
  1771. <p>You can also start a new paragraph!</p>
  1772.  
  1773. </div>
  1774. </div> <!-- this closes the profile-info -->
  1775. </div> <!-- this closes the profile-row -->
  1776. <div class="profile-row">
  1777. <div class="profile-info">
  1778. <div class="profile-title"><i class="cp cp-like"></i> likes </div>
  1779. <div class="profile-description">List here the things you like!
  1780. </div>
  1781. </div> <!-- this closes the profile-info -->
  1782. <div class="profile-info">
  1783. <div class="profile-title"><i class="cp cp-forbidden"></i> dislikes</div>
  1784. <div class="profile-description">List here the things you don't like! </div>
  1785. </div> <!-- this closes the profile-info -->
  1786. </div> <!-- this closes the profile-row -->
  1787. </div> <!-- this closes the profile -->
  1788.  
  1789. <center><h1>Social Media</h1></center>
  1790. <div class="profile">
  1791. <div class="profile-row">
  1792. <div class="profile-info">
  1793.  
  1794. <div class="social-wrap">
  1795.  
  1796. <a href="https://twitter.com/" title="twitter"><i class="ph-twitter-logo" style="color:#fff;"></i></a>
  1797.  
  1798. <a href="https://instagram.com/" title="instagram"><i class="ph-instagram-logo" style="color:#fff;"></i></a>
  1799.  
  1800. <a href="https://open.spotify.com/user/" title="spotify"><i class="ph-spotify-logo" style="color:#fff;"></i></a>
  1801.  
  1802. <a href="https://www.youtube.com/channel/" title="youtube"><i class="ph-youtube-logo" style="color:#fff;"></i></a>
  1803.  
  1804. <a href="https://discord.com/users/" title="discord"><i class="ph-discord-logo" style="color:#fff;"></i></a>
  1805.  
  1806. <a href="https://ko-fi.com/" title="ko-fi"><i class="ph-coffee" style="color:#fff;"></i></a>
  1807.  
  1808. <a href="https://www.paypal.com/paypalme/" title="paypal me"><i class="ph-wallet" style="color:#fff;"></i></a>
  1809.  
  1810. <a href="https://archiveofourown.org/users/" title="ao3"><i class="ph-bookmark-simple" style="color:#fff;"></i></a>
  1811.  
  1812. <a href="https://letterboxd.com/" title="letterboxd"><i class="ph-dots-three-outline" style="color:#fff;"></i></a>
  1813.  
  1814.  
  1815. <a href="https://br.pinterest.com/" title="pinterest"><i class="ph-pinterest-logo" style="color:#fff;"></i></a>
  1816.  
  1817. </div>
  1818.  
  1819. </div> <!-- this closes the profile-info -->
  1820. </div> <!-- this closes the profile-row -->
  1821. </div> <!-- this closes the profile -->
  1822.  
  1823. <h1>Tags</h1>
  1824. <div class="profile">
  1825. <div class="profile-row">
  1826. <div class="profile-info">
  1827. <div class="profile-title"><i class="cp cp-pencil"></i> creations.</div>
  1828. <div class="profile-description">
  1829.  
  1830. <li><a href="/tagged/">tag name</a></li> |
  1831. <li><a href="/tagged/">tag name</a></li> |
  1832. <li><a href="/tagged/">tag name</a></li> |
  1833. <li><a href="/tagged/">tag name</a></li> |
  1834. <li><a href="/tagged/">tag name</a></li> |
  1835. <li><a href="/tagged/">tag name</a></li>
  1836.  
  1837. </div>
  1838. </div> <!-- this closes the profile-info -->
  1839.  
  1840. <div class="profile-info">
  1841. <div class="profile-title"><i class="cp cp-tv"></i> fandoms i edit the most.</div>
  1842. <div class="profile-description">
  1843.  
  1844. <li><a href="/tagged/">tag name</a></li> |
  1845. <li><a href="/tagged/">tag name</a></li> |
  1846. <li><a href="/tagged/">tag name</a></li> |
  1847. <li><a href="/tagged/">tag name</a></li> |
  1848. <li><a href="/tagged/">tag name</a></li> |
  1849. <li><a href="/tagged/">tag name</a></li> |
  1850. <li><a href="/tagged/">tag name</a></li> |
  1851. <li><a href="/tagged/">tag name</a></li>
  1852. </div>
  1853. </div> <!-- this closes the profile-info -->
  1854. </div> <!-- this closes the profile-row -->
  1855. </div>
  1856.  
  1857. <!-- DO NOT CHANGE OR REMOVE -->
  1858.  
  1859. <h1><i class="cp cp-moon"></i></h1>
  1860. <div class="profile">
  1861. <div class="profile-row">
  1862. <div class="profile-info">
  1863. <center>
  1864. <li>© <a href="https://geminicodes.tumblr.com/" style="display:inline-block">bru</a>, 2022. </li>
  1865. <li>all rights reserved.</li>
  1866. <li>powered by tumblr.</li>
  1867. <li>theme by bru.</li>
  1868. </center>
  1869.  
  1870. </div> <!-- this closes the profile-info -->
  1871. </div> <!-- this closes the profile-row -->
  1872. </div> <!-- this closes the profile -->
  1873.  
  1874.  
  1875. </div>
  1876.  
  1877. <div class="main">
  1878. <div class="credit">
  1879.  
  1880. </div>
  1881.  
  1882. <div class="asidecontainer">
  1883. <aside>
  1884.  
  1885. {block:IfSidebarImage}
  1886. <img src="{image:sidebar image}">
  1887. {/block:IfSidebarImage}
  1888.  
  1889. <div class="subtitle">
  1890. {text:subtitle}
  1891. <p>
  1892. </div>
  1893.  
  1894. <div class="description">
  1895. {text:Desktop Description}
  1896. </div>
  1897.  
  1898. <div class="sidenav">
  1899. <a href="https://tumblr.com/dashboard" title="Back to dash"><i class="ph-sign-out" style="font-size:14px; font-weight:700"></i></a>
  1900. <a href="https://tumblr.com/message/lizzies" title="DM me"><i class="ph-chats-circle" style="font-size:15px"></i></a>
  1901. <a href="{text:Pop Up}" title="Search this blog"><i class="ph-magnifying-glass" style="font-size:14px; font-weight:700"></i></a>
  1902. <a href="#" class="Scroll To Top" title="Scroll To Top"><i class="ph-arrow-line-up" style="font-size:14px; font-weight:700"></i></a>
  1903.  
  1904. </div>
  1905.  
  1906. </aside>
  1907.  
  1908. </div>
  1909.  
  1910. <div class="content">
  1911.  
  1912. {block:Posts}
  1913. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}" id="{PostID}">
  1914. <section class="post" id="{PostID}">
  1915.  
  1916. <center>{block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post" style="display:inline-block; vertical-align:middle; text-transform:uppercase; font-weight:bold;margin-bottom:10px"><i class="fas fa-thumbtack" style="font-size:9px;"></i> pinned post </a>{/block:PinnedPostLabel}</center>
  1917.  
  1918.  
  1919. {block:Audio}
  1920. <div class="type-audio post">
  1921. <div class="audio">
  1922. <div class="audiobox">
  1923. <div class="button">
  1924. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1925. </div>
  1926. </div>
  1927. <div class="album-art">
  1928. {block:AlbumArt}
  1929. <img src="{AlbumArtURL}" />
  1930. {/block:AlbumArt}
  1931. </div>
  1932.  
  1933. {block:TrackName}
  1934. <div class="audio_trackinfo">
  1935. <div class="audio_trackname">{TrackName}</div>
  1936. {block:Artist}
  1937. <div class="audio_artist">{Artist}</div>{/block:Artist}
  1938. {block:Album}<div class="audio_album">{Album}</div>{/block:Album}
  1939. </div>
  1940. {/block:TrackName}
  1941. </div>
  1942. {/block:Audio}
  1943.  
  1944. {block:Photo}
  1945. <div class="media" id="{PostID}">
  1946. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  1947. </div>
  1948. {/block:Photo}
  1949.  
  1950. {block:Photoset}
  1951. <div class="media photoset" id="{PostID}">
  1952. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1953.  
  1954. {block:Photos}
  1955. <div class="photo-data">
  1956. <div class="pxu-photo">
  1957. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  1958. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>
  1959. {/block:Photos}
  1960. </div></div>
  1961. {/block:Photoset}
  1962.  
  1963. {block:Video}
  1964. <div class="media video" id="{PostID}">{Video-500}</div>
  1965. {/block:Video}
  1966.  
  1967. {block:Answer}
  1968. <div class="ask" id="{PostID}">
  1969. <table style="padding-bottom:5px;margin-bottom:5px;">
  1970. <tr>
  1971. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker}</strong> asked at {12HourWithZero}:{Minutes}{AmPm}:
  1972. <div class="question">{Question}</div>
  1973. </td>
  1974. </tr>
  1975. </table>
  1976. {Answer}
  1977. {/block:Answer}
  1978.  
  1979. {block:Chat}
  1980. {block:Title}
  1981. <h1>{Title}</h1>
  1982. {/block:Title}
  1983.  
  1984. <ul class="chat text">
  1985. {block:Lines}
  1986. <li class="line">
  1987. {block:Label}
  1988. <span class="label">{Label}&nbsp; </span>
  1989. {/block:Label}
  1990. {Line}</li>
  1991. {/block:Lines}</ul>
  1992. {/block:Chat}
  1993.  
  1994. {block:Link}
  1995. <h1>
  1996. <a href="{URL}">{Name}</a></h1>
  1997. {block:Description}
  1998. <div class="caption">{Description}</div>
  1999. {/block:Description}
  2000. {/block:Link}
  2001.  
  2002. {block:Quote}
  2003. <div class="quote" id="{PostID}">{Quote}</div>
  2004. {block:Source}
  2005. <div class="source">— {Source}</div>
  2006. {/block:Source}
  2007. {/block:Quote}
  2008.  
  2009. {block:Text}
  2010. {block:Title}
  2011. <h1>{Title}</h1>
  2012. {/block:Title}
  2013. {block:Body}
  2014. <div class="caption">{Body}</div>
  2015. {/block:Body}
  2016. {/block:Text}
  2017.  
  2018. {block:Caption}
  2019. <div class="caption" id="{PostID}">{Caption}</div>
  2020. {/block:Caption}
  2021.  
  2022. </section>
  2023.  
  2024. {block:Date}
  2025. <div class="postinfo">
  2026.  
  2027. <a href="{Permalink}">{DayOfWeek}, {DayOfMonth} {Month} {Year}</a>
  2028. {block:NoteCount}
  2029. with <a href="{Permalink}">{NoteCountWithLabel}</a>
  2030. {/block:NoteCount}
  2031.  
  2032. <span style="float:right;"><span class="controls"><a href="{ReblogURL}" target="_blank" class="reblog"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M629.657 343.598L528.971 444.284c-9.373 9.372-24.568 9.372-33.941 0L394.343 343.598c-9.373-9.373-9.373-24.569 0-33.941l10.823-10.823c9.562-9.562 25.133-9.34 34.419.492L480 342.118V160H292.451a24.005 24.005 0 0 1-16.971-7.029l-16-16C244.361 121.851 255.069 96 276.451 96H520c13.255 0 24 10.745 24 24v222.118l40.416-42.792c9.285-9.831 24.856-10.054 34.419-.492l10.823 10.823c9.372 9.372 9.372 24.569-.001 33.941zm-265.138 15.431A23.999 23.999 0 0 0 347.548 352H160V169.881l40.416 42.792c9.286 9.831 24.856 10.054 34.419.491l10.822-10.822c9.373-9.373 9.373-24.569 0-33.941L144.971 67.716c-9.373-9.373-24.569-9.373-33.941 0L10.343 168.402c-9.373 9.373-9.373 24.569 0 33.941l10.822 10.822c9.562 9.562 25.133 9.34 34.419-.491L96 169.881V392c0 13.255 10.745 24 24 24h243.549c21.382 0 32.09-25.851 16.971-40.971l-16.001-16z"></path></svg></a>
  2033.  
  2034. <a href="#" class="like">{LikeButton} <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg></a></span></span>
  2035.  
  2036. {block:HasTags}
  2037. <div class="tags">
  2038. {block:Tags}
  2039. <a href="{TagURL}">#{Tag}</a>
  2040. {/block:Tags}
  2041. </div>
  2042. {/block:HasTags}
  2043.  
  2044. </div>
  2045. {/block:Date}
  2046.  
  2047. </article>
  2048.  
  2049. <!--- TUMBLR CONTROLS -->
  2050.  
  2051.  
  2052. <div title="Tumblr Controls" class="controls-button"><i class="fas fa-cog fa-spin"></i></div>
  2053.  
  2054.  
  2055.  
  2056.  
  2057. {block:PostNotes} {PostNotes} {/block:PostNotes} {/block:Posts} <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} --> </div>
  2058.  
  2059. {block:Pagination}
  2060. <div class="pagi">
  2061. {block:PreviousPage}
  2062. <a href="{PreviousPage}" title="previous page">previous</a> /
  2063. {/block:PreviousPage}
  2064. {block:NextPage}
  2065. <a href="{NextPage}" title="next page">next</a>
  2066. {/block:NextPage}
  2067. </div>
  2068. {/block:Pagination}
  2069. </div>
  2070.  
  2071. <!----- CREDIT do not remove. ----->
  2072.  
  2073. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class='bx bx-moon' ></i></a>
  2074.  
  2075.  
  2076.  
  2077. <!--- NOT FOUND PAGE -->
  2078.  
  2079. <div class="wrapper_notfound">
  2080. <div class="actual_notfound">
  2081. <h1><i class="ph-prohibit-bold" style="display:inline-block; vertical-align:middle"></i> not found!</h1>
  2082. sorry! the url you requested could not be found :(
  2083. <a href="/">try again?</a>
  2084. </div>
  2085. </div>
  2086.  
  2087.  
  2088.  
  2089. <!-- SCRIPTS -->
  2090.  
  2091.  
  2092. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  2093.  
  2094. <script>feather.replace();</script>
  2095.  
  2096. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2097.  
  2098.  
  2099. <!-- SEARCH ENTRIES -->
  2100.  
  2101. <script>
  2102. $(document).ready(function(){
  2103. $('.expand').click(function(list){
  2104. list.stopPropagation();
  2105. $("#searchentries").slideToggle('slow');
  2106. });
  2107. });
  2108.  
  2109. $(document).click(function(outside){
  2110. var box = $('#searchentries');
  2111. if(!box.is(outside.target) && box.has(outside.target).length === 0){
  2112. $('#searchentries').slideUp('slow');
  2113. }
  2114. });
  2115. </script>
  2116. <!--- TUMBLR CONTROLS -->
  2117.  
  2118. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  2119.  
  2120. <script>
  2121. $('.controls-button').click(function(){
  2122. $('body').toggleClass('controls-click');
  2123. });
  2124. </script>
  2125.  
  2126. <!-- CAPTIONS -->
  2127.  
  2128. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  2129.  
  2130. <script> $('article').unnest({ yourCaption: ".caption", wrapName: ".caps", newCaptionUsername: true, originalPostCaptionUsername: false, tumblrAvatars: false, tumblrAvatarClass: ".ic", usernameColon: false }); </script>
  2131.  
  2132. <script src="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  2133.  
  2134. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2135.  
  2136. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  2137.  
  2138. <script> $(document).ready(function(){ $('.photo-slideshow').pxuPhotoset({ lightbox: true, rounded: 'corners', gutter: '4px', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo' }); }); </script>
  2139.  
  2140.  
  2141. <script src="https://unpkg.com/popper.js@1"></script>
  2142. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  2143. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  2144.  
  2145.  
  2146. <!--- SCROLL TO TOP -->
  2147.  
  2148. <script>
  2149. $(document).ready(function(){
  2150.  
  2151. //Click event to scroll to top
  2152. $('.scrollToTop').click(function(){
  2153. $('html, body').animate({scrollTop : 0},800);
  2154. return false;
  2155. });
  2156.  
  2157. });
  2158. </script>
  2159.  
  2160.  
  2161. <!--- TOOLTIPS -->
  2162.  
  2163. <script>
  2164.  
  2165. tippy('a[title]', {
  2166. theme: 'gradient',
  2167. arrow: false,
  2168. zIndex: 9999999999,
  2169. maxWidth: 300,
  2170.  
  2171. content(reference) {
  2172. const title = reference.getAttribute('title');
  2173. reference.removeAttribute('title');
  2174. return title;
  2175. },
  2176. });
  2177.  
  2178. </script>
  2179.  
  2180.  
  2181. <!-- masonry navigation -->
  2182.  
  2183. <script type="text/javascript">
  2184. // masonry navigation
  2185. var elements = document.getElementsByClassName('masonry-navigation');
  2186. var msnry;
  2187. var nElements = elements.length;
  2188. for(var i = 0; i < nElements; i++){
  2189. msnry = new Masonry( elements[i], {
  2190. // columnWidth: 268,
  2191. gutter: 10,
  2192. itemSelector: '.masonry-navigation-item',
  2193. });
  2194. }
  2195. </script>
  2196.  
  2197. <script>
  2198. $(document).ready(function() {
  2199. if ($('p:contains("The URL you requested could not be found.")').html()) {
  2200. $(".wrapper_notfound").css( "visibility", "visible" );
  2201. $(".article_position").remove();
  2202. $('title').prepend( "Not Found | " ); }
  2203. });
  2204. </script>
  2205.  
  2206. <script>
  2207. /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
  2208. function openAbout() {
  2209. document.getElementById("myabout").style.width = "900px";
  2210. document.getElementById(".main").style.marginLeft = "250px";
  2211. document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  2212. }
  2213.  
  2214. /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
  2215. function closeAbout() {
  2216. document.getElementById("myabout").style.width = "0";
  2217. document.getElementById("#main").style.marginLeft = "0";
  2218. document.body.style.backgroundColor = "white";
  2219. }
  2220. </script>
  2221.  
  2222. </body>
  2223.  
  2224. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement