API tools faq
paste
Advertisement
userbru

theme twenty-five.

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