nicolas-sage

page 14: twitter about

Dec 20th, 2022 (edited)
162
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.75 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!----
  11. _________
  12. / \
  13. | __ __ |
  14. | |__| |__| | TWITTER ABOUT PAGE BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20.  
  21. CREDITS:
  22. - phosphor icons / phosphoricons.com
  23. - tabler icons / https://tabler-icons.io/
  24. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  25. - bunny fonts / https://fonts.bunny.net/
  26.  
  27. ---->
  28.  
  29. <!---- JQUERY ---->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  32.  
  33. <!----- BUNNY FONTS -----
  34. EDIT HERE: replace Nunito and Montserrat with the names of your fonts -->
  35.  
  36. <link href="https://fonts.bunny.net/css?family=Nunito:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Montserrat:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  37.  
  38. <!---- ICONS ---->
  39. <script src="https://unpkg.com/phosphor-icons"></script>
  40. <script src="https://unpkg.com/[email protected]"></script>
  41. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  42.  
  43. <!---- TOOLTIPS ---->
  44. <script src="https://unpkg.com/popper.js@1"></script>
  45. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  46.  
  47. <!--- day/night --->
  48. <script>
  49. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  50. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  51. </script>
  52.  
  53. <!------- CSS -------->
  54. <style>
  55.  
  56. /*--- EDIT HERE ----*/
  57. :root {
  58.  
  59. /*---- VARIABLES ----*/
  60. --Corners:10px; /* 0px, 5px, or 10px recommended */
  61. --Glow:0 0 10px; /* change to 0 if you don't want the glow */
  62.  
  63. /*---- FONT STYLE -----*/
  64. --BodyFont:'Nunito'; /* replace the font names above ^ too */
  65. --TitleFont:'Montserrat';
  66. --FontSize:15px;
  67. }
  68.  
  69. html[data-theme='light'] {
  70. --LightOn: flex;
  71. --LightOff: none;
  72.  
  73. /* EDIT HERE: LIGHT MODE COLORS */
  74. --ColorBackground:#eee;
  75. --ColorContent:#fafafa;
  76. --ColorBorders:#ddd;
  77. --ColorTitle:#333;
  78. --ColorText:#666;
  79. --ColorLink:#4685b3;
  80. --ColorAccent:#2d71a2;
  81. --ColorGradientOne:#6389a5;
  82. --ColorGradientTwo:#93c0e2;
  83. --ColorGradientText:#fff;
  84. --ColorGradientAccent:#def1ff;
  85.  
  86. --ColorOpacity:rgba(0,0,0,.1);
  87. --ColorReverseOpacity:rgba(255,255,255,.1);
  88. }
  89. html[data-theme='dark'] {
  90. --LightOn: none;
  91. --LightOff: flex;
  92.  
  93. /* EDIT HERE: DARK MODE COLORS */
  94. --ColorBackground:#222;
  95. --ColorContent:#333;
  96. --ColorBorders:#555;
  97. --ColorTitle:#eee;
  98. --ColorText:#bbb;
  99. --ColorLink:#b2d1e4;
  100. --ColorAccent:#c5e9ff;
  101. --ColorGradientOne:#7098b1;
  102. --ColorGradientTwo:#99bbd0;
  103. --ColorGradientText:#fff;
  104. --ColorGradientAccent:#dff3ff;
  105.  
  106. --ColorOpacity:rgba(255,255,255,.1);
  107. --ColorReverseOpacity:rgba(0,0,0,.1);
  108. }
  109.  
  110. html.theme-transition,
  111. html.theme-transition *,
  112. html.theme-transition *:before,
  113. html.theme-transition *:after {
  114. transition: 0s !important;
  115. transition-delay: 0 !important;
  116. }
  117.  
  118. .light-on{
  119. display: var(--LightOn);
  120. }
  121. .light-off{
  122. display: var(--LightOff);
  123. }
  124.  
  125. /*--- TOOLTIPS ---*/
  126. .tippy-tooltip.custom-theme {
  127. font-family:var(--TitleFont), sans-serif;
  128. font-size:.9em;
  129. color:var(--ColorContent);
  130. text-transform:lowercase;
  131. text-align:center;
  132. letter-spacing:.1em;
  133. background:var(--ColorAccent);
  134. box-shadow:4px 4px 8px rgba(0,0,0,.1);
  135. border-radius:var(--Corners);
  136. margin-bottom:.5em;
  137. }
  138.  
  139. /*--- SCROLLBAR ---*/
  140. ::-webkit-scrollbar {
  141. width:5px;
  142. height:5px;
  143. background:var(--ColorContent);
  144. }
  145.  
  146. ::-webkit-scrollbar-track {
  147. background:var(--ColorContent);
  148. border-radius:5px;
  149. }
  150.  
  151. ::-webkit-scrollbar-thumb {
  152. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  153. border-radius:5px;
  154. }
  155.  
  156. /*--- TEXT SELECTION ---*/
  157. ::-moz-selection { /* Code for Firefox */
  158. color:var(--ColorContent);
  159. background:var(--ColorAccent);
  160. }
  161.  
  162. ::selection {
  163. color:var(--ColorContent);
  164. background:var(--ColorAccent);
  165. }
  166.  
  167. /*--- COMMON ---*/
  168.  
  169. body {
  170. font-family:var(--BodyFont), sans-serif;
  171. font-size:var(--FontSize);
  172. color: var(--ColorText);
  173. background-color: var(--ColorBackground);
  174. line-height:140%;
  175. word-wrap:break-word;
  176. letter-spacing:.04em;
  177. margin:0;
  178. }
  179.  
  180. a {
  181. color:var(--ColorLink);
  182. text-decoration: none;
  183. -webkit-transition: all 0.3s;
  184. -moz-transition: all 0.3s;
  185. -ms-transition: all 0.3s;
  186. -o-transition: all 0.3s;
  187. transition: all 0.3s;
  188. }
  189.  
  190. a:hover {
  191. color: var(--ColorAccent);
  192. -webkit-transition: all 0.3s;
  193. -moz-transition: all 0.3s;
  194. -ms-transition: all 0.3s;
  195. -o-transition: all 0.3s;
  196. transition: all 0.3s;
  197. }
  198.  
  199. .description a {
  200. position:relative;
  201. white-space:nowrap;
  202. border-bottom:2px solid var(--ColorBorders);
  203. }
  204.  
  205. .description a:after {
  206. content:'';
  207. position:absolute;
  208. width:100%;
  209. transform:scaleX(0);
  210. height:2px;
  211. bottom:-2px;
  212. left:0;
  213. background-color:var(--ColorLink);
  214. border-radius:5px;
  215. transform-origin:middle;
  216. transition: transform 0.25s ease-out;
  217. }
  218.  
  219. .description a:hover:after {
  220. transform: scaleX(1);
  221. transform-origin:middle;
  222. }
  223.  
  224. button {font-size:1em;}
  225.  
  226. blockquote {
  227. border-left:2px solid var(--ColorBorders);
  228. padding-left:.75em;
  229. margin-left:1em;
  230. }
  231.  
  232. li {list-style-type:circle;}
  233. li::marker {color:var(--ColorAccent)}
  234.  
  235. h1, h1 a, h2, h3, h4, h5 {
  236. font-family:var(--TitleFont), sans-serif;
  237. letter-spacing:.1em;
  238. color:var(--ColorTitle);
  239. font-weight:700;
  240. }
  241.  
  242. h1 {font-size:1.2em;}
  243. h2 {font-size:1.15em;}
  244. h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
  245. h4 {font-size:1.05em;}
  246. h5 {font-size:1.025em;}
  247. h1 a:hover {color:var(--ColorAccent);}
  248.  
  249. h4 {margin:0 0 1em 0; text-align:center;}
  250. h5 {margin:0; padding:0;}
  251.  
  252. small {font-size: 0.95em;}
  253. big {font-size: 1.1em;}
  254.  
  255. hr {
  256. height: 1px;
  257. border: none;
  258. box-shadow: none;
  259. background-color: var(--ColorBorders);
  260. }
  261.  
  262. pre {
  263. line-height: inherit;
  264. font-size: inherit;
  265. white-space: pre-wrap;
  266. white-space: -moz-pre-wrap;
  267. white-space: -pre-wrap;
  268. white-space: -o-pre-wrap;
  269. word-wrap: break-word;
  270. }
  271.  
  272. b, strong {
  273. color:var(--ColorTitle);
  274. font-weight:800;
  275. }
  276.  
  277. b a:hover {
  278. color:var(--ColorAccent);
  279. -webkit-transition: all 0.3s;
  280. -moz-transition: all 0.3s;
  281. -ms-transition: all 0.3s;
  282. -o-transition: all 0.3s;
  283. transition: all 0.3s;
  284. }
  285.  
  286. /*--- MAIN CONTAINERS ---*/
  287.  
  288. main {
  289. width:100%;
  290. display:flex;
  291. justify-content:center;
  292. }
  293.  
  294. header {
  295. position:fixed;
  296. top:0;
  297. left:0;
  298. right:0;
  299. width:calc(100% - 2em);
  300. height:60px;
  301. padding:0 1em 0 1em;
  302. display:flex;
  303. justify-content:space-between;
  304. align-items:center;
  305. gap:1em;
  306. background:var(--ColorContent);
  307. z-index:9999;
  308. }
  309.  
  310. .topleft {
  311. display:flex;
  312. justify-content:flex-start;
  313. align-items:center;
  314. gap:1em;
  315. }
  316.  
  317. .topleft a {
  318. position:relative;
  319. display:flex;
  320. justify-content:center;
  321. align-items:center;
  322. padding:.5em;
  323. border-radius:100%;
  324. z-index:2;
  325. }
  326. .topleft a:after {
  327. content:'';
  328. position:absolute;
  329. width:100%;
  330. height:100%;
  331. opacity:0;
  332. background:var(--ColorAccent);
  333. border-radius:100%;
  334. z-index:-1;
  335. -webkit-transition: all 0.4s;
  336. -moz-transition: all 0.4s;
  337. -ms-transition: all 0.4s;
  338. -o-transition: all 0.4s;
  339. transition: all 0.4s;
  340. }
  341. .topleft a:hover:after {opacity:.35;}
  342.  
  343. .topleft i {
  344. font-size:1.5em;
  345. color:var(--ColorTitle);
  346. -webkit-transition: all 0.4s;
  347. -moz-transition: all 0.4s;
  348. -ms-transition: all 0.4s;
  349. -o-transition: all 0.4s;
  350. transition: all 0.4s;
  351. }
  352.  
  353. .topleft a:hover i {
  354. color:var(--ColorAccent);
  355. text-shadow:var(--Glow);
  356. -webkit-transition: all 0.4s;
  357. -moz-transition: all 0.4s;
  358. -ms-transition: all 0.4s;
  359. -o-transition: all 0.4s;
  360. transition: all 0.4s;
  361. }
  362.  
  363. .topleft li {
  364. font-family:var(--TitleFont), sans-serif;
  365. display:flex;
  366. flex-direction:column;
  367. line-height:120%;
  368. }
  369. .topleft li b {font-weight:600;}
  370. .topleft li span {font-size:.85em;}
  371.  
  372. .topright {
  373. display:flex;
  374. justify-content:flex-end;
  375. align-items:center;
  376. gap:.5em;
  377. }
  378.  
  379. /*--- CREDIT: DO NOT TOUCH ---*/
  380. a.credit {
  381. position:relative;
  382. display:flex;
  383. justify-content:center;
  384. align-items:center;
  385. padding:.5em;
  386. border:1px solid var(--ColorBorders);
  387. border-radius:100%;
  388. z-index:2;
  389. }
  390. a.credit:hover {border:1px solid transparent;}
  391. a.credit:after {
  392. content:'';
  393. position:absolute;
  394. width:100%;
  395. height:100%;
  396. opacity:0;
  397. background:var(--ColorAccent);
  398. border-radius:100%;
  399. z-index:-1;
  400. -webkit-transition: all 0.4s;
  401. -moz-transition: all 0.4s;
  402. -ms-transition: all 0.4s;
  403. -o-transition: all 0.4s;
  404. transition: all 0.4s;
  405. }
  406. a.credit:hover:after {opacity:.35;}
  407.  
  408. a.credit i {
  409. font-size:1.5em;
  410. color:var(--ColorTitle);
  411. -webkit-transition: all 0.4s;
  412. -moz-transition: all 0.4s;
  413. -ms-transition: all 0.4s;
  414. -o-transition: all 0.4s;
  415. transition: all 0.4s;
  416. }
  417.  
  418. a.credit:hover i {
  419. color:var(--ColorAccent);
  420. text-shadow:var(--Glow);
  421. -webkit-transition: all 0.4s;
  422. -moz-transition: all 0.4s;
  423. -ms-transition: all 0.4s;
  424. -o-transition: all 0.4s;
  425. transition: all 0.4s;
  426. -webkit-animation-duration: 2s;
  427. animation-duration: 2s;
  428. -webkit-animation-fill-mode: both;
  429. animation-fill-mode: both;
  430. -webkit-animation-timing-function: ease-in-out;
  431. animation-timing-function: ease-in-out;
  432. animation-iteration-count:infinite;
  433. -webkit-animation-iteration-count:infinite;
  434. animation-name: bounce;
  435. -moz-animation-name: bounce;
  436. }
  437.  
  438. @keyframes bounce {
  439. 0% {
  440. -webkit-transform: translateY(0px);
  441. -ms-transform: translateY(0px);
  442. transform: translateY(0px)
  443. }
  444. 25% {
  445. -webkit-transform: translateY(-3px);
  446. -ms-transform: translateY(-3px);
  447. transform: translateY(-3px)
  448. }
  449. 50% {
  450. -webkit-transform: translateY(0px);
  451. -ms-transform: translateY(0px);
  452. transform: translateY(0px)
  453. }
  454. 75% {
  455. -webkit-transform: translateY(-3px);
  456. -ms-transform: translateY(-3px);
  457. transform: translateY(-3px)
  458. }
  459. 100% {
  460. -webkit-transform: translateY(0px);
  461. -ms-transform: translateY(0px);
  462. transform: translateY(0px)
  463. }
  464. }
  465.  
  466. /* DAY/NIGHT */
  467. button#theme-toggle {
  468. outline:none;
  469. border:none;
  470. padding:0;
  471. background:transparent;
  472. display:flex;
  473. justify-content:center;
  474. align-items:center;
  475. }
  476.  
  477. button#theme-toggle span {
  478. position:relative;
  479. justify-content:center;
  480. align-items:center;
  481. padding:.5em;
  482. border:1px solid var(--ColorBorders);
  483. border-radius:100%;
  484. cursor:help;
  485. z-index:2;
  486. -webkit-transition: all 0.4s;
  487. -moz-transition: all 0.4s;
  488. -ms-transition: all 0.4s;
  489. -o-transition: all 0.4s;
  490. transition: all 0.4s;
  491. }
  492. button#theme-toggle span:hover {border:1px solid transparent;}
  493. button#theme-toggle span:after {
  494. content:'';
  495. position:absolute;
  496. width:100%;
  497. height:100%;
  498. opacity:0;
  499. background:var(--ColorAccent);
  500. border-radius:100%;
  501. z-index:-1;
  502. -webkit-transition: all 0.4s;
  503. -moz-transition: all 0.4s;
  504. -ms-transition: all 0.4s;
  505. -o-transition: all 0.4s;
  506. transition: all 0.4s;
  507. }
  508. button#theme-toggle span:hover:after {opacity:.35;}
  509.  
  510. button#theme-toggle i {
  511. font-size:1.5em;
  512. color:var(--ColorTitle);
  513. -webkit-transition: all 0.4s;
  514. -moz-transition: all 0.4s;
  515. -ms-transition: all 0.4s;
  516. -o-transition: all 0.4s;
  517. transition: all 0.4s;
  518. }
  519. button#theme-toggle span:hover i {
  520. color:var(--ColorAccent);
  521. text-shadow:var(--Glow);
  522. -webkit-transition: all 0.4s;
  523. -moz-transition: all 0.4s;
  524. -ms-transition: all 0.4s;
  525. -o-transition: all 0.4s;
  526. transition: all 0.4s;
  527. -webkit-animation-duration: .75s;
  528. animation-duration: .75s;
  529. -webkit-animation-fill-mode: both;
  530. animation-fill-mode: both;
  531. -webkit-animation-timing-function: ease-in-out;
  532. animation-timing-function: ease-in-out;
  533. animation-iteration-count:1;
  534. -webkit-animation-iteration-count:1;
  535. animation-name:daynight;
  536. -moz-animation-name:daynight;
  537. }
  538.  
  539. @keyframes daynight {
  540. 50% {
  541. -webkit-transform: scaleX(-1);
  542. -ms-transform: scaleX(-1);
  543. transform: scaleX(-1);
  544. }
  545. }
  546.  
  547. /* TUMBLR CONTROLS */
  548. a#controlsbutton {
  549. position:relative;
  550. display:flex;
  551. justify-content:center;
  552. align-items:center;
  553. padding:.5em;
  554. border:1px solid var(--ColorBorders);
  555. border-radius:100%;
  556. cursor:help;
  557. z-index:2;
  558. }
  559. a#controlsbutton:hover {border:1px solid transparent;}
  560. a#controlsbutton:after {
  561. content:'';
  562. position:absolute;
  563. width:100%;
  564. height:100%;
  565. opacity:0;
  566. background:var(--ColorAccent);
  567. border-radius:100%;
  568. z-index:-1;
  569. -webkit-transition: all 0.4s;
  570. -moz-transition: all 0.4s;
  571. -ms-transition: all 0.4s;
  572. -o-transition: all 0.4s;
  573. transition: all 0.4s;
  574. }
  575. a#controlsbutton:hover:after {opacity:.35;}
  576.  
  577. a#controlsbutton i {
  578. font-size:1.5em;
  579. color:var(--ColorTitle);
  580. -webkit-transition: all 0.4s;
  581. -moz-transition: all 0.4s;
  582. -ms-transition: all 0.4s;
  583. -o-transition: all 0.4s;
  584. transition: all 0.4s;
  585. }
  586. a#controlsbutton:hover i {
  587. color:var(--ColorAccent);
  588. text-shadow:var(--Glow);
  589. -webkit-transition: all 0.4s;
  590. -moz-transition: all 0.4s;
  591. -ms-transition: all 0.4s;
  592. -o-transition: all 0.4s;
  593. transition: all 0.4s;
  594. -webkit-animation-duration: 1.5s;
  595. animation-duration: 1.5s;
  596. -webkit-animation-fill-mode: both;
  597. animation-fill-mode: both;
  598. -webkit-animation-timing-function: ease-in-out;
  599. animation-timing-function: ease-in-out;
  600. animation-iteration-count:1;
  601. -webkit-animation-iteration-count:1;
  602. animation-name:tumblrcontrols;
  603. -moz-animation-name:tumblrcontrols;
  604. }
  605.  
  606. @keyframes tumblrcontrols {
  607. 45% {
  608. -webkit-transform: rotate(180deg);
  609. -ms-transform: rotate(180deg);
  610. transform: rotate(180deg);
  611. }
  612. 55% {
  613. -webkit-transform: rotate(180deg);
  614. -ms-transform: rotate(180deg);
  615. transform: rotate(180deg);
  616. }
  617. 100% {
  618. -webkit-transform: rotate(360deg);
  619. -ms-transform: rotate(360deg);
  620. transform: rotate(360deg);
  621. }
  622. }
  623.  
  624. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  625. z-index:999999999!important;
  626. margin-top:60px;
  627. margin-right:-2em;
  628. transform:scale(.75);
  629. opacity:0;
  630. visibility:hidden;
  631. }
  632.  
  633. body.controlsclick iframe.tmblr-iframe {
  634. opacity:1.0;
  635. visibility:visible;
  636. -webkit-transition: all 0.5s;
  637. -moz-transition: all 0.5s;
  638. -ms-transition: all 0.5s;
  639. -o-transition: all 0.5s;
  640. transition: all 0.5s;
  641. }
  642.  
  643. body.controlsclick #controlsbutton i {
  644. color:var(--ColorAccent);
  645. }
  646.  
  647. /*--- MAIN CONTENT ---*/
  648.  
  649. .mainwrap {
  650. position:relative;
  651. width:800px;
  652. max-height:calc(100vh - 60px - 2em);
  653. overflow-y:auto;
  654. margin-top:calc(60px + 1em);
  655. margin-left:2em;
  656. margin-right:2em;
  657. margin-bottom:1em;
  658. background:var(--ColorContent);
  659. border-radius:var(--Corners);
  660. }
  661.  
  662. section {
  663. position:relative;
  664. width:100%;
  665. height:100%;
  666. overflow-y:auto;
  667. display:flex;
  668. flex-direction:column;
  669. }
  670.  
  671. /* BANNER */
  672. .banner {
  673. position:relative;
  674. width:100%;
  675. display:flex;
  676. justify-content:center;
  677. align-items:center;
  678. }
  679. .bannerimg {
  680. width:100%;
  681. display:flex;
  682. justify-content:center;
  683. align-items:center;
  684. }
  685. .bannerimg img {
  686. width:100%;
  687. height:200px;
  688. object-fit:cover;
  689. border-radius:var(--Corners) var(--Corners) 0 0;
  690. }
  691. .portraitimg {
  692. position:absolute;
  693. bottom:-50px;
  694. left:1em;
  695. width:calc(100% - 1em);
  696. display:flex;
  697. justify-content:space-between;
  698. align-items:flex-end;
  699. }
  700. .portraitimg img {
  701. width:96px;
  702. height:96px;
  703. object-fit:cover;
  704. padding:4px;
  705. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  706. border-radius:100%;
  707. }
  708.  
  709. /* main buttons */
  710. .mainbuttons {
  711. position:absolute;
  712. right:0;
  713. bottom:-60px;
  714. width:fit-content;
  715. height:60px;
  716. padding:0 1em 0 1em;
  717. display:flex;
  718. justify-content:flex-end;
  719. align-items:center;
  720. gap:.5em;
  721. z-index:9999;
  722. }
  723. .mainbuttons a.mainlink {
  724. position:relative;
  725. display:flex;
  726. justify-content:center;
  727. align-items:center;
  728. padding:.5em;
  729. background:transparent;
  730. border-radius:100%;
  731. border:1px solid var(--ColorBorders);
  732. }
  733. a#followbutton {padding:.5em 1em .5em 1em; border-radius:50px;}
  734. a.mainlink:hover {border:1px solid transparent;}
  735. a.mainlink i {
  736. font-size:1.5em;
  737. color:var(--ColorTitle);
  738. -webkit-transition: all 0.4s;
  739. -moz-transition: all 0.4s;
  740. -ms-transition: all 0.4s;
  741. -o-transition: all 0.4s;
  742. transition: all 0.4s;
  743. }
  744. a.mainlink:hover i {
  745. color:var(--ColorAccent);
  746. text-shadow:var(--Glow);
  747. }
  748. a.mainlink b {
  749. font-family:var(--TitleFont), sans-serif;
  750. font-weight:600;
  751. color:var(--ColorTitle);
  752. -webkit-transition: all 0.4s;
  753. -moz-transition: all 0.4s;
  754. -ms-transition: all 0.4s;
  755. -o-transition: all 0.4s;
  756. transition: all 0.4s;
  757. }
  758. a.mainlink:hover b {color:var(--ColorAccent); text-shadow:{select:Glow};}
  759. a.mainlink:after {
  760. content:'';
  761. position:absolute;
  762. left:0;
  763. top:0;
  764. width:100%;
  765. height:100%;
  766. opacity:0;
  767. background:var(--ColorAccent);
  768. border-radius:100%;
  769. border:1px solid var(--ColorAccent);
  770. -webkit-transition: all 0.4s;
  771. -moz-transition: all 0.4s;
  772. -ms-transition: all 0.4s;
  773. -o-transition: all 0.4s;
  774. transition: all 0.4s;
  775. }
  776. a#followbutton:after {border-radius:50px;}
  777. a.mainlink:hover:after {opacity:.25;}
  778.  
  779. /* more links dropdown */
  780. a#morebutton {cursor:help;}
  781. a#morebutton.more-click i {color:var(--ColorAccent);}
  782. .moredrop {
  783. position:absolute;
  784. right:100%;
  785. top:50%;
  786. width:200px;
  787. display:flex;
  788. flex-direction:column;
  789. overflow:hidden;
  790. background:var(--ColorContent);
  791. border-radius:var(--Corners);
  792. box-shadow:2px 2px 10px var(--ColorOpacity);
  793. }
  794. .moredrop a {
  795. position:relative;
  796. display:flex;
  797. justify-content:flex-start;
  798. align-items:center;
  799. gap:.5em;
  800. padding:.5em 1em .5em 1em;
  801. z-index:2;
  802. }
  803. .moredrop a:after {
  804. content:'';
  805. position:absolute;
  806. left:0;
  807. bottom:0;
  808. width:100%;
  809. height:100%;
  810. opacity:0;
  811. background:var(--ColorAccent);
  812. z-index:-1;
  813. -webkit-transition: all 0.4s;
  814. -moz-transition: all 0.4s;
  815. -ms-transition: all 0.4s;
  816. -o-transition: all 0.4s;
  817. transition: all 0.4s;
  818. }
  819. .moredrop a:hover:after {opacity:.35;}
  820. .moredrop i {
  821. font-size:1.3em;
  822. color:var(--ColorTitle);
  823. -webkit-transition: all 0.4s;
  824. -moz-transition: all 0.4s;
  825. -ms-transition: all 0.4s;
  826. -o-transition: all 0.4s;
  827. transition: all 0.4s;
  828. }
  829. .moredrop a:hover i {color:var(--ColorAccent); text-shadow:var(--Glow);}
  830. .moredrop b {
  831. font-weight:normal;
  832. -webkit-transition: all 0.4s;
  833. -moz-transition: all 0.4s;
  834. -ms-transition: all 0.4s;
  835. -o-transition: all 0.4s;
  836. transition: all 0.4s;
  837. }
  838. .moredrop a:hover b {color:var(--ColorAccent);}
  839.  
  840. /* main title */
  841. .maintitle {
  842. margin-top:50px;
  843. padding:1em;
  844. font-family:var(--TitleFont), sans-serif;
  845. display:flex;
  846. flex-direction:column;
  847. gap:.25em;
  848. }
  849. .maintitle li {
  850. display:flex;
  851. justify-content:flex-start;
  852. align-items:center;
  853. gap:.5em;
  854. }
  855. .maintitle b {font-size:1.4em;}
  856. .maintitle i {
  857. font-size:1.3em;
  858. color:var(--ColorAccent);
  859. }
  860.  
  861. /* status */
  862. .status {
  863. width:calc(100% - 2em);
  864. color:var(--ColorTitle);
  865. padding:0 1em .5em 1em;
  866. }
  867. .status p {margin-bottom:0; margin-top:0;}
  868.  
  869. /* stats & blogs wrap */
  870. .statwrap {
  871. display:flex;
  872. flex-direction:column;
  873. gap:1em;
  874. padding:.5em 1em 1em 1em;
  875. border-bottom:1px solid var(--ColorBorders);
  876. }
  877.  
  878. /* stats */
  879. .stats {
  880. width:100%;
  881. display:flex;
  882. justify-content:flex-start;
  883. align-items:center;
  884. flex-wrap:wrap;
  885. gap:.5em;
  886. }
  887. .stats li {
  888. display:flex;
  889. justify-content:flex-start;
  890. align-items:center;
  891. gap:.25em;
  892. }
  893. .stats li i {
  894. position:relative;
  895. font-size:1.25em;
  896. color:var(--ColorText);
  897. display:flex;
  898. align-items:center;
  899. }
  900. .stats li b {
  901. font-weight:normal;
  902. color:var(--ColorText);
  903. white-space:nowrap;
  904. display:flex;
  905. align-items:center;
  906. }
  907.  
  908. /* blogs */
  909. .stats a {
  910. display:flex;
  911. justify-content:flex-start;
  912. align-items:center;
  913. gap:.5em;
  914. }
  915. .stats a img {
  916. width:1.5em;
  917. height:1.5em;
  918. object-fit:cover;
  919. border-radius:100%;
  920. -webkit-transition: all 0.4s;
  921. -moz-transition: all 0.4s;
  922. -ms-transition: all 0.4s;
  923. -o-transition: all 0.4s;
  924. transition: all 0.4s;
  925. }
  926. .stats a:hover img {transform:rotate(10deg);}
  927. .stats a b {
  928. font-weight:normal;
  929. color:var(--ColorAccent);
  930. white-space:nowrap;
  931. line-height:100%;
  932. border-bottom:1px solid transparent;
  933. -webkit-transition: all 0.4s;
  934. -moz-transition: all 0.4s;
  935. -ms-transition: all 0.4s;
  936. -o-transition: all 0.4s;
  937. transition: all 0.4s;
  938. }
  939. .stats a:hover b {border-bottom:1px solid var(--ColorAccent);}
  940.  
  941. /* numbers */
  942. .numbers {
  943. display:flex;
  944. justify-content:flex-start;
  945. align-items:center;
  946. gap:1em;
  947. }
  948. .numbers li {
  949. display:flex;
  950. justify-content:flex-start;
  951. align-items:center;
  952. gap:.25em;
  953. }
  954. .numbers a {color:var(--ColorTitle);}
  955.  
  956. /* DESCRIPTION */
  957. .description {
  958. width:calc(100% - 2em);
  959. height:calc(100% - 2em);
  960. overflow-y:auto;
  961. padding:1em;
  962. }
  963. .description::-webkit-scrollbar {
  964. width:4px;
  965. height:4px;
  966. background:transparent;
  967. }
  968. .description::-webkit-scrollbar-track {background:transparent;margin-bottom:.25em;}
  969.  
  970. /*---- RESPONSIVENESS ---*/
  971.  
  972. @media only screen and (max-width: 800px) {
  973. .mainwrap {width:100%;}
  974. }
  975.  
  976. @media only screen and (max-width: 600px) {
  977. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
  978. .moredrop {right:auto; top:100%;}
  979. }
  980.  
  981. @media only screen and (max-width: 450px) {
  982. body {background:var(--ColorContent);}
  983. .mainwrap {margin:0 0 0 0; width:100%; max-height:100vh; overflow-y:visible; border-radius:0;}
  984. section {overflow-y:visible;}
  985. .bannerimg img {border-radius:0;}
  986. .description {overflow-y:visible;}
  987. }
  988.  
  989. {CustomCSS}
  990.  
  991. </style>
  992. </head>
  993.  
  994. <!----- HTML ----->
  995.  
  996. <body>
  997. <main><!-- main container -->
  998.  
  999. <!-- HEADER -->
  1000. <header>
  1001. <div class="topleft">
  1002. <a title="back to blog" href="/"><i class="ti ti-arrow-left"></i></a>
  1003. <li><b>{Title}</b>
  1004. <span>@{Name}</span></li>
  1005. </div>
  1006. <div class="topright">
  1007. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1008. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1009. <span class="light-off" title="turn on the lights"><i class="ti ti-sun"></i></span>
  1010. </button>
  1011. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1012.  
  1013. <!--- CREDIT: DO NOT TOUCH --->
  1014. <a class="credit" title="page by sage" href="https://phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  1015. </div>
  1016. </header>
  1017.  
  1018. <!-- main content -->
  1019. <div class="mainwrap">
  1020.  
  1021. <section>
  1022.  
  1023. <!--- EDIT HERE: BANNER
  1024.  
  1025. - replace the banner image link with the image link of your choosing
  1026. - you can replace your icon with an image link too if you want
  1027.  
  1028. --->
  1029. <div class="banner">
  1030. <div class="bannerimg"><img src="https://64.media.tumblr.com/c7f3e43582722da0b23cc3f9d1851267/cd457da01e6cbba5-69/s2048x3072/0415fdf4faaffcdbdf374155e077e01c28e43a8f.jpg"></div>
  1031. <div class="portraitimg"><img src="{PortraitURL-128}"></div>
  1032. <div class="mainbuttons">
  1033.  
  1034. <!-- EDIT HERE: MORE LINKS
  1035. if you don't want this, DELETE starting here -->
  1036. <a class="mainlink" id="morebutton" title="toggle links"><i class="ti ti-dots"></i></a>
  1037. <div class="moredrop">
  1038. <!--- EDIT HERE: LINKS DROPDOWN
  1039.  
  1040. FORMAT:
  1041.  
  1042. <a href="LINKURLHERE"><i class="ti ti-TABLER-ICON-HERE"></i><b>LINK NAME</b></a>
  1043.  
  1044. - capitalized words indicate what you can change
  1045. - copy and paste as many links as you want but keep in mind this menu will not scroll
  1046.  
  1047. ---->
  1048. <a href="/"><i class="ti ti-box-multiple-1"></i><b>link one</b></a>
  1049. <a href="/"><i class="ti ti-box-multiple-2"></i><b>link two</b></a>
  1050. <a href="/"><i class="ti ti-box-multiple-3"></i><b>link three</b></a>
  1051. <a href="/"><i class="ti ti-box-multiple-4"></i><b>link four</b></a>
  1052. <a href="/"><i class="ti ti-box-multiple-5"></i><b>link five</b></a>
  1053. </div>
  1054. <!--- DELETE ending here / more links ends ---->
  1055.  
  1056. <a class="mainlink" title="contact" href="/ask"><i class="ti ti-mail"></i></a>
  1057. <a class="mainlink" id="followbutton" target="_blank" href="//tumblr.com/follow/{Name}"><b>follow</b></a>
  1058. </div>
  1059. </div>
  1060.  
  1061. <!--- EDIT HERE: TITLE
  1062.  
  1063. - make sure your title stays wrapped in <b></b>
  1064. - if you change the subtitle make sure it stays wrapped in <span></span>
  1065.  
  1066. --->
  1067. <div class="maintitle">
  1068. <li><b>name</b><i class="ph-circle-wavy-check-fill"></i></li>
  1069. <span>about me</span>
  1070. </div>
  1071.  
  1072. <!-- EDIT HERE: STATUS - keep this short, you can delete it if you don't want it -->
  1073. <div class="status">short text/quote/etc.</div>
  1074.  
  1075. <div class="statwrap">
  1076. <!-- stats & blogs -->
  1077. <div class="stats">
  1078.  
  1079. <!--- EDIT HERE: STATS & BLOGS
  1080.  
  1081. STATS FORMAT:
  1082. <li>
  1083. <i class="ti ti-ICON-NAME-HERE"></i>
  1084. <b>TEXT HERE</b>
  1085. <li>
  1086.  
  1087. BLOGS FORMAT:
  1088. <li><a href="//BLOGNAME.tumblr.com">
  1089. <img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar">
  1090. <b>BLOGNAME.tumblr.com</b>
  1091. </a></li>
  1092.  
  1093. - capitalized words indicate what you can change
  1094. - copy and paste as many times as you want
  1095.  
  1096. ---->
  1097. <li>
  1098. <i class="ti ti-writing-sign"></i>
  1099. <b>name</b>
  1100. <li>
  1101. <li>
  1102. <i class="ti ti-id"></i>
  1103. <b>pronouns</b>
  1104. <li>
  1105. <li>
  1106. <i class="ti ti-cake"></i>
  1107. <b>age</b>
  1108. <li>
  1109. <li>
  1110. <i class="ti ti-map-pin"></i>
  1111. <b>location</b>
  1112. <li>
  1113. <li><a href="//phantomcodes.tumblr.com">
  1114. <img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
  1115. <b>phantomcodes.tumblr.com</b>
  1116. </a></li>
  1117. </div><!-- stats & blogs end -->
  1118.  
  1119. <!-- EDIT HERE: NUMBERS
  1120.  
  1121. FORMAT:
  1122. <li><b>COUNTER SCRIPT HERE</b>
  1123. <span>TEXT HERE</span></li>
  1124.  
  1125. - i use https://freehostedscripts.net/ for their online users and text hit counters
  1126. - it will give you what you need to copy/paste between <b></b>
  1127.  
  1128. -->
  1129. <div class="numbers">
  1130. <li><b>12</b>
  1131. <span>visitors</span></li>
  1132.  
  1133. <li><b>12345</b>
  1134. <span>hits</span></li>
  1135. </div><!-- numbers ends -->
  1136.  
  1137. </div><!-- .statwrap -->
  1138.  
  1139. <!--- EDIT HERE: DESCRIPTION --->
  1140. <div class="description">
  1141. description text goes here. <b>bold text</b>. <a href="/">here's a link</a>.
  1142. <li>this is</li>
  1143. <li>a list</li>
  1144. <li>of things</li>
  1145. <blockquote>blockquote. here's a <b><a href="/">bold link</a></b>.</blockquote>
  1146. </div><!-- description ends -->
  1147. </section>
  1148.  
  1149. </div><!-- mainwrap ends -->
  1150.  
  1151. </main><!-- end of main container -->
  1152.  
  1153. <script>
  1154.  
  1155. // tooltips
  1156. tippy('[title]', {
  1157. theme: 'custom',
  1158. arrow: false,
  1159. followCursor: true,
  1160. delay: 100,
  1161. placement: 'bottom',
  1162. offset: "40, 10",
  1163. zIndex: 9999999999,
  1164. maxWidth: 400,
  1165.  
  1166. content(reference) {
  1167. const title = reference.getAttribute('title');
  1168. reference.removeAttribute('title');
  1169. return title;
  1170. },
  1171. });
  1172.  
  1173. // more links dropdown
  1174. $(document).ready(function() {
  1175. $(".moredrop").hide();
  1176. $("a#morebutton").click(function(event){
  1177. $(this).next(".moredrop").slideToggle(500);
  1178. event.preventDefault();
  1179. $(this).toggleClass('upside', 500);
  1180. $(this).toggleClass('more-click');
  1181. });
  1182. });
  1183.  
  1184. // tumblr controls
  1185. $(document).ready(function(){
  1186. $('#controlsbutton').click(function(){
  1187. $('body').toggleClass('controlsclick');
  1188. });
  1189. });
  1190.  
  1191. // day/night mode
  1192. const toggle = document.getElementById("theme-toggle");
  1193.  
  1194. toggle.onclick = function () {
  1195. // add class to html and make transition snappy
  1196. document.documentElement.classList.add("theme-transition");
  1197. // alright lets retrive the info from data-theme
  1198. let currentTheme = document.documentElement.getAttribute("data-theme");
  1199. // if it's dark already, let's go into the light
  1200. let targetTheme = "light";
  1201. // but if it is light let's toggle dark mode
  1202. if (currentTheme === "light") {
  1203. targetTheme = "dark";
  1204. }
  1205. // ok now that theme has been toggled, get rid of snappy transition
  1206. window.setTimeout(function () {
  1207. document.documentElement.classList.remove("theme-transition");
  1208. }, 50);
  1209. // we're going to save our theme preference now
  1210. document.documentElement.setAttribute("data-theme", targetTheme);
  1211. localStorage.setItem("theme", targetTheme);
  1212. };
  1213.  
  1214. </script>
  1215.  
  1216. </body>
  1217. </html>
Advertisement
Add Comment
Please, Sign In to add comment