nicolas-sage

custom page 04

Sep 11th, 2024
138
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.36 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>about / {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. | |__| |__| | CUSTOM PAGE 04 BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20.  
  21. CREDITS:
  22. - tabler icons / https://tabler-icons.io/
  23. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  24. - bunny fonts / https://fonts.bunny.net/
  25.  
  26. ---->
  27.  
  28. <!---- JQUERY ---->
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!----- BUNNY FONTS ---->
  32. <link href="https://fonts.bunny.net/css?family=Lora:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Merriweather:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  33.  
  34. <!---- ICONS ---->
  35. <script src="https://unpkg.com/phosphor-icons"></script>
  36. <script src="https://unpkg.com/[email protected]"></script>
  37. <script src="//pull.cappuccicons.com/cpf.js"></script>
  38.  
  39. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  40. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  41.  
  42. <!---- TOOLTIPS ---->
  43. <script src="https://unpkg.com/popper.js@1"></script>
  44. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  45.  
  46. <!--- day/night --->
  47. <script>
  48. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  49. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  50. </script>
  51.  
  52. <!------- CSS -------->
  53. <style>
  54.  
  55. /* theme options - common */
  56. :root {
  57.  
  58. /*--- EDIT HERE: corners & fonts ---*/
  59. --Corners:5px;
  60. --BodyFont:'Lora';
  61. --TitleFont:'Merriweather';
  62. --FontSize:13px;
  63.  
  64. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .8);
  65. --ColorOpaquePostsLess:rgb(from var(--ColorPosts) r g b / .5);
  66. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  67. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  68. --ColorOpaqueAccentThree:rgb(from var(--ColorAccentThree) r g b / .3);
  69. }
  70.  
  71. /* theme options - day/night */
  72. :root, html[data-theme='light'] {
  73. --LightOn: flex;
  74. --LightOff: none;
  75.  
  76. /*--- EDIT HERE: daymode colors ---*/
  77. --ColorBackground:#eee;
  78. --ColorPosts:#f2f2f2;
  79. --ColorBorders:#ccc;
  80. --ColorTitle:#404040;
  81. --ColorText:#606060;
  82. --ColorAccentOne:#cd709d;
  83. --ColorAccentTwo:#de8c9b;
  84. --ColorAccentThree:#e69189;
  85.  
  86. --LightShadow:rgba(255,255,255,.5);
  87. --LightShadowLess:rgba(255,255,255,.25);
  88. --DarkShadow:rgba(0,0,0,.4);
  89. --DarkShadowLess:rgba(0,0,0,.25);
  90. --DarkShadowLeast:rgba(0,0,0,.1);
  91. }
  92. html[data-theme='dark'] {
  93. --LightOn: none;
  94. --LightOff: flex;
  95.  
  96. /*--- EDIT HERE: nightmode colors ---*/
  97. --ColorBackground:#383838;
  98. --ColorPosts:#3a3a3a;
  99. --ColorBorders:#4a4a4a;
  100. --ColorTitle:#fafafa;
  101. --ColorText:#dadada;
  102. --ColorAccentOne:#ffbad7;
  103. --ColorAccentTwo:#ffa5b6;
  104. --ColorAccentThree:#ffb7b7;
  105.  
  106. --LightShadow:rgba(255,255,255,.3);
  107. --LightShadowLess:rgba(255,255,255,.15);
  108. --DarkShadow:rgba(0,0,0,.8);
  109. --DarkShadowLess:rgba(0,0,0,.5);
  110. --DarkShadowLeast:rgba(0,0,0,.15);
  111. }
  112. html.theme-transition,
  113. html.theme-transition *,
  114. html.theme-transition *:before,
  115. html.theme-transition *:after {
  116. transition: 0s !important;
  117. transition-delay: 0 !important;
  118. }
  119.  
  120. .light-on{
  121. display: var(--LightOn);
  122. }
  123. .light-off{
  124. display: var(--LightOff);
  125. }
  126.  
  127. /*--- TOOLTIPS ---*/
  128.  
  129. .tippy-tooltip.custom-theme {
  130. font-size:.95em;
  131. font-weight:500;
  132. color:var(--ColorPosts);
  133. text-transform:lowercase;
  134. text-align:center;
  135. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  136. border-radius:5px;
  137. }
  138.  
  139. /*--- SCROLLBAR ---*/
  140. ::-webkit-scrollbar {
  141. width:4px;
  142. height:4px;
  143. background:var(--ColorBackground);
  144. }
  145. ::-webkit-scrollbar-track {
  146. margin-bottom:.5rem;
  147. background:var(--ColorBackground);
  148. border-radius: 5px;
  149. }
  150. ::-webkit-scrollbar-thumb {
  151. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  152. border-radius: 5px;
  153. }
  154.  
  155. /*--- TEXT SELECTION ---*/
  156. ::-moz-selection { /* Code for Firefox */
  157. color:var(--ColorPosts);
  158. background:var(--ColorAccentOne);
  159. }
  160.  
  161. ::selection {
  162. color:var(--ColorPosts);
  163. background:var(--ColorAccentOne);
  164. }
  165.  
  166. * {box-sizing:border-box;}
  167.  
  168. body {
  169. font-family:var(--BodyFont), sans-serif;
  170. font-size:var(--FontSize);
  171. color:var(--ColorText);
  172. line-height:150%;
  173. word-wrap:break-word;
  174. letter-spacing:.04em;
  175. margin:0;
  176. background-color:var(--ColorBackground);
  177. }
  178. body {
  179. opacity:1;
  180. transition:.75s opacity;
  181. }
  182.  
  183. body.fade-out {
  184. opacity:0;
  185. transition:none;
  186. }
  187. html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
  188.  
  189. a {
  190. color:var(--ColorAccentOne);
  191. text-decoration:none;
  192. -webkit-transition: all 0.4s;
  193. -moz-transition: all 0.4s;
  194. -ms-transition: all 0.4s;
  195. -o-transition: all 0.4s;
  196. transition: all 0.4s;
  197. }
  198.  
  199. a:hover {
  200. color:var(--ColorAccentThree);
  201. -webkit-transition: all 0.4s;
  202. -moz-transition: all 0.4s;
  203. -ms-transition: all 0.4s;
  204. -o-transition: all 0.4s;
  205. transition: all 0.4s;
  206. }
  207.  
  208. blockquote {
  209. border-left:1.5px solid var(--ColorBorders);
  210. padding-left:.75em;
  211. margin-left:1em;
  212. }
  213. blockquote p {padding:0!important;}
  214.  
  215. ul {list-style-type:circle; margin:0 0 1rem 0; padding-right:.5rem;}
  216. ol {list-style-type:decimal-leading-zero; margin:0;}
  217. li::marker {color:var(--ColorAccentOne);}
  218.  
  219. small {font-size:.95em;}
  220. big {font-size:1.1em;}
  221.  
  222. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  223. h1 a {color:var(--ColorTitle);}
  224. h1 a:hover {color:var(--ColorAccentThree);}
  225. h2 {font-size:1.25em; color:var(--ColorTitle);}
  226. h3 {font-size:1.15em; color:var(--ColorTitle);}
  227. h4 {font-size:1.1em; color:var(--ColorTitle); margin-bottom:1rem;}
  228. h5 {font-size:1.05em; color:var(--ColorTitle);}
  229. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  230.  
  231. button {font-size:1em;}
  232.  
  233. hr {
  234. height:1px;
  235. border:none;
  236. box-shadow:none;
  237. background:var(--ColorBorders);
  238. }
  239.  
  240. pre {
  241. word-wrap:break-word!important;
  242. white-space:pre-wrap;
  243. }
  244.  
  245. b, strong {
  246. color:var(--ColorTitle);
  247. font-weight:800;
  248. }
  249.  
  250. b a:hover {
  251. color:var(--ColorAccentThree);
  252. -webkit-transition: all 0.4s;
  253. -moz-transition: all 0.4s;
  254. -ms-transition: all 0.4s;
  255. -o-transition: all 0.4s;
  256. transition: all 0.4s;
  257. }
  258.  
  259. /* common link effects */
  260. .sb-desc a, .aanswer a {
  261. display:inline-block;
  262. position:relative;
  263. border-bottom:1.5px solid var(--ColorBorders);
  264. }
  265. .sb-desc a:after, .aanswer a:after {
  266. content: '';
  267. position:absolute;
  268. bottom:-1.5px;
  269. left:0;
  270. width:100%;
  271. height:1.5px;
  272. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  273. transform:scaleX(0);
  274. transform-origin:center;
  275. transition:transform 0.4s ease-out;
  276. }
  277. .sb-desc a:hover:after, .aanswer a:hover:after {
  278. transform:scaleX(1);
  279. transform-origin:center;
  280. }
  281.  
  282. /*--- FIXED BUTTONS ---*/
  283. .fixedbuttons {
  284. position:fixed;
  285. top:.75rem;
  286. right:.75rem;
  287. display:flex;
  288. justify-content:flex-end;
  289. align-items:center;
  290. gap:.5rem;
  291. z-index:99999;
  292. }
  293.  
  294. /* TUMBLR CONTROLS */
  295. a#controlsbutton {
  296. display:flex;
  297. justify-content:center;
  298. align-items:center;
  299. background:var(--ColorBackground);
  300. cursor:help;
  301. }
  302. a#controlsbutton i {
  303. font-size:1.45em;
  304. color:var(--ColorTitle);
  305. -webkit-transition: all 0.4s;
  306. -moz-transition: all 0.4s;
  307. -ms-transition: all 0.4s;
  308. -o-transition: all 0.4s;
  309. transition: all 0.4s;
  310. }
  311. a#controlsbutton:hover i {
  312. color:var(--ColorAccentOne);
  313. -webkit-animation-duration: 1.5s;
  314. animation-duration: 1.5s;
  315. -webkit-animation-fill-mode: both;
  316. animation-fill-mode: both;
  317. -webkit-animation-timing-function: ease-in-out;
  318. animation-timing-function: ease-in-out;
  319. animation-iteration-count:1;
  320. -webkit-animation-iteration-count:1;
  321. animation-name:tumblrcontrols;
  322. -moz-animation-name:tumblrcontrols;
  323. }
  324. body.controls-click a#controlsbutton i {color:var(--ColorAccentOne);}
  325.  
  326. @keyframes tumblrcontrols {
  327. 45% {
  328. -webkit-transform: rotate(180deg);
  329. -ms-transform: rotate(180deg);
  330. transform: rotate(180deg);
  331. }
  332. 55% {
  333. -webkit-transform: rotate(180deg);
  334. -ms-transform: rotate(180deg);
  335. transform: rotate(180deg);
  336. }
  337. 100% {
  338. -webkit-transform: rotate(360deg);
  339. -ms-transform: rotate(360deg);
  340. transform: rotate(360deg);
  341. }
  342. }
  343.  
  344. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  345. transform:scale(.65);
  346. margin-right:2rem;
  347. opacity:0;
  348. visibility:hidden;
  349. z-index:999999999!important;
  350. }
  351.  
  352. body.controls-click iframe.tmblr-iframe {
  353. opacity:1.0;
  354. visibility:visible;
  355. -webkit-transition: all 0.5s;
  356. -moz-transition: all 0.5s;
  357. -ms-transition: all 0.5s;
  358. -o-transition: all 0.5s;
  359. transition: all 0.5s;
  360. }
  361.  
  362. /* MAIN CONTENT */
  363.  
  364. main {
  365. width:calc(100% - 4rem);
  366. margin:3rem 2rem 2rem 2rem;
  367. display:flex;
  368. justify-content:center;
  369. }
  370.  
  371. section {
  372. position:relative;
  373. max-width:550px;
  374. overflow:hidden;
  375. margin:auto;
  376. display:flex;
  377. flex-direction:column;
  378. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  379. border-radius:var(--Corners);
  380. z-index:1;
  381. }
  382. section:after {
  383. content:'';
  384. position:absolute;
  385. top:1px;
  386. left:1px;
  387. width:calc(100% - 2px);
  388. height:calc(100% - 2px);
  389. background:var(--ColorPosts);
  390. border-radius:calc(var(--Corners) - 1px);
  391. z-index:-1;
  392. }
  393.  
  394. .aboutheader {
  395. width:100%;
  396. padding:.25rem .5rem .25rem .5rem;
  397. display:flex;
  398. justify-content:space-between;
  399. align-items:center;
  400. gap:1rem;
  401. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  402. }
  403. .aboutheader b {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1); cursor:default;}
  404. .aboutheader li {
  405. color:var(--ColorPosts);
  406. text-shadow:0 1px rgba(0,0,0,.1);
  407. display:flex;
  408. justify-content:flex-end;
  409. align-items:center;
  410. gap:.25rem;
  411. }
  412. .aboutheader li i {
  413. font-size:.9em;
  414. width:1.1rem;
  415. height:1.1rem;
  416. display:flex;
  417. justify-content:center;
  418. align-items:center;
  419. border-radius:calc(var(--Corners) - 1px);
  420. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  421. }
  422. .aboutheader li span {
  423. font-size:.95em;
  424. font-weight:600;
  425. line-height:100%;
  426. padding-bottom:.25rem;
  427. width:1.1rem;
  428. height:1.1rem;
  429. display:flex;
  430. justify-content:center;
  431. align-items:center;
  432. border-radius:calc(var(--Corners) - 1px);
  433. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  434. cursor:default;
  435. }
  436.  
  437. /*-- about container --*/
  438. .aboutcont {
  439. width:100%;
  440. max-height:650px;
  441. overflow-y:auto;
  442. display:flex;
  443. flex-direction:column;
  444. gap:1rem;
  445. padding:1rem;
  446. }
  447. .aboutcont::-webkit-scrollbar {
  448. width:2px;
  449. height:2px;
  450. background:transparent;
  451. }
  452. .aboutcont::-webkit-scrollbar-track {background:transparent;}
  453.  
  454. /*--- basic info ---*/
  455. .basicinfo {
  456. width:100%;
  457. padding-bottom:1rem;
  458. display:flex;
  459. justify-content:space-evenly;
  460. align-items:center;
  461. flex-wrap:wrap;
  462. gap:1rem;
  463. border-bottom:2px dotted var(--ColorBorders);
  464. }
  465. .basicinfo li {
  466. display:flex;
  467. justify-content:flex-start;
  468. align-items:center;
  469. gap:.5em;
  470. }
  471. .basicinfo i {
  472. font-size:1.3em;
  473. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  474. -webkit-background-clip:text;
  475. -webkit-text-fill-color:transparent;
  476. }
  477. .basicinfo span {color:var(--ColorTitle);}
  478.  
  479. /*-- bio image --*/
  480. .bioimage {
  481. width:100%;
  482. max-height:100px;
  483. display:flex;
  484. justify-content:center;
  485. align-items:center;
  486. }
  487. .bioimage img {
  488. width:100%;
  489. max-height:100px;
  490. object-fit:cover;
  491. border-radius:var(--Corners);
  492. }
  493.  
  494. /*-- bio text --*/
  495. .bio {width:100%;}
  496. .biotitle {margin-bottom:1rem;}
  497. .biotitle b {
  498. position:relative;
  499. display:inline-block;
  500. font-family:var(--TitleFont), sans-serif;
  501. font-size:1.2em;
  502. text-shadow:0 .5px var(--ColorPosts);
  503. line-height:120%;
  504. z-index:1;
  505. }
  506. .biotitle b:after {
  507. content: '';
  508. position:absolute;
  509. bottom:0;
  510. left:0;
  511. width:100%;
  512. height:50%;
  513. opacity:.5;
  514. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  515. z-index:-1;
  516. }
  517.  
  518. .biotext {width:100%;}
  519. .biotext li {list-style-type:circle; margin-left:1rem; padding-left:0;}
  520. .biotext p:last-of-type {margin-bottom:0;}
  521. .biotext a {
  522. position:relative;
  523. display:inline-block;
  524. font-weight:500;
  525. border-bottom:1.5px solid var(--ColorBorders);
  526. }
  527. .biotext a:after {
  528. content: '';
  529. position:absolute;
  530. bottom:-1.5px;
  531. left:0;
  532. width:100%;
  533. height:1.5px;
  534. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  535. border-radius:3px;
  536. transform:scaleX(0);
  537. transform-origin:center;
  538. transition: transform 0.3s ease-out;
  539. }
  540. .biotext a:hover:after {
  541. transform: scaleX(1);
  542. transform-origin:center;
  543. }
  544.  
  545. /*-- likes --*/
  546. .likedislike {
  547. width:100%;
  548. display:flex;
  549. justify-content:flex-start;
  550. align-items:flex-start;
  551. gap:.25rem;
  552. }
  553. .likes {
  554. width:50%;
  555. display:flex;
  556. flex-wrap:wrap;
  557. gap:.5rem;
  558. }
  559. .likestitle {width:100%;}
  560. .likestitle b {
  561. position:relative;
  562. display:inline-block;
  563. width:fit-content;
  564. font-family:var(--TitleFont), sans-serif;
  565. font-size:1em;
  566. text-shadow:0 .5px var(--ColorPosts);
  567. line-height:120%;
  568. z-index:1;
  569. }
  570. .likes b:after {
  571. content: '';
  572. position:absolute;
  573. bottom:0;
  574. left:0;
  575. width:100%;
  576. height:50%;
  577. opacity:.5;
  578. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  579. z-index:-1;
  580. }
  581. .likes li {
  582. display:flex;
  583. justify-content:flex-start;
  584. align-items:center;
  585. gap:.25em;
  586. }
  587. .likes i {font-size:1.1em;}
  588. .likes li:nth-child(3n-3) i {color:var(--ColorAccentOne);}
  589. .likes li:nth-child(3n-2) i {color:var(--ColorAccentTwo);}
  590. .likes li:nth-child(3n-1) i {color:var(--ColorAccentThree);}
  591. .likes span {font-size:.975em; white-space:nowrap;}
  592.  
  593. /*--- FOOTER ---*/
  594. footer {
  595. position:fixed;
  596. bottom:0;
  597. left:0;
  598. right:0;
  599. width:100%;
  600. height:2rem;
  601. padding:.5rem;
  602. display:flex;
  603. justify-content:space-between;
  604. align-items:center;
  605. gap:1rem;
  606. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  607. z-index:9999;
  608. }
  609.  
  610. .footerleft {
  611. display:flex;
  612. justify-content:flex-start;
  613. align-items:center;
  614. gap:.5rem;
  615. }
  616. .footerleft a {
  617. display:flex;
  618. justify-content:center;
  619. align-items:center;
  620. }
  621. .footerleft i {
  622. font-size:1.3em;
  623. color:var(--ColorPosts);
  624. text-shadow:0 1px rgba(0,0,0,.1);
  625. -webkit-transition: all 0.4s;
  626. -moz-transition: all 0.4s;
  627. -ms-transition: all 0.4s;
  628. -o-transition: all 0.4s;
  629. transition: all 0.4s;
  630. }
  631. .footerleft a:hover i {transform:scale(1.1);}
  632. a.homelink:after {
  633. content:'|';
  634. font-weight:500;
  635. color:var(--ColorOpaquePosts);
  636. line-height:100%;
  637. margin-bottom:.15rem;
  638. padding-left:.5rem;
  639. }
  640. a.homelink i {font-size:1.5em;}
  641.  
  642. .footerright {
  643. display:flex;
  644. justify-content:flex-end;
  645. align-items:center;
  646. gap:.5rem;
  647. }
  648. .footerright i {
  649. color:var(--ColorPosts);
  650. text-shadow:0 1px rgba(0,0,0,.1);
  651. }
  652. .footerright i#battery {font-size:1.5em;}
  653. .footerright i#volume {font-size:1.4em;}
  654.  
  655. /* SCROLL TO TOP */
  656. a#totop {
  657. display:none;
  658. justify-content:center;
  659. align-items:center;
  660. cursor:help;
  661. }
  662. a#totop i {font-size:1.4em;}
  663. a#totop:hover i {
  664. -webkit-animation-duration: 2.5s;
  665. animation-duration: 2.5s;
  666. -webkit-animation-fill-mode: both;
  667. animation-fill-mode: both;
  668. -webkit-animation-timing-function: ease-in-out;
  669. animation-timing-function: ease-in-out;
  670. animation-iteration-count:1;
  671. -webkit-animation-iteration-count:1;
  672. animation-name:totop;
  673. -moz-animation-name:totop;
  674. }
  675.  
  676. @keyframes totop {
  677. 0% {
  678. -webkit-transform: translateY(0px);
  679. -ms-transform: translateY(0px);
  680. transform: translateY(0px)
  681. }
  682. 10% {
  683. -webkit-transform: translateY(-3px);
  684. -ms-transform: translateY(-3px);
  685. transform: translateY(-3px)
  686. }
  687. 20% {
  688. -webkit-transform: translateY(0px);
  689. -ms-transform: translateY(0px);
  690. transform: translateY(0px)
  691. }
  692. 30% {
  693. -webkit-transform: translateY(-3px);
  694. -ms-transform: translateY(-3px);
  695. transform: translateY(-3px)
  696. }
  697. 40% {
  698. -webkit-transform: translateY(0px);
  699. -ms-transform: translateY(0px);
  700. transform: translateY(0px)
  701. }
  702. 50% {
  703. -webkit-transform: translateY(0px);
  704. -ms-transform: translateY(0px);
  705. transform: translateY(0px)
  706. }
  707. 60% {
  708. -webkit-transform: translateY(0px);
  709. -ms-transform: translateY(0px);
  710. transform: translateY(0px)
  711. }
  712. 70% {
  713. -webkit-transform: translateY(-3px);
  714. -ms-transform: translateY(-3px);
  715. transform: translateY(-3px)
  716. }
  717. 80% {
  718. -webkit-transform: translateY(0px);
  719. -ms-transform: translateY(0px);
  720. transform: translateY(0px)
  721. }
  722. 90% {
  723. -webkit-transform: translateY(-3px);
  724. -ms-transform: translateY(-3px);
  725. transform: translateY(-3px)
  726. }
  727. 100% {
  728. -webkit-transform: translateY(0px);
  729. -ms-transform: translateY(0px);
  730. transform: translateY(0px)
  731. }
  732. }
  733.  
  734. /* DAY/NIGHT */
  735. button#theme-toggle {
  736. position:relative;
  737. outline:none;
  738. border:none;
  739. background:none;
  740. padding:0;
  741. display:flex;
  742. justify-content:center;
  743. align-items:center;
  744. cursor:help;
  745. }
  746.  
  747. button#theme-toggle span {
  748. justify-content:center;
  749. align-items:center;
  750. -webkit-transition: all 0.4s;
  751. -moz-transition: all 0.4s;
  752. -ms-transition: all 0.4s;
  753. -o-transition: all 0.4s;
  754. transition: all 0.4s;
  755. }
  756.  
  757. button#theme-toggle i {
  758. font-size:1.3em;
  759. -webkit-transition: all 0.4s;
  760. -moz-transition: all 0.4s;
  761. -ms-transition: all 0.4s;
  762. -o-transition: all 0.4s;
  763. transition: all 0.4s;
  764. }
  765. button#theme-toggle:hover i {
  766. -webkit-transition: all 0.4s;
  767. -moz-transition: all 0.4s;
  768. -ms-transition: all 0.4s;
  769. -o-transition: all 0.4s;
  770. transition: all 0.4s;
  771. -webkit-animation-duration: .75s;
  772. animation-duration: .75s;
  773. -webkit-animation-fill-mode: both;
  774. animation-fill-mode: both;
  775. -webkit-animation-timing-function: ease-in-out;
  776. animation-timing-function: ease-in-out;
  777. animation-iteration-count:1;
  778. -webkit-animation-iteration-count:1;
  779. animation-name:daynight;
  780. -moz-animation-name:daynight;
  781. }
  782.  
  783. @keyframes daynight {
  784. 50% {
  785. -webkit-transform: scaleX(-1);
  786. -ms-transform: scaleX(-1);
  787. transform: scaleX(-1);
  788. }
  789. }
  790.  
  791. /*--- CREDIT: DO NOT TOUCH ---*/
  792. a.credit {
  793. display:flex;
  794. justify-content:center;
  795. align-items:center;
  796. z-index:99999;
  797. }
  798. a.credit:before {
  799. content:'|';
  800. font-weight:500;
  801. color:var(--ColorOpaquePosts);
  802. line-height:100%;
  803. margin-bottom:.15rem;
  804. padding-right:.5rem;
  805. }
  806. a.credit i {
  807. font-size:1.5em;
  808. -webkit-transition: all 0.4s;
  809. -moz-transition: all 0.4s;
  810. -ms-transition: all 0.4s;
  811. -o-transition: all 0.4s;
  812. transition: all 0.4s;
  813. }
  814. a.credit:hover i {
  815. -webkit-animation-duration: 2s;
  816. animation-duration: 2s;
  817. -webkit-animation-fill-mode: both;
  818. animation-fill-mode: both;
  819. -webkit-animation-timing-function: ease-in-out;
  820. animation-timing-function: ease-in-out;
  821. animation-iteration-count:infinite;
  822. -webkit-animation-iteration-count:infinite;
  823. animation-name: bounce;
  824. -moz-animation-name: bounce;
  825. }
  826.  
  827. @keyframes bounce {
  828. 0% {
  829. -webkit-transform: translateY(0px);
  830. -ms-transform: translateY(0px);
  831. transform: translateY(0px)
  832. }
  833. 25% {
  834. -webkit-transform: translateY(-3px);
  835. -ms-transform: translateY(-3px);
  836. transform: translateY(-3px)
  837. }
  838. 50% {
  839. -webkit-transform: translateY(0px);
  840. -ms-transform: translateY(0px);
  841. transform: translateY(0px)
  842. }
  843. 75% {
  844. -webkit-transform: translateY(-3px);
  845. -ms-transform: translateY(-3px);
  846. transform: translateY(-3px)
  847. }
  848. 100% {
  849. -webkit-transform: translateY(0px);
  850. -ms-transform: translateY(0px);
  851. transform: translateY(0px)
  852. }
  853. }
  854.  
  855. /*--- RESPONSIVENESS ---*/
  856.  
  857. {CustomCSS}
  858.  
  859. </style>
  860. </head>
  861.  
  862. <!----- HTML ----->
  863. <body>
  864.  
  865. <main> <!-- main container -->
  866.  
  867. <!--- FIXED BUTTONS --->
  868. <div class="fixedbuttons">
  869. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  870. </div><!-- // .fixedbuttons -->
  871.  
  872. <section><!-- section -->
  873.  
  874. <div class="aboutheader">
  875. <b>{Name}.txt</b>
  876. <li><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li>
  877. </div>
  878.  
  879. <div class="aboutcont"><!-- about container -->
  880.  
  881. <div class="basicinfo">
  882. <!--========================================================================
  883. EDIT HERE: BASIC INFO
  884.  
  885. FORMAT:
  886.  
  887. <li><i class="ti ti-[iconname]"></i><span>[text here]</span></li>
  888.  
  889. - [bracketed text] is what you can change, delete the brackets
  890. - feel free to add/delete these as you like but i recommend not having more than 6
  891.  
  892. =========================================================================-->
  893. <li><i class="ti ti-user"></i><span>name</span></li>
  894. <li><i class="ti ti-cake"></i><span>age</span></li>
  895. <li><i class="ti ti-leaf"></i><span>pronouns</span></li>
  896. <li><i class="ti ti-sun-high"></i><span>zodiac</span></li>
  897. <li><i class="ti ti-map-pin"></i><span>location</span></li>
  898. </div><!-- // .basicinfo -->
  899.  
  900. <!--========================================================================
  901. EDIT HERE: IMAGE
  902.  
  903. - paste you image link below!
  904. - it has a 100% width (550px - 2 x font size) and a max height of 100px, i can change this if you have a specific image in mind!
  905. - you can also delete the entire bioimage div if you don't want it
  906.  
  907. =========================================================================-->
  908. <div class="bioimage">
  909. <img src="//64.media.tumblr.com/f8e056412f3808d69aed80f6239cdcfb/4e116e4cb49a8ad6-0d/s2048x3072/1790a13681d2b908ab8a73a6a6397f63b5f873dc.pnj">
  910. </div><!-- // .bioimage -->
  911.  
  912. <div class="bio"><!-- bio -->
  913. <div class="biotitle"><b>about me</b></div>
  914. <div class="biotext">
  915. <!--========================================================================
  916. EDIT HERE: BIO TEXT
  917.  
  918. - put your about text below!
  919.  
  920. =========================================================================-->
  921.  
  922. about text goes here. <b>bold text</b>. <a href="/">here's a link</a>.
  923. <blockquote>this is a blockquote</blockquote>
  924. <h4>here's a heading</h4>
  925. <li>this is</li>
  926. <li>a list</li>
  927. <li>of things</li>
  928. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mauris consectetur, faucibus enim vitae, porta ante. Nam laoreet, diam non aliquet blandit, nisl ex ultrices diam, sed placerat eros dolor sit amet augue. Quisque mollis enim a nisl sollicitudin feugiat. Curabitur sed hendrerit lorem.</p>
  929.  
  930. </div><!-- // .biotext -->
  931. </div><!-- // .bio -->
  932.  
  933. <div class="likedislike"><!-- likes & dislikes -->
  934.  
  935. <div class="likes"><!-- likes -->
  936. <div class="likestitle"><b>likes</b></div>
  937. <!--========================================================================
  938. EDIT HERE: LIKES
  939.  
  940. FORMAT:
  941.  
  942. <li><i class="ti ti-[thumb-up]"></i><span>[like text]</span></li>
  943.  
  944. - [bracketed text] is what you can change, delete the brackets
  945. - the dislikes format is the same!
  946.  
  947. =========================================================================-->
  948. <li><i class="ti ti-thumb-up"></i><span>like</span></li>
  949. <li><i class="ti ti-thumb-up"></i><span>like</span></li>
  950. <li><i class="ti ti-heart"></i><span>like</span></li>
  951. <li><i class="ti ti-heart"></i><span>like</span></li>
  952. </div><!-- // .likes -->
  953.  
  954. <div class="likes"><!-- dislikes -->
  955. <div class="likestitle"><b>dislikes</b></div>
  956. <li><i class="ti ti-thumb-down"></i><span>dislike</span></li>
  957. <li><i class="ti ti-thumb-down"></i><span>dislike</span></li>
  958. <li><i class="ti ti-ban"></i><span>dislike</span></li>
  959. <li><i class="ti ti-ban"></i><span>dislike</span></li>
  960. </div><!-- // .dislikes -->
  961.  
  962. </div><!-- // .likedislike -->
  963.  
  964. </div><!-- // .aboutcont -->
  965. </section><!-- section ends -->
  966.  
  967. <footer><!--- FOOTER --->
  968. <div class="footerleft">
  969. <a href="/" title="home" class="homelink"><i class="ti ti-brand-windows"></i></a>
  970. <!--========================================================================
  971. EDIT HERE: FOOTER LINKS
  972.  
  973. - feel free to delete/add links and change the icons & names
  974.  
  975. ========================== all links below this line ====================-->
  976. <a href="" title="link name"><i class="ti ti-flower"></i></a>
  977. <a href="" title="link name"><i class="ti ti-mushroom"></i></a>
  978. <a href="" title="link name"><i class="ti ti-seeding"></i></a>
  979. <a href="" title="link name"><i class="ti ti-sparkles"></i></a>
  980. </div><!-- all links above this line -->
  981.  
  982. <div class="footerright">
  983. <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-bold ph-caret-up"></i></a>
  984. <!-- day/night -->
  985. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  986. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  987. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  988. </button>
  989. <i id="battery" class="ti ti-battery-3"></i>
  990. <i id="volume" class="ti ti-volume"></i>
  991. <!-- CREDIT: DO NOT TOUCH -->
  992. <a class="credit" href="//phantomcodes.tumblr.com" title="custom page by sage"><i class="ti ti-ghost-2"></i></a>
  993. </div>
  994. </footer>
  995.  
  996. </main><!-- end of main container -->
  997.  
  998. <script>
  999.  
  1000. // tooltips
  1001. tippy('[title]', {
  1002. theme: 'custom',
  1003. arrow: false,
  1004. followCursor: true,
  1005. delay: 100,
  1006. placement: 'top',
  1007. offset: "0, 10",
  1008. zIndex: 9999999999,
  1009. maxWidth: 400,
  1010.  
  1011. content(reference) {
  1012. const title = reference.getAttribute('title');
  1013. reference.removeAttribute('title');
  1014. return title;
  1015. },
  1016. });
  1017.  
  1018. // tumblr controls
  1019. $(document).ready(function(){
  1020. $('a#controlsbutton').click(function(){
  1021. $('body').toggleClass('controls-click');
  1022. });
  1023. });
  1024.  
  1025. // searchbar
  1026. $(document).ready(function(){
  1027. $('a#searchbutton').click(function(){
  1028. $('body').toggleClass('search-click');
  1029. });
  1030. });
  1031. $(document).ready(function(){
  1032. $('.search').submit(function(event){
  1033. var value = $('input:first').val();
  1034. location.replace('http://{Name}.tumblr.com/search/' + value);
  1035. });
  1036. });
  1037.  
  1038. // scroll to top
  1039. $(document).ready(function(){
  1040. $('a#totop').click(function(){
  1041. $('html, body').animate({scrollTop : 0},800);
  1042. return false;
  1043. });
  1044. });
  1045.  
  1046. var mybutton = document.getElementById("totop");
  1047. window.onscroll = function() {scrollFunction()};
  1048.  
  1049. function scrollFunction() {
  1050. if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
  1051. mybutton.style.display = "flex";
  1052. } else {
  1053. mybutton.style.display = "none";
  1054. }
  1055. }
  1056.  
  1057. // day/night mode
  1058. const toggle = document.getElementById("theme-toggle");
  1059.  
  1060. toggle.onclick = function () {
  1061. // add class to html and make transition snappy
  1062. document.documentElement.classList.add("theme-transition");
  1063. // alright lets retrive the info from data-theme
  1064. let currentTheme = document.documentElement.getAttribute("data-theme");
  1065. // if it's dark already, let's go into the light
  1066. let targetTheme = "light";
  1067. // but if it is light let's toggle dark mode
  1068. if (currentTheme === "light") {
  1069. targetTheme = "dark";
  1070. }
  1071. // ok now that theme has been toggled, get rid of snappy transition
  1072. window.setTimeout(function () {
  1073. document.documentElement.classList.remove("theme-transition");
  1074. }, 50);
  1075. // we're going to save our theme preference now
  1076. document.documentElement.setAttribute("data-theme", targetTheme);
  1077. localStorage.setItem("theme", targetTheme);
  1078. };
  1079.  
  1080. </script>
  1081.  
  1082. </body>
  1083. </html>
  1084.  
Advertisement
Add Comment
Please, Sign In to add comment