nicolas-sage

custom page 07

Nov 8th, 2024 (edited)
153
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 75.57 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 7 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.  
  32. <!----- BUNNY FONTS ---->
  33. <link href="https://fonts.bunny.net/css?family=Quicksand: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" />
  34.  
  35. <!---- ICONS ---->
  36. <script src="https://unpkg.com/phosphor-icons"></script>
  37. <script src="https://unpkg.com/[email protected]"></script>
  38. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  39. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  40.  
  41. <!---- TOOLTIPS ---->
  42. <script src="https://unpkg.com/popper.js@1"></script>
  43. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  44.  
  45. <!--- day/night --->
  46. <script>
  47. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  48. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  49. </script>
  50.  
  51. <!------- CSS -------->
  52. <style>
  53.  
  54. /* theme options - common */
  55. :root {
  56. /* EDIT HERE: fonts, corners, glow
  57. - find and replace the fonts if you change them
  58. - change glow to 0 0 0 if you don't want it */
  59.  
  60. --BodyFont:'Quicksand';
  61. --TitleFont:'Montserrat';
  62. --Corners:10px;
  63. --Glow:0 0 10px;
  64.  
  65. --Spacing: 1rem;
  66.  
  67. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .85);
  68. --ColorMoreOpaquePosts:rgb(from var(--ColorPosts) r g b / .3);
  69.  
  70. --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
  71. --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
  72. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  73. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  74. }
  75.  
  76. /* theme options - day/night */
  77. :root, html[data-theme='light'] {
  78. --LightOn: flex;
  79. --LightOff: none;
  80.  
  81. /* EDIT HERE: day mode colors */
  82. --ColorBackground:#e0e0e0;
  83. --ColorPosts:#eee;
  84. --ColorBorders:#d5d5d5;
  85. --ColorTitle:#333;
  86. --ColorText:#555;
  87. --ColorAccentOne:#3d745d;
  88. --ColorAccentTwo:#6f9f88;
  89. --ColorAccentText:#fff;
  90. --ColorOpacity: rgba(255,255,255,.15);
  91. --ColorReverseOpacity:rgba(0,0,0,.1);
  92. }
  93. html[data-theme='dark'] {
  94. --LightOn: none;
  95. --LightOff: flex;
  96.  
  97. /* EDIT HERE: night mode colors */
  98. --ColorBackground:#333;
  99. --ColorPosts:#3a3a3a;
  100. --ColorBorders:#444;
  101. --ColorTitle:#fff;
  102. --ColorText:#ddd;
  103. --ColorAccentOne:#7ebb9d;
  104. --ColorAccentTwo:#a2d3be;
  105. --ColorAccentText:#fff;
  106. --ColorOpacity: rgba(0,0,0,.1);
  107. --ColorReverseOpacity:rgba(255,255,255,.1);
  108. }
  109. html.theme-transition,
  110. html.theme-transition *,
  111. html.theme-transition *:before,
  112. html.theme-transition *:after {
  113. transition: 0s !important;
  114. transition-delay: 0 !important;
  115. }
  116.  
  117. .light-on{
  118. display: var(--LightOn);
  119. }
  120. .light-off{
  121. display: var(--LightOff);
  122. }
  123.  
  124. /*--- TOOLTIPS ---*/
  125. .tippy-tooltip.custom-theme {
  126. font-size:.95em;
  127. font-weight:500;
  128. color:var(--ColorTitle);
  129. text-shadow:0 0 1px rgba(0,0,0,.1);
  130. text-transform:lowercase;
  131. text-align:center;
  132. background:var(--ColorPosts);
  133. border-radius:var(--Corners);
  134. box-shadow:0 2px 2px rgba(0,0,0,.1);
  135. }
  136.  
  137. body::-webkit-scrollbar {
  138. width:4px;
  139. height:4px;
  140. background:var(--ColorBackground);
  141. }
  142. body::-webkit-scrollbar-track {
  143. margin-bottom:.5rem;
  144. background:var(--ColorBackground);
  145. border-radius: 5px;
  146. }
  147. body::-webkit-scrollbar-thumb {
  148. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo));
  149. border-radius: 5px;
  150. }
  151.  
  152. /*--- TEXT SELECTION ---*/
  153. ::-moz-selection { /* Code for Firefox */
  154. color:var(--ColorPosts);
  155. background:var(--ColorAccentOne);
  156. }
  157.  
  158. ::selection {
  159. color:var(--ColorPosts);
  160. background:var(--ColorAccentOne);
  161. }
  162.  
  163. * {box-sizing:border-box;}
  164.  
  165. body {
  166. font-family:var(--BodyFont), sans-serif;
  167. font-size:15px;
  168. color:var(--ColorText);
  169. line-height:140%;
  170. word-wrap:break-word;
  171. letter-spacing:.04em;
  172. margin:0;
  173. background-color:var(--ColorBackground);
  174. }
  175. body {
  176. opacity:1;
  177. transition:.75s opacity;
  178. }
  179.  
  180. body.fade-out {
  181. opacity:0;
  182. transition:none;
  183. }
  184. html {background-color:var(--ColorBackground);}
  185.  
  186. a {
  187. color:var(--ColorAccentOne);
  188. text-decoration:none;
  189. -webkit-transition: all 0.4s;
  190. -moz-transition: all 0.4s;
  191. -ms-transition: all 0.4s;
  192. -o-transition: all 0.4s;
  193. transition: all 0.4s;
  194. }
  195.  
  196. a:hover {
  197. color:var(--ColorAccentTwo);
  198. -webkit-transition: all 0.4s;
  199. -moz-transition: all 0.4s;
  200. -ms-transition: all 0.4s;
  201. -o-transition: all 0.4s;
  202. transition: all 0.4s;
  203. }
  204.  
  205. blockquote {
  206. margin-left:1rem;
  207. padding:0 .5rem 0 .5rem;
  208. border-left:2px solid var(--ColorBorders);
  209. }
  210. blockquote p {
  211. padding: 0!important;
  212. }
  213.  
  214. ul {list-style-type:circle;}
  215. ol {list-style-type: decimal-leading-zero;}
  216. li::marker {color:var(--ColorAccentOne)}
  217.  
  218. small {font-size:.95em;}
  219. big {font-size:1.1em;}
  220.  
  221. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  222. h1 a {color:var(--ColorTitle);}
  223. h1 a:hover {color:var(--ColorAccent);}
  224. h2 {font-size:1.25em; color:var(--ColorTitle); letter-spacing:.1em;}
  225. h3 {font-size:1.15em; color:var(--ColorTitle);}
  226. h4 {font-size:1.1em; color:var(--ColorTitle);}
  227. h5 {font-size:1.05em; color:var(--ColorTitle);}
  228. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  229.  
  230. button {font-size:1em;}
  231.  
  232. hr {
  233. height:1px;
  234. border:none;
  235. box-shadow:none;
  236. background:var(--ColorBorders);
  237. }
  238.  
  239. pre {
  240. word-wrap:break-word!important;
  241. white-space:pre-wrap;
  242. }
  243.  
  244. b, strong {
  245. color:var(--ColorTitle);
  246. font-weight:800;
  247. }
  248.  
  249. b a:hover {
  250. color:var(--ColorAccentTwo);
  251. -webkit-transition: all 0.4s;
  252. -moz-transition: all 0.4s;
  253. -ms-transition: all 0.4s;
  254. -o-transition: all 0.4s;
  255. transition: all 0.4s;
  256. }
  257. .explorelinks a {
  258. display:inline-block;
  259. position:relative;
  260. }
  261. .explorelinks a:after {
  262. content: '';
  263. position:absolute;
  264. bottom:0;
  265. left:0;
  266. width:100%;
  267. height:2px;
  268. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  269. border-radius:5px;
  270. transform:scaleX(0);
  271. transform-origin:center;
  272. transition: transform 0.3s ease-out;
  273. }
  274. .explorelinks a:hover:after {
  275. transform: scaleX(1);
  276. transform-origin:center;
  277. }
  278.  
  279. /*--- HEADER ---*/
  280. header {
  281. position:fixed;
  282. top:0;
  283. left:0;
  284. right:0;
  285. width:100%;
  286. height:2rem;
  287. padding:0 .5rem 0 .5rem;
  288. display:flex;
  289. justify-content:space-between;
  290. align-items:center;
  291. gap:1rem;
  292. backdrop-filter:blur(50px);
  293. z-index:99999;
  294. }
  295. header:after {
  296. content:'';
  297. position:absolute;
  298. top:0;
  299. left:0;
  300. width:100%;
  301. height:100%;
  302. opacity:.75;
  303. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  304. z-index:-1;
  305. }
  306.  
  307. .header-left {
  308. position:relative;
  309. display:flex;
  310. justify-content:flex-start;
  311. align-items:center;
  312. gap:.75rem;
  313. }
  314.  
  315. .headertitle {
  316. display:flex;
  317. justify-content:flex-start;
  318. align-items:center;
  319. gap:.5rem;
  320. }
  321.  
  322. .headertitle a.htitle {
  323. font-family:var(--TitleFont), sans-serif;
  324. font-size:1.05em;
  325. font-weight:700;
  326. color:var(--ColorAccentText);
  327. text-shadow:0 1px rgba(0,0,0,.1);
  328. white-space:nowrap;
  329. }
  330. .headertitle a.htitle:hover {text-shadow:var(--Glow);}
  331. .header-left a.mainlink {
  332. font-weight:500;
  333. color:var(--ColorAccentText);
  334. text-shadow:0 1px rgba(0,0,0,.1);
  335. white-space:nowrap;
  336. }
  337. a.mainlink:hover {text-shadow:var(--Glow);}
  338.  
  339. .header-right {
  340. display:flex;
  341. justify-content:flex-ends;
  342. align-items:center;
  343. gap:.5rem;
  344. }
  345.  
  346. .header-right a#messagebutton {
  347. display:flex;
  348. justify-content:center;
  349. align-items:center;
  350. cursor:help;
  351. }
  352. .header-right a#messagebutton i {
  353. font-size:1.3em;
  354. color:var(--ColorAccentText);
  355. text-shadow:0 1px rgba(0,0,0,.1);
  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. .header-right a#messagebutton:hover i {text-shadow:var(--Glow);}
  363.  
  364. /* SCROLL TO TOP */
  365. a#totop {
  366. display:none;
  367. justify-content:center;
  368. align-items:center;
  369. cursor:help;
  370. }
  371. a#totop i {
  372. font-size:1.4em;
  373. color:var(--ColorAccentText);
  374. text-shadow:0 1px rgba(0,0,0,.1);
  375. -webkit-transition: all 0.4s;
  376. -moz-transition: all 0.4s;
  377. -ms-transition: all 0.4s;
  378. -o-transition: all 0.4s;
  379. transition: all 0.4s;
  380. }
  381. a#totop:hover i {
  382. text-shadow:var(--Glow);
  383. -webkit-animation-duration: 2.5s;
  384. animation-duration: 2.5s;
  385. -webkit-animation-fill-mode: both;
  386. animation-fill-mode: both;
  387. -webkit-animation-timing-function: ease-in-out;
  388. animation-timing-function: ease-in-out;
  389. animation-iteration-count:1;
  390. -webkit-animation-iteration-count:1;
  391. animation-name:totop;
  392. -moz-animation-name:totop;
  393. }
  394.  
  395. @keyframes totop {
  396. 0% {
  397. -webkit-transform: translateY(0px);
  398. -ms-transform: translateY(0px);
  399. transform: translateY(0px)
  400. }
  401. 10% {
  402. -webkit-transform: translateY(-3px);
  403. -ms-transform: translateY(-3px);
  404. transform: translateY(-3px)
  405. }
  406. 20% {
  407. -webkit-transform: translateY(0px);
  408. -ms-transform: translateY(0px);
  409. transform: translateY(0px)
  410. }
  411. 30% {
  412. -webkit-transform: translateY(-3px);
  413. -ms-transform: translateY(-3px);
  414. transform: translateY(-3px)
  415. }
  416. 40% {
  417. -webkit-transform: translateY(0px);
  418. -ms-transform: translateY(0px);
  419. transform: translateY(0px)
  420. }
  421. 50% {
  422. -webkit-transform: translateY(0px);
  423. -ms-transform: translateY(0px);
  424. transform: translateY(0px)
  425. }
  426. 60% {
  427. -webkit-transform: translateY(0px);
  428. -ms-transform: translateY(0px);
  429. transform: translateY(0px)
  430. }
  431. 70% {
  432. -webkit-transform: translateY(-3px);
  433. -ms-transform: translateY(-3px);
  434. transform: translateY(-3px)
  435. }
  436. 80% {
  437. -webkit-transform: translateY(0px);
  438. -ms-transform: translateY(0px);
  439. transform: translateY(0px)
  440. }
  441. 90% {
  442. -webkit-transform: translateY(-3px);
  443. -ms-transform: translateY(-3px);
  444. transform: translateY(-3px)
  445. }
  446. 100% {
  447. -webkit-transform: translateY(0px);
  448. -ms-transform: translateY(0px);
  449. transform: translateY(0px)
  450. }
  451. }
  452.  
  453. /* DAY/NIGHT */
  454. button#theme-toggle {
  455. position:relative;
  456. outline:none;
  457. border:none;
  458. background:none;
  459. padding:0;
  460. display:flex;
  461. justify-content:center;
  462. align-items:center;
  463. cursor:help;
  464. }
  465.  
  466. button#theme-toggle span {
  467. justify-content:center;
  468. align-items:center;
  469. -webkit-transition: all 0.4s;
  470. -moz-transition: all 0.4s;
  471. -ms-transition: all 0.4s;
  472. -o-transition: all 0.4s;
  473. transition: all 0.4s;
  474. }
  475.  
  476. button#theme-toggle i {
  477. font-size:1.3em;
  478. color:var(--ColorAccentText);
  479. text-shadow:0 1px rgba(0,0,0,.1);
  480. -webkit-transition: all 0.4s;
  481. -moz-transition: all 0.4s;
  482. -ms-transition: all 0.4s;
  483. -o-transition: all 0.4s;
  484. transition: all 0.4s;
  485. }
  486. button#theme-toggle:hover i {
  487. text-shadow:var(--Glow);
  488. -webkit-transition: all 0.4s;
  489. -moz-transition: all 0.4s;
  490. -ms-transition: all 0.4s;
  491. -o-transition: all 0.4s;
  492. transition: all 0.4s;
  493. -webkit-animation-duration: .75s;
  494. animation-duration: .75s;
  495. -webkit-animation-fill-mode: both;
  496. animation-fill-mode: both;
  497. -webkit-animation-timing-function: ease-in-out;
  498. animation-timing-function: ease-in-out;
  499. animation-iteration-count:1;
  500. -webkit-animation-iteration-count:1;
  501. animation-name:daynight;
  502. -moz-animation-name:daynight;
  503. }
  504.  
  505. @keyframes daynight {
  506. 50% {
  507. -webkit-transform: scaleX(-1);
  508. -ms-transform: scaleX(-1);
  509. transform: scaleX(-1);
  510. }
  511. }
  512.  
  513. /* TUMBLR CONTROLS */
  514. a#controlsbutton {
  515. display:flex;
  516. justify-content:center;
  517. align-items:center;
  518. cursor:help;
  519. }
  520. a#controlsbutton i {
  521. font-size:1.35em;
  522. color:var(--ColorAccentText);
  523. text-shadow:0 1px rgba(0,0,0,.1);
  524. -webkit-transition: all 0.4s;
  525. -moz-transition: all 0.4s;
  526. -ms-transition: all 0.4s;
  527. -o-transition: all 0.4s;
  528. transition: all 0.4s;
  529. }
  530. a#controlsbutton:hover i {
  531. text-shadow:var(--Glow);
  532. -webkit-animation-duration: 1.5s;
  533. animation-duration: 1.5s;
  534. -webkit-animation-fill-mode: both;
  535. animation-fill-mode: both;
  536. -webkit-animation-timing-function: ease-in-out;
  537. animation-timing-function: ease-in-out;
  538. animation-iteration-count:1;
  539. -webkit-animation-iteration-count:1;
  540. animation-name:tumblrcontrols;
  541. -moz-animation-name:tumblrcontrols;
  542. }
  543. body.controls-click a#controlsbutton i {text-shadow:var(--Glow);}
  544.  
  545. @keyframes tumblrcontrols {
  546. 45% {
  547. -webkit-transform: rotate(180deg);
  548. -ms-transform: rotate(180deg);
  549. transform: rotate(180deg);
  550. }
  551. 55% {
  552. -webkit-transform: rotate(180deg);
  553. -ms-transform: rotate(180deg);
  554. transform: rotate(180deg);
  555. }
  556. 100% {
  557. -webkit-transform: rotate(360deg);
  558. -ms-transform: rotate(360deg);
  559. transform: rotate(360deg);
  560. }
  561. }
  562.  
  563. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  564. transform:scale(.75);
  565. margin-top:1.5rem;
  566. opacity:0;
  567. visibility:hidden;
  568. z-index:999999999!important;
  569. }
  570.  
  571. body.controls-click iframe.tmblr-iframe {
  572. opacity:1.0;
  573. visibility:visible;
  574. -webkit-transition: all 0.5s;
  575. -moz-transition: all 0.5s;
  576. -ms-transition: all 0.5s;
  577. -o-transition: all 0.5s;
  578. transition: all 0.5s;
  579. }
  580.  
  581. /*--- CREDIT: DO NOT TOUCH ---*/
  582. a#credit {
  583. display:flex;
  584. justify-content:center;
  585. align-items:center;
  586. z-index:999999;
  587. }
  588. a#credit:hover {transform:scale(1.1);}
  589. a#credit i {
  590. font-size:1.4em;
  591. color:var(--ColorAccentText);
  592. text-shadow:0 1px rgba(0,0,0,.1);
  593. -webkit-transition: all 0.4s;
  594. -moz-transition: all 0.4s;
  595. -ms-transition: all 0.4s;
  596. -o-transition: all 0.4s;
  597. transition: all 0.4s;
  598. }
  599. a#credit:hover i {
  600. text-shadow:var(--Glow);
  601. -webkit-animation-duration: 2s;
  602. animation-duration: 2s;
  603. -webkit-animation-fill-mode: both;
  604. animation-fill-mode: both;
  605. -webkit-animation-timing-function: ease-in-out;
  606. animation-timing-function: ease-in-out;
  607. animation-iteration-count:infinite;
  608. -webkit-animation-iteration-count:infinite;
  609. animation-name: bounce;
  610. -moz-animation-name: bounce;
  611. }
  612.  
  613. @keyframes bounce {
  614. 0% {
  615. -webkit-transform: translateY(0px);
  616. -ms-transform: translateY(0px);
  617. transform: translateY(0px)
  618. }
  619. 25% {
  620. -webkit-transform: translateY(-3px);
  621. -ms-transform: translateY(-3px);
  622. transform: translateY(-3px)
  623. }
  624. 50% {
  625. -webkit-transform: translateY(0px);
  626. -ms-transform: translateY(0px);
  627. transform: translateY(0px)
  628. }
  629. 75% {
  630. -webkit-transform: translateY(-3px);
  631. -ms-transform: translateY(-3px);
  632. transform: translateY(-3px)
  633. }
  634. 100% {
  635. -webkit-transform: translateY(0px);
  636. -ms-transform: translateY(0px);
  637. transform: translateY(0px)
  638. }
  639. }
  640.  
  641. /*--- MESSAGES ---*/
  642. #messages {
  643. position:fixed;
  644. top:3rem;
  645. right:.75rem;
  646. width:315px;
  647. height:500px;
  648. overflow-y:auto;
  649. background:var(--ColorPosts);
  650. border-radius:var(--Corners);
  651. box-shadow:2px 2px 8px 2px rgba(0,0,0,.1);
  652. cursor:move;
  653. z-index:99;
  654. }
  655. body.message-click #messages {display:none;}
  656. #messagesdrag {
  657. width:100%;
  658. height:100%;
  659. display:flex;
  660. flex-direction:column;
  661. justify-content:space-between;
  662. overflow-y:auto;
  663. }
  664.  
  665. .messageheader {
  666. width:100%;
  667. padding:.75rem;
  668. display:flex;
  669. justify-content:space-between;
  670. align-items:flex-start;
  671. gap:.5rem;
  672. backdrop-filter:blur(50px);
  673. background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
  674. z-index:2;
  675. }
  676. .messageheader i#mhicon {font-size:1.3em; text-shadow:0 1px var(--ColorPosts); margin-top:.5rem;}
  677. .messageheader i#mhicon:first-of-type {color:var(--ColorAccentOne);}
  678. .messageheader i#mhicon:last-of-type {color:var(--ColorAccentTwo);}
  679. .messageheader a#messagebutton {
  680. display:flex;
  681. justify-content:center;
  682. align-items:center;
  683. cursor:help;
  684. }
  685.  
  686. .messageheader a {
  687. display:flex;
  688. flex-direction:column;
  689. align-items:center;
  690. gap:.15rem;
  691. }
  692. .messageheader a img {
  693. width:2rem;
  694. height:2rem;
  695. object-fit:cover;
  696. border-radius:100%;
  697. -webkit-transition: all 0.4s;
  698. -moz-transition: all 0.4s;
  699. -ms-transition: all 0.4s;
  700. -o-transition: all 0.4s;
  701. transition: all 0.4s;
  702. }
  703. .messageheader a:hover img {transform:scale(1.1);}
  704. .messageheader a b {font-size:.95em; text-shadow:0 1px var(--ColorPosts);}
  705.  
  706. .msgconvo {
  707. position:relative;
  708. width:100%;
  709. height:100%;
  710. overflow-y:auto;
  711. padding:.75rem;
  712. display:flex;
  713. flex-direction:column;
  714. gap:.65rem;
  715. }
  716. .msgconvo::-webkit-scrollbar {
  717. width:1px;
  718. height:1px;
  719. background:var(--ColorPosts);
  720. }
  721.  
  722. .msgleft, .msgright {
  723. width:100%;
  724. display:flex;
  725. }
  726. .msgtext {width:fit-content; max-width:65%; font-size:.95em; padding:.5rem .75rem .5rem .75rem;}
  727.  
  728. /* msg left */
  729. .msgleft {justify-content:flex-start;}
  730. .msgleft .msgtext {background:var(--ColorBackground); border-radius:20px 20px 20px 0;}
  731.  
  732. /* msg right */
  733. .msgright {position:relative; justify-content:flex-end;}
  734. .msgright .msgtext {color:var(--ColorAccentText); background:var(--ColorLessOpaqueAccentTwo); border-radius:20px 20px 0 20px;}
  735. .msgright.final {margin-bottom:.65rem;}
  736. .msgright.final:after {
  737. content:'delivered';
  738. position:absolute;
  739. top:100%;
  740. font-size:.75em;
  741. font-weight:500;
  742. color:var(--ColorText);
  743. opacity:.75;
  744. }
  745.  
  746. .messagefooter {
  747. width:100%;
  748. padding:.5rem .75rem .5rem .75rem;
  749. display:flex;
  750. justify-content:flex-start;
  751. align-items:center;
  752. gap:.5rem;
  753. backdrop-filter:blur(50px);
  754. background:var(--ColorOpaquePosts);
  755. z-index:2;
  756. }
  757. .messagefooter i#mficon {
  758. font-size:1.05em;
  759. color:var(--ColorText);
  760. padding:.4rem;
  761. display:flex;
  762. justify-content:center;
  763. align-items:center;
  764. background:var(--ColorBackground);
  765. border-radius:100%;
  766. }
  767. .messagefooter .msginput {
  768. width:100%;
  769. padding:.25rem .5rem .25rem .65rem;
  770. display:flex;
  771. justify-content:space-between;
  772. align-items:center;
  773. gap:1rem;
  774. border-radius:15px;
  775. border:1px solid var(--ColorBorders);
  776. }
  777. .msginput span {font-size:.925em; opacity:.75;}
  778. .msginput i {
  779. font-size:1em;
  780. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  781. -webkit-background-clip:text;
  782. -webkit-text-fill-color:transparent;
  783. }
  784.  
  785. /* MAIN CONTENT */
  786. main {
  787. width:100%;
  788. display:flex;
  789. justify-content:center;
  790. }
  791.  
  792. section {
  793. width:calc(100% - 4rem);
  794. display:flex;
  795. flex-direction:column;
  796. align-items:center;
  797. gap:2rem;
  798. margin:4rem 2rem 2rem 2rem;
  799. }
  800.  
  801. article {
  802. position:relative;
  803. width:100%;
  804. min-width:600px;
  805. max-width:800px;
  806. box-shadow:2px 2px 8px 2px rgba(0,0,0,.1);
  807. border-radius:var(--Corners);
  808. }
  809.  
  810. /*--- ABOUT SECTION ---*/
  811. .basicinfo {
  812. width:100%;
  813. height:500px;
  814. overflow-y:auto;
  815. display:flex;
  816. justify-content:flex-start;
  817. align-items:flex-start;
  818. background:var(--ColorPosts);
  819. border-radius:var(--Corners);
  820. }
  821.  
  822. /* basic left */
  823. .basicleft-wrap {
  824. width:225px;
  825. height:100%;
  826. overflow-y:auto;
  827. padding:1rem;
  828. display:flex;
  829. flex-direction:column;
  830. gap:1rem;
  831. background:var(--ColorLessOpaqueAccentOne);
  832. }
  833. .basicleft-wrap .dots {
  834. margin-right:.25rem;
  835. display:flex;
  836. justify-content:flex-start;
  837. align-items:center;
  838. gap:.35rem;
  839. }
  840. .basicleft-wrap .dot {width:.65rem; height:.65rem; display:flex; justify-content:center; align-items:center; background:var(--ColorAccentText); border-radius:100%;}
  841. .basicleft-wrap .dot:nth-of-type(1) {opacity:.9;}
  842. .basicleft-wrap .dot:nth-of-type(2) {opacity:.85;}
  843. .basicleft-wrap .dot:nth-of-type(3) {opacity:.8;}
  844. .basicleft-wrap .dot:nth-of-type(3) i {transform:rotate(-45deg);}
  845. .basicleft-wrap .dot i {
  846. opacity:0;
  847. font-size:.7em;
  848. color:var(--ColorAccentOne);
  849. text-shadow:0 1px rgba(0,0,0,.1);
  850. margin-left:.5px;
  851. margin-bottom:.5px;
  852. -webkit-transition: all 0.4s;
  853. -moz-transition: all 0.4s;
  854. -ms-transition: all 0.4s;
  855. -o-transition: all 0.4s;
  856. transition: all 0.4s;
  857. }
  858. .basicleft-wrap .dots:hover .dot i {opacity:1;}
  859.  
  860. .basicleft {
  861. width:100%;
  862. overflow-y:auto;
  863. display:flex;
  864. flex-direction:column;
  865. gap:1rem;
  866. }
  867. .basicleft::-webkit-scrollbar {
  868. width:1px;
  869. height:1px;
  870. }
  871.  
  872. .bleft-title b {font-size:.95em; font-weight:600; text-shadow:0 1px rgba(0,0,0,.1); color:var(--ColorAccentText); line-height:100%;}
  873.  
  874. /* info stats */
  875. .basicstats {
  876. width:100%;
  877. display:flex;
  878. flex-direction:column;
  879. justify-content:flex-start;
  880. align-items:flex-start;
  881. gap:.5rem;
  882. }
  883. .basicstats li {
  884. display:flex;
  885. justify-content:flex-start;
  886. align-items:flex-start;
  887. gap:.5rem;
  888. }
  889. .basicstats i {font-size:1.05em; color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  890. .basicstats span {font-size:.95em; color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:110%;}
  891.  
  892. /* favs */
  893. .basicfavs {
  894. display:flex;
  895. flex-direction:column;
  896. justify-content:flex-start;
  897. align-items:flex-start;
  898. gap:.5rem;
  899. }
  900. .basicfavs li {
  901. display:flex;
  902. justify-content:flex-start;
  903. align-items:flex-start;
  904. gap:.5rem;
  905. }
  906. .basicfavs i {font-size:1.05em; color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  907. .basicfavs span {font-size:.95em; color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:110%;}
  908.  
  909. /* blogs */
  910. .basicblogs {
  911. display:flex;
  912. flex-direction:column;
  913. justify-content:flex-start;
  914. align-items:flex-start;
  915. gap:.5rem;
  916. }
  917. .basicblogs a {
  918. display:flex;
  919. justify-content:flex-start;
  920. align-items:center;
  921. gap:.5rem;
  922. }
  923. .basicblogs a img {
  924. width:1.25rem;
  925. height:1.25rem;
  926. border-radius:100%;
  927. -webkit-transition: all 0.4s;
  928. -moz-transition: all 0.4s;
  929. -ms-transition: all 0.4s;
  930. -o-transition: all 0.4s;
  931. transition: all 0.4s;
  932. }
  933. .basicblogs a:hover img {transform:rotate(10deg);}
  934. .basicblogs a span {
  935. font-size:.95em;
  936. color:var(--ColorAccentText);
  937. text-shadow:0 1px rgba(0,0,0,.1);
  938. white-space:nowrap;
  939. overflow:hidden;
  940. text-overflow:ellipsis;
  941. -webkit-transition: all 0.4s;
  942. -moz-transition: all 0.4s;
  943. -ms-transition: all 0.4s;
  944. -o-transition: all 0.4s;
  945. transition: all 0.4s;
  946. }
  947. .basicblogs a:hover span {text-shadow:none;}
  948.  
  949. /* basic right */
  950. .basicright-wrap {
  951. width:100%;
  952. height:100%;
  953. overflow-y:auto;
  954. display:flex;
  955. flex-direction:column;
  956. justify-content:space-between;
  957. }
  958. .basictitle {
  959. width:100%;
  960. padding:.75rem;
  961. display:flex;
  962. justify-content:flex-start;
  963. align-items:center;
  964. gap:.25rem;
  965. background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
  966. border-left:1.75px solid var(--ColorOpaquePosts);
  967. }
  968. .basictitle i {font-size:1.1em; color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  969. .basictitle b {color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  970.  
  971. .basicright {
  972. position:relative;
  973. width:100%;
  974. height:100%;
  975. overflow-y:auto;
  976. display:flex;
  977. }
  978. .basicright-title {
  979. width:100%;
  980. padding:.25rem 1rem .25rem 1rem;
  981. border-bottom:.75px solid var(--ColorBackground);
  982. }
  983. .basicright-title b {font-size:.95em; font-weight:600;}
  984.  
  985. /* bio */
  986. .bio {
  987. width:100%;
  988. overflow-y:auto;
  989. display:flex;
  990. flex-direction:column;
  991. }
  992. .biotext::-webkit-scrollbar {
  993. width:1px;
  994. height:1px;
  995. }
  996.  
  997. .biotext {width:100%; overflow-y:auto; padding:.75rem 1rem .75rem 1rem;}
  998. .biotext li {list-style-type:circle; margin-left:1rem;}
  999. .biotext a {
  1000. position:relative;
  1001. display:inline-block;
  1002. font-weight:500;
  1003. border-bottom:1.5px solid var(--ColorBorders);
  1004. }
  1005. .biotext a:after {
  1006. content: '';
  1007. position:absolute;
  1008. bottom:-1.5px;
  1009. left:0;
  1010. width:100%;
  1011. height:1.5px;
  1012. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1013. border-radius:3px;
  1014. transform:scaleX(0);
  1015. transform-origin:center;
  1016. transition: transform 0.3s ease-out;
  1017. }
  1018. .biotext a:hover:after {
  1019. transform: scaleX(1);
  1020. transform-origin:center;
  1021. }
  1022. .biotext p:last-of-type {margin-bottom:0;}
  1023.  
  1024. /* projects */
  1025. .projects-wrap {
  1026. min-width:225px;
  1027. height:100%;
  1028. overflow-y:auto;
  1029. display:flex;
  1030. flex-direction:column;
  1031. border-left:1.75px solid var(--ColorBackground);
  1032. }
  1033. .projects {
  1034. width:100%;
  1035. overflow-y:auto;
  1036. padding:1rem;
  1037. display:flex;
  1038. flex-direction:column;
  1039. gap:1rem;
  1040. }
  1041. .projects::-webkit-scrollbar {
  1042. width:1px;
  1043. height:1px;
  1044. }
  1045.  
  1046. .project {
  1047. width:100%;
  1048. display:flex;
  1049. flex-direction:column;
  1050. gap:.15rem;
  1051. }
  1052. .projectline {
  1053. width:100%;
  1054. height:10px;
  1055. background:var(--ColorBackground);
  1056. border:1px solid var(--ColorBorders);
  1057. border-radius:var(--Corners);
  1058. }
  1059. .projectprogress {
  1060. max-width:calc(100% - 4px);
  1061. height:4px;
  1062. margin:2px;
  1063. background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
  1064. border-radius:var(--Corners);
  1065. }
  1066.  
  1067. .project li {
  1068. width:100%;
  1069. display:flex;
  1070. justify-content:space-between;
  1071. align-items:center;
  1072. gap:.5rem;
  1073. }
  1074. .project b {
  1075. font-size:.95em;
  1076. font-weight:400;
  1077. }
  1078. .project i {
  1079. font-size:.9em;
  1080. font-style:normal;
  1081. }
  1082.  
  1083. /*--- NAVIGATION SECTION ---*/
  1084. article.navigation {}
  1085. .navigate {
  1086. width:100%;
  1087. height:500px;
  1088. overflow-y:auto;
  1089. display:flex;
  1090. justify-content:flex-start;
  1091. align-items:flex-start;
  1092. background:var(--ColorPosts);
  1093. border-radius:var(--Corners);
  1094. }
  1095.  
  1096. /* basic left */
  1097. .navleft-wrap {
  1098. width:225px;
  1099. height:100%;
  1100. overflow-y:auto;
  1101. padding:1rem;
  1102. display:flex;
  1103. flex-direction:column;
  1104. gap:1rem;
  1105. background:var(--ColorLessOpaqueAccentOne);
  1106. }
  1107. .navleft-wrap .dots {
  1108. margin-right:.25rem;
  1109. display:flex;
  1110. justify-content:flex-start;
  1111. align-items:center;
  1112. gap:.35rem;
  1113. }
  1114. .navleft-wrap .dot {width:.65rem; height:.65rem; display:flex; justify-content:center; align-items:center; background:var(--ColorAccentText); border-radius:100%;}
  1115. .navleft-wrap .dot:nth-of-type(1) {opacity:.9;}
  1116. .navleft-wrap .dot:nth-of-type(2) {opacity:.85;}
  1117. .navleft-wrap .dot:nth-of-type(3) {opacity:.8;}
  1118. .navleft-wrap .dot:nth-of-type(3) i {transform:rotate(-45deg);}
  1119. .navleft-wrap .dot i {
  1120. opacity:0;
  1121. font-size:.7em;
  1122. color:var(--ColorAccentOne);
  1123. text-shadow:0 1px rgba(0,0,0,.1);
  1124. margin-left:.5px;
  1125. margin-bottom:.5px;
  1126. -webkit-transition: all 0.4s;
  1127. -moz-transition: all 0.4s;
  1128. -ms-transition: all 0.4s;
  1129. -o-transition: all 0.4s;
  1130. transition: all 0.4s;
  1131. }
  1132. .navleft-wrap .dots:hover .dot i {opacity:1;}
  1133.  
  1134. .navleft {
  1135. width:100%;
  1136. overflow-y:auto;
  1137. display:flex;
  1138. flex-direction:column;
  1139. gap:1rem;
  1140. }
  1141. .navleft::-webkit-scrollbar {
  1142. width:1px;
  1143. height:1px;
  1144. }
  1145. .nleft-title b {font-size:.95em; font-weight:600; text-shadow:0 1px rgba(0,0,0,.1); color:var(--ColorAccentText); line-height:100%;}
  1146.  
  1147. /* nav links */
  1148. .navlinks {
  1149. display:flex;
  1150. flex-direction:column;
  1151. justify-content:flex-start;
  1152. align-items:flex-start;
  1153. gap:.5rem;
  1154. }
  1155. .navlinks a {
  1156. display:flex;
  1157. justify-content:flex-start;
  1158. align-items:center;
  1159. gap:.25rem;
  1160. }
  1161. .navlinks a:hover {gap:.05rem;}
  1162. .navlinks a i {
  1163. font-size:1.1em;
  1164. color:var(--ColorAccentText);
  1165. text-shadow:0 1px rgba(0,0,0,.1);
  1166. -webkit-transition: all 0.4s;
  1167. -moz-transition: all 0.4s;
  1168. -ms-transition: all 0.4s;
  1169. -o-transition: all 0.4s;
  1170. transition: all 0.4s;
  1171. }
  1172. .navlinks a:hover i {transform:rotate(180deg);}
  1173. .navlinks a span {
  1174. font-size:.95em;
  1175. color:var(--ColorAccentText);
  1176. text-shadow:0 1px rgba(0,0,0,.1);
  1177. white-space:nowrap;
  1178. overflow:hidden;
  1179. text-overflow:ellipsis;
  1180. -webkit-transition: all 0.4s;
  1181. -moz-transition: all 0.4s;
  1182. -ms-transition: all 0.4s;
  1183. -o-transition: all 0.4s;
  1184. transition: all 0.4s;
  1185. }
  1186. .navlinks a:hover span {text-shadow:none;}
  1187.  
  1188. /*-- CAROUSEL --*/
  1189. #carousel {
  1190. position:relative;
  1191. overflow:hidden;
  1192. width:100%;
  1193. height:100%;
  1194. }
  1195. .p-wrapper {
  1196. position:relative;
  1197. width:100%;
  1198. height:100%;
  1199. transition:transform 0s ease-in-out;
  1200. }
  1201.  
  1202. .panel-title {
  1203. width:100%;
  1204. padding:.25rem 1rem .25rem 1rem;
  1205. border-bottom:.75px solid var(--ColorBackground);
  1206. }
  1207. .panel-title b {font-size:.95em; font-weight:600;}
  1208.  
  1209. #navigation-wrap {
  1210. width:100%;
  1211. overflow-y:auto;
  1212. display:flex;
  1213. flex-direction:column;
  1214. border-right:1.75px solid var(--ColorBackground);
  1215. }
  1216.  
  1217. #navigation {
  1218. position:relative;
  1219. width:100%;
  1220. overflow-y:auto;
  1221. display:flex;
  1222. flex-direction:column;
  1223. gap:.25rem;
  1224. padding:.5rem;
  1225. }
  1226. #navigation::-webkit-scrollbar {
  1227. width:1px;
  1228. height:1px;
  1229. }
  1230.  
  1231. #navigation a {
  1232. width:100%;
  1233. padding:.25rem .5rem .25rem .5rem;
  1234. display:flex;
  1235. justify-content:flex-start;
  1236. align-items:center;
  1237. gap:.25rem;
  1238. border-radius:var(--Corners);
  1239. }
  1240. #navigation a:hover {background:var(--ColorLessOpaqueAccentOne);}
  1241. #navigation a i {
  1242. font-size:1.1em;
  1243. color:transparent;
  1244. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1245. background-clip:text;
  1246. -webkit-background-clip:text;
  1247. transition:ease-in-out .4s;
  1248. -webkit-transition: all 0.4s;
  1249. -moz-transition: all 0.4s;
  1250. -ms-transition: all 0.4s;
  1251. -o-transition: all 0.4s;
  1252. transition: all 0.4s;
  1253. }
  1254. #navigation a:hover i, #navigation a:hover span {
  1255. color:var(--ColorAccentText);
  1256. text-shadow:0 1px rgba(0,0,0,.1);
  1257. }
  1258. #navigation a span {
  1259. color:var(--ColorText);
  1260. -webkit-transition: all 0.4s;
  1261. -moz-transition: all 0.4s;
  1262. -ms-transition: all 0.4s;
  1263. -o-transition: all 0.4s;
  1264. transition: all 0.4s;
  1265. }
  1266.  
  1267. [class^="label_"] {
  1268. position:relative;
  1269. width:100%;
  1270. padding:.25rem .5rem .25rem .5rem;
  1271. display:flex;
  1272. justify-content:space-between;
  1273. align-items:center;
  1274. gap:1rem;
  1275. border-radius:var(--Corners);
  1276. cursor:help;
  1277. -webkit-transition: all 0.4s;
  1278. -moz-transition: all 0.4s;
  1279. -ms-transition: all 0.4s;
  1280. -o-transition: all 0.4s;
  1281. transition: all 0.4s;
  1282. }
  1283. [class^="label_"]:hover {background:var(--ColorOpaqueAccentOne);}
  1284. [class^="label_"] li {
  1285. display:flex;
  1286. justify-content:flex-start;
  1287. align-items:center;
  1288. gap:.25rem;
  1289. }
  1290.  
  1291. [class^="label_"] li i {
  1292. font-size:1.2em;
  1293. color:transparent;
  1294. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1295. background-clip:text;
  1296. -webkit-background-clip:text;
  1297. -webkit-transition: all 0.4s;
  1298. -moz-transition: all 0.4s;
  1299. -ms-transition: all 0.4s;
  1300. -o-transition: all 0.4s;
  1301. transition: all 0.4s;
  1302. }
  1303. [class^="label_"] li span {
  1304. white-space:nowrap;
  1305. overflow:hidden;
  1306. text-overflow:ellipsis;
  1307. -webkit-transition: all 0.4s;
  1308. -moz-transition: all 0.4s;
  1309. -ms-transition: all 0.4s;
  1310. -o-transition: all 0.4s;
  1311. transition: all 0.4s;
  1312. }
  1313. [class^="label_"]:hover li span {color:var(--ColorTitle);}
  1314.  
  1315. [class^="label_"] i#foldercaret {
  1316. font-size:.75em;
  1317. color:var(--ColorText);
  1318. -webkit-transition: all 0.4s;
  1319. -moz-transition: all 0.4s;
  1320. -ms-transition: all 0.4s;
  1321. -o-transition: all 0.4s;
  1322. transition: all 0.4s;
  1323. }
  1324.  
  1325. /* BUTTON CSS */
  1326. #button_a:checked ~ #carousel .p-wrapper {
  1327. -webkit-transform: translateY(0);
  1328. transform: translateY(0);
  1329. }
  1330.  
  1331. #button_b:checked ~ #carousel .p-wrapper {
  1332. -webkit-transform: translateY(-100%);
  1333. transform: translateY(-100%);
  1334. }
  1335.  
  1336. #button_c:checked ~ #carousel .p-wrapper {
  1337. -webkit-transform: translateY(-200%);
  1338. transform: translateY(-200%);
  1339. }
  1340.  
  1341. #button_d:checked ~ #carousel .p-wrapper {
  1342. -webkit-transform: translateY(-300%);
  1343. transform: translateY(-300%);
  1344. }
  1345.  
  1346. #button_e:checked ~ #carousel .p-wrapper {
  1347. -webkit-transform: translateY(-400%);
  1348. transform: translateY(-400%);
  1349. }
  1350.  
  1351. #button_f:checked ~ #carousel .p-wrapper {
  1352. -webkit-transform: translateY(-500%);
  1353. transform: translateY(-500%);
  1354. }
  1355.  
  1356. #button_g:checked ~ #carousel .p-wrapper {
  1357. -webkit-transform: translateY(-600%);
  1358. transform: translateY(-600%);
  1359. }
  1360.  
  1361. #button_h:checked ~ #carousel .p-wrapper {
  1362. -webkit-transform: translateY(-700%);
  1363. transform: translateY(-700%);
  1364. }
  1365.  
  1366. #button_i:checked ~ #carousel .p-wrapper {
  1367. -webkit-transform: translateY(-800%);
  1368. transform: translateY(-800%);
  1369. }
  1370.  
  1371. #button_j:checked ~ #carousel .p-wrapper {
  1372. -webkit-transform: translateY(-900%);
  1373. transform: translateY(-900%);
  1374. }
  1375.  
  1376. #button_k:checked ~ #carousel .p-wrapper {
  1377. -webkit-transform: translateY(-1000%);
  1378. transform: translateY(-1000%);
  1379. }
  1380.  
  1381. #button_l:checked ~ #carousel .p-wrapper {
  1382. -webkit-transform: translateY(-1100%);
  1383. transform: translateY(-1100%);
  1384. }
  1385.  
  1386. #button_m:checked ~ #carousel .p-wrapper {
  1387. -webkit-transform: translateY(-1200%);
  1388. transform: translateY(-1200%);
  1389. }
  1390.  
  1391. #button_n:checked ~ #carousel .p-wrapper {
  1392. -webkit-transform: translateY(-1300%);
  1393. transform: translateY(-1300%);
  1394. }
  1395.  
  1396. #button_o:checked ~ #carousel .p-wrapper {
  1397. -webkit-transform: translateY(-1400%);
  1398. transform: translateY(-1400%);
  1399. }
  1400.  
  1401. #button_p:checked ~ #carousel .p-wrapper {
  1402. -webkit-transform: translateY(-1500%);
  1403. transform: translateY(-1500%);
  1404. }
  1405.  
  1406.  
  1407. /*=========== CAROUSEL - ALL ADDED BUTTONS ABOVE THIS LINE ===============*/
  1408.  
  1409. /* checked icons */
  1410. #button_a:checked ~ #navigation-wrap .label_a li i,
  1411. #button_b:checked ~ #navigation-wrap .label_b li i,
  1412. #button_c:checked ~ #navigation-wrap .label_c li i,
  1413. #button_d:checked ~ #navigation-wrap .label_d li i,
  1414. #button_e:checked ~ #navigation-wrap .label_e li i,
  1415. #button_f:checked ~ #navigation-wrap .label_f li i,
  1416. #button_g:checked ~ #navigation-wrap .label_g li i,
  1417. #button_h:checked ~ #navigation-wrap .label_h li i,
  1418. #button_i:checked ~ #navigation-wrap .label_i li i,
  1419. #button_j:checked ~ #navigation-wrap .label_j li i,
  1420. #button_k:checked ~ #navigation-wrap .label_k li i,
  1421. #button_l:checked ~ #navigation-wrap .label_l li i,
  1422. #button_m:checked ~ #navigation-wrap .label_m li i,
  1423. #button_n:checked ~ #navigation-wrap .label_n li i,
  1424. #button_o:checked ~ #navigation-wrap .label_o li i,
  1425. #button_p:checked ~ #navigation-wrap .label_p li i,
  1426.  
  1427. /*===== EDIT HERE: CAROUSEL - COPY AND PASTE DIRECTLY ABOVE THIS LINE ======
  1428. - copy and paste for as many buttons/panels you add
  1429. - make sure the letters ALL correspond correctly
  1430. - make sure each line has a comma at the end as seen above */
  1431.  
  1432. /* checked text */
  1433. #button_a:checked ~ #navigation-wrap .label_a li span,
  1434. #button_b:checked ~ #navigation-wrap .label_b li span,
  1435. #button_c:checked ~ #navigation-wrap .label_c li span,
  1436. #button_d:checked ~ #navigation-wrap .label_d li span,
  1437. #button_e:checked ~ #navigation-wrap .label_e li span,
  1438. #button_f:checked ~ #navigation-wrap .label_f li span,
  1439. #button_g:checked ~ #navigation-wrap .label_g li span,
  1440. #button_h:checked ~ #navigation-wrap .label_h li span,
  1441. #button_i:checked ~ #navigation-wrap .label_i li span,
  1442. #button_j:checked ~ #navigation-wrap .label_j li span,
  1443. #button_k:checked ~ #navigation-wrap .label_k li span,
  1444. #button_l:checked ~ #navigation-wrap .label_l li span,
  1445. #button_m:checked ~ #navigation-wrap .label_m li span,
  1446. #button_n:checked ~ #navigation-wrap .label_n li span,
  1447. #button_o:checked ~ #navigation-wrap .label_o li span,
  1448. #button_p:checked ~ #navigation-wrap .label_p li span,
  1449.  
  1450. /*===== EDIT HERE: CAROUSEL - COPY AND PASTE DIRECTLY ABOVE THIS LINE ======
  1451. - copy and paste for as many buttons/panels you add
  1452. - make sure the letters ALL correspond correctly
  1453. - make sure each line has a comma at the end as seen above */
  1454.  
  1455. /* checked folder caret */
  1456. #button_a:checked ~ #navigation-wrap .label_a i#foldercaret,
  1457. #button_b:checked ~ #navigation-wrap .label_b i#foldercaret,
  1458. #button_c:checked ~ #navigation-wrap .label_c i#foldercaret,
  1459. #button_d:checked ~ #navigation-wrap .label_d i#foldercaret,
  1460. #button_e:checked ~ #navigation-wrap .label_e i#foldercaret,
  1461. #button_f:checked ~ #navigation-wrap .label_f i#foldercaret,
  1462. #button_g:checked ~ #navigation-wrap .label_g i#foldercaret,
  1463. #button_h:checked ~ #navigation-wrap .label_h i#foldercaret,
  1464. #button_i:checked ~ #navigation-wrap .label_i i#foldercaret,
  1465. #button_j:checked ~ #navigation-wrap .label_j i#foldercaret,
  1466. #button_k:checked ~ #navigation-wrap .label_k i#foldercaret,
  1467. #button_l:checked ~ #navigation-wrap .label_l i#foldercaret,
  1468. #button_m:checked ~ #navigation-wrap .label_m i#foldercaret,
  1469. #button_n:checked ~ #navigation-wrap .label_n i#foldercaret,
  1470. #button_o:checked ~ #navigation-wrap .label_o i#foldercaret,
  1471. #button_p:checked ~ #navigation-wrap .label_p i#foldercaret
  1472.  
  1473. /*===== EDIT HERE: CAROUSEL - COPY AND PASTE DIRECTLY ABOVE THIS LINE ======
  1474. - copy and paste for as many buttons/panels you add
  1475. - make sure the letters ALL correspond correctly
  1476. - make sure each line has a comma at the end *EXCEPT the last one, as seen above */
  1477. {
  1478. color:var(--ColorAccentText);
  1479. text-shadow:0 1px rgba(0,0,0,.1);
  1480. }
  1481.  
  1482. /* checked button background */
  1483. #button_a:checked ~ #navigation-wrap .label_a,
  1484. #button_b:checked ~ #navigation-wrap .label_b,
  1485. #button_c:checked ~ #navigation-wrap .label_c,
  1486. #button_d:checked ~ #navigation-wrap .label_d,
  1487. #button_e:checked ~ #navigation-wrap .label_e,
  1488. #button_f:checked ~ #navigation-wrap .label_f,
  1489. #button_g:checked ~ #navigation-wrap .label_g,
  1490. #button_h:checked ~ #navigation-wrap .label_h,
  1491. #button_i:checked ~ #navigation-wrap .label_i,
  1492. #button_j:checked ~ #navigation-wrap .label_j,
  1493. #button_k:checked ~ #navigation-wrap .label_k,
  1494. #button_l:checked ~ #navigation-wrap .label_l,
  1495. #button_m:checked ~ #navigation-wrap .label_m,
  1496. #button_n:checked ~ #navigation-wrap .label_n,
  1497. #button_o:checked ~ #navigation-wrap .label_o,
  1498. #button_p:checked ~ #navigation-wrap .label_p
  1499.  
  1500. /*===== EDIT HERE: CAROUSEL - COPY AND PASTE DIRECTLY ABOVE THIS LINE ======
  1501. - copy and paste for as many buttons/panels you add
  1502. - make sure the letters ALL correspond correctly
  1503. - make sure each line has a comma at the end *EXCEPT the last one, as seen above */
  1504. {
  1505. background:var(--ColorLessOpaqueAccentOne);
  1506. cursor:default;
  1507. }
  1508.  
  1509. /* panels */
  1510. [class^="panel_"] {
  1511. position:relative;
  1512. width:100%;
  1513. height:inherit;
  1514. overflow:auto;
  1515. display:flex;
  1516. flex-direction:column;
  1517. }
  1518. .panel-links {
  1519. position:relative;
  1520. width:100%;
  1521. overflow:auto;
  1522. padding:.5rem;
  1523. display:flex;
  1524. flex-direction:column;
  1525. gap:.25rem;
  1526. }
  1527. .panel-links::-webkit-scrollbar {
  1528. width:1px;
  1529. height:1px;
  1530. }
  1531.  
  1532. .panel-links a {
  1533. width:100%;
  1534. padding:.25rem .5rem .25rem .5rem;
  1535. display:flex;
  1536. justify-content:flex-start;
  1537. align-items:center;
  1538. gap:.25rem;
  1539. border-radius:var(--Corners);
  1540. }
  1541. .panel-links a:hover {background:var(--ColorLessOpaqueAccentTwo);}
  1542. .panel-links a i {
  1543. font-size:1.1em;
  1544. color:transparent;
  1545. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1546. background-clip:text;
  1547. -webkit-background-clip:text;
  1548. transition:ease-in-out .4s;
  1549. }
  1550. .panel-links a:hover i {color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  1551. .panel-links a span {
  1552. color:var(--ColorText);
  1553. transition:ease-in-out .4s;
  1554. }
  1555. .panel-links a:hover span {color:var(--ColorAccentText); text-shadow:0 1px rgba(0,0,0,.1);}
  1556.  
  1557. /*--- search bar ---*/
  1558. .searchbar {width:100%; padding:1rem; border-top:1.5px solid var(--ColorBackground);}
  1559. .search {width:100%;}
  1560. .search .query {
  1561. border: 0;
  1562. outline: 0;
  1563. font-family:var(--BodyFont), sans-serif;
  1564. font-size:1em;
  1565. width:100%;
  1566. color:#fff;
  1567. text-shadow:0 2px rgba(0,0,0,.1);
  1568. letter-spacing:.05em;
  1569. background:transparent;
  1570. }
  1571. ::-webkit-input-placeholder {color: inherit; opacity:.85;}
  1572. :-moz-placeholder {color: inherit; opacity:.85;}
  1573. ::-moz-placeholder {color: inherit; opacity:.85;}
  1574. :-ms-input-placeholder {color: inherit; opacity:.85;}
  1575.  
  1576. input:focus::-webkit-input-placeholder {color:transparent; text-shadow:none;}
  1577. input:focus:-moz-placeholder {color:transparent; text-shadow:none;}
  1578. input:focus::-moz-placeholder {color:transparent; text-shadow:none;}
  1579. input:focus:-ms-input-placeholder { color:transparent; text-shadow:none;}
  1580.  
  1581. /*---- RESPONSIVENESS ----*/
  1582. @media only screen and (max-width: 850px) {
  1583. section {width:calc(100% - 2rem); margin-left:1rem; margin-right:1rem;}
  1584. article {width:100%; min-width:auto;}
  1585. }
  1586. @media only screen and (max-width: 700px) {
  1587. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
  1588.  
  1589. .basicright {flex-direction:column;}
  1590. .bio {width:100%!important;}
  1591. .projects-wrap {min-width:auto; border-top:1.75px solid var(--ColorBackground); border-left:none;}
  1592.  
  1593. #navigation-wrap {border-bottom:1.75px solid var(--ColorBackground); border-right:none;}
  1594. }
  1595.  
  1596. {CustomCSS}
  1597.  
  1598. </style>
  1599. </head>
  1600.  
  1601. <!----- HTML ----->
  1602.  
  1603. <body>
  1604. <main> <!-- main container -->
  1605.  
  1606. <!--- HEADER --->
  1607. <header>
  1608. <div class="header-left">
  1609. <div class="headertitle">
  1610. <a class="htitle" href="/">{Title}</a>
  1611. </div>
  1612. <a class="mainlink" href="/">home</a>
  1613. <a class="mainlink" href="/ask">ask</a>
  1614. <a class="mainlink" href="/archive">archive</i></a>
  1615. </div>
  1616. <div class="header-right">
  1617. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
  1618. <a title="toggle messages" id="messagebutton"><i class="ti ti-messages"></i></a>
  1619. <!-- day/night -->
  1620. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1621. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1622. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1623. </button>
  1624. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1625. <!--- CREDIT: DO NOT TOUCH --->
  1626. <a title="custom page by sage" id="credit" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  1627. </div>
  1628. </header><!-- header ends -->
  1629.  
  1630. <section><!-- section -->
  1631.  
  1632. <!-- MESSAGES -->
  1633. <div id="messages"><div id="messagesdrag">
  1634. <div class="messageheader">
  1635. <a title="hide messages" id="messagebutton"><i id="mhicon" class="ph-caret-left-bold"></i></a>
  1636.  
  1637. <!------------------------ EDIT HERE: MESSAGE HEADER -----------------------
  1638.  
  1639. FORMAT:
  1640. <a href="//[blogname].tumblr.com"><img src="//api.tumblr.com/v2/blog/[blogname].tumblr.com/avatar"><b>[name]</b></a>
  1641.  
  1642. - bracketed text is what you change, delete the brackets!
  1643.  
  1644. --------------------------------------------------------------------------->
  1645. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><b>name or blog name</b></a>
  1646.  
  1647. <i id="mhicon" class="ph-video-camera-bold"></i>
  1648. </div>
  1649. <div class="msgconvo">
  1650. <!------------------------ EDIT HERE: MESSAGE CONVO -----------------------
  1651.  
  1652. RECEIVED MESSAGE FORMAT:
  1653.  
  1654. <div class="msgleft"><div class="msgtext">[received txt]</div></div>
  1655.  
  1656. SENT MESSAGE FORMAT:
  1657.  
  1658. <div class="msgright"><div class="msgtext">[sent txt]</div></div>
  1659.  
  1660. FINAL SENT MESSAGE FORMAT:
  1661.  
  1662. <div class="msgright final"><div class="msgtext">[final sent txt]</div></div>
  1663.  
  1664. - bracketed text is what you change, delete the brackets!
  1665. - you can put these in any order you like!
  1666. - use the final sent message format for the 'delivered' text, just make sure it's the last message from you (msgright)
  1667. - space for unlimited messages, this section will scroll!
  1668.  
  1669. ------------------------ ALL MESSAGES BELOW THIS LINE --------------------->
  1670.  
  1671. <div class="msgleft"><div class="msgtext">this is a text from the other person</div></div>
  1672.  
  1673. <div class="msgright"><div class="msgtext">a text from you</div></div>
  1674.  
  1675. <div class="msgleft"><div class="msgtext">another text from the other person</div></div>
  1676.  
  1677. <div class="msgright"><div class="msgtext">another text from you</div></div>
  1678.  
  1679. <div class="msgleft"><div class="msgtext">here's a third text from the other person</div></div>
  1680.  
  1681. <div class="msgright final"><div class="msgtext">a last text from you</div></div>
  1682.  
  1683. </div><!-- // .msgconvo / ALL MESSAGES ABOVE THIS LINE -->
  1684. <div class="messagefooter">
  1685. <i id="mficon" class="ti ti-plus"></i>
  1686. <div class="msginput"><span>message</span><i class="ti ti-microphone"></i></div>
  1687. </div>
  1688. </div></div><!-- // #messages / #messagesdrag -->
  1689.  
  1690. <!--- ABOUT SECTION --->
  1691. <article class="about">
  1692. <div class="basicinfo"><!-- basic info -->
  1693. <div class="basicleft-wrap">
  1694. <div class="dots">
  1695. <div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div>
  1696. </div>
  1697. <div class="basicleft">
  1698. <div class="basicstats">
  1699. <div class="bleft-title"><b>info</b></div>
  1700.  
  1701. <!------------------------ EDIT HERE: INFO STATS ---------------------------
  1702.  
  1703. FORMAT:
  1704. <li><i class="ti ti-[icon-name]"></i><span>[info text]</span></li>
  1705.  
  1706. - bracketed text is what you change, delete the brackets!
  1707.  
  1708. ------------------------ ALL INFO STATS BELOW THIS LINE ------------------->
  1709.  
  1710. <li><i class="ti ti-writing-sign"></i><span>name</span></li>
  1711. <li><i class="ti ti-cake"></i><span>age</span></li>
  1712. <li><i class="ti ti-leaf"></i><span>pronouns</span></li>
  1713. <li><i class="ti ti-map-pin"></i><span>location</span></li>
  1714. <li><i class="ti ti-sun-high"></i><span>zodiac</span></li>
  1715.  
  1716. </div><!-- // .basicstats / ALL INFO STATS ABOVE THIS LINE -->
  1717.  
  1718. <div class="basicfavs">
  1719. <div class="bleft-title"><b>favorites</b></div>
  1720.  
  1721. <!------------------------ EDIT HERE: FAVORITES ----------------------------
  1722.  
  1723. FORMAT:
  1724. <li><i class="ti ti-[icon-name]"></i><span>[info text]</span></li>
  1725.  
  1726. - bracketed text is what you change, delete the brackets!
  1727.  
  1728. --------------------- ALL FAVORITES BELOW THIS LINE ----------------------->
  1729.  
  1730. <li><i class="ti ti-hearts"></i><span>fav</span></li>
  1731. <li><i class="ti ti-hearts"></i><span>fav</span></li>
  1732. <li><i class="ti ti-hearts"></i><span>fav</span></li>
  1733. <li><i class="ti ti-hearts"></i><span>fav</span></li>
  1734.  
  1735. </div><!-- // .basicfavs / ALL FAVS ABOVE THIS LINE -->
  1736.  
  1737. <div class="basicblogs">
  1738. <div class="bleft-title"><b>blogs</b></div>
  1739.  
  1740. <!------------------------- EDIT HERE: BLOGS -------------------------------
  1741.  
  1742. FORMAT:
  1743. <a href="//[blogname].tumblr.com"><img src="//api.tumblr.com/v2/blog/[blogname].tumblr.com/avatar"><span>[blogname]</span></a>
  1744.  
  1745. - bracketed text is what you change, delete the brackets!
  1746.  
  1747. ------------------------- ALL BLOGS BELOW THIS LINE ----------------------->
  1748.  
  1749. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>phantomcodes</span></a>
  1750.  
  1751. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>phantomcodes</span></a>
  1752.  
  1753. </div><!-- // .basicblogs / ALL BLOGS ABOVE THIS LINE -->
  1754. </div>
  1755. </div>
  1756. <div class="basicright-wrap">
  1757. <div class="basictitle"><i class="ti ti-user"></i><b>about me</b></div>
  1758. <div class="basicright">
  1759. <div class="bio">
  1760. <div class="basicright-title"><b>bio</b></div>
  1761. <div class="biotext">
  1762.  
  1763. <!------------------------- EDIT HERE: BIO TEXT ----------------------------
  1764.  
  1765. - feel free to add as much text as you want! this section will scroll
  1766.  
  1767. ----------------------- ALL BIO TEXT BELOW THIS LINE ---------------------->
  1768.  
  1769. your about text goes here! here's <a href="/">a link</a>. <b>bold text</b>.
  1770. <blockquote>this is a blockquote</blockquote>
  1771. <li>here is</li>
  1772. <li>a list</li>
  1773. <li>of things</li>
  1774.  
  1775. <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Finibus tortor velit eleifend etiam montes. Nullam semper platea tempor nascetur ante semper hendrerit. Vulputate sodales potenti ligula quam habitasse nisi class ultrices condimentum. Integer ante massa malesuada duis lacinia. Vulputate nibh justo nunc habitasse eros; lectus taciti at. Donec at viverra faucibus fames aenean lobortis integer malesuada. Nisi gravida nibh duis cras varius mi. Quis a pretium habitant ridiculus, cras gravida felis elit. Pulvinar ligula porttitor integer facilisis sapien vulputate consectetur congue.</p>
  1776.  
  1777. </div><!-- // .biotext / ALL BIO TEXT ABOVE THIS LINE -->
  1778. </div><!-- // .bio -->
  1779. <div class="projects-wrap"><!-- projects -->
  1780. <div class="basicright-title"><b>projects</b></div>
  1781. <div class="projects">
  1782.  
  1783. <!------------------------- EDIT HERE: PROJECTS ----------------------------
  1784.  
  1785. FORMAT:
  1786. <div class="project">
  1787. <div class="projectline"><div class="projectprogress" style="width:[number]%;"></div></div>
  1788. <li><b>[project name]</b><i>[number]%</i></li>
  1789. </div>
  1790.  
  1791. - bracketed text is what you change, delete the brackets!
  1792. - feel free to add as many projects as you like, this section will scroll!
  1793.  
  1794. ------------------------- ALL PROJECTS BELOW THIS LINE -------------------->
  1795.  
  1796. <div class="project">
  1797. <div class="projectline"><div class="projectprogress" style="width:50%;"></div></div>
  1798. <li><b>project name</b><i>50%</i></li>
  1799. </div><!-- // .project -->
  1800.  
  1801. <div class="project">
  1802. <div class="projectline"><div class="projectprogress" style="width:75%;"></div></div>
  1803. <li><b>project name</b><i>75%</i></li>
  1804. </div><!-- // .project -->
  1805.  
  1806. <div class="project">
  1807. <div class="projectline"><div class="projectprogress" style="width:25%;"></div></div>
  1808. <li><b>project name</b><i>25%</i></li>
  1809. </div><!-- // .project -->
  1810.  
  1811. <div class="project">
  1812. <div class="projectline"><div class="projectprogress" style="width:100%;"></div></div>
  1813. <li><b>project name</b><i>100%</i></li>
  1814. </div><!-- // .project -->
  1815.  
  1816. </div><!-- // .projects / ALL PROJECTS ABOVE THIS LINE -->
  1817. </div><!-- // .projects-wrap -->
  1818. </div><!-- // .basicright -->
  1819. </div><!-- // .basicright-wrap -->
  1820. </div><!-- basic info -->
  1821. </article>
  1822.  
  1823. <!--- NAVIGATION SECTION --->
  1824. <article class="navigation">
  1825. <div class="navigate"><!-- basic info -->
  1826. <div class="navleft-wrap">
  1827. <div class="dots">
  1828. <div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div>
  1829. </div>
  1830. <div class="navleft">
  1831.  
  1832. <!------------------------- EDIT HERE: LEFT NAVIGATION ---------------------
  1833.  
  1834. FORMAT:
  1835. <div class="navlinks">
  1836. <div class="nleft-title"><b>[section title]</b></div>
  1837. <a href="[linkurl]"><i class="ti ti-caret-left"></i><span>[link name]</span></a>
  1838. </div>
  1839.  
  1840. - bracketed text is what you change, delete the brackets!
  1841. - feel free to add as many links within each 'navlinks' section as you want!
  1842. - feel free to add as many 'navlinks' sections as you want!
  1843. - this section will scroll
  1844.  
  1845. ------------------- ALL LEFT NAV SECTIONS BELOW THIS LINE ----------------->
  1846.  
  1847. <div class="navlinks">
  1848. <div class="nleft-title"><b>section title</b></div>
  1849. <a href="/"><i class="ti ti-caret-left"></i><span>link one</span></a>
  1850. <a href="/"><i class="ti ti-caret-left"></i><span>link two</span></a>
  1851. <a href="/"><i class="ti ti-caret-left"></i><span>link three</span></a>
  1852. <a href="/"><i class="ti ti-caret-left"></i><span>link four</span></a>
  1853. </div>
  1854. <div class="navlinks">
  1855. <div class="nleft-title"><b>section title</b></div>
  1856. <a href="/"><i class="ti ti-caret-left"></i><span>link one</span></a>
  1857. <a href="/"><i class="ti ti-caret-left"></i><span>link two</span></a>
  1858. <a href="/"><i class="ti ti-caret-left"></i><span>link three</span></a>
  1859. <a href="/"><i class="ti ti-caret-left"></i><span>link four</span></a>
  1860. </div>
  1861. <div class="navlinks">
  1862. <div class="nleft-title"><b>section title</b></div>
  1863. <a href="/"><i class="ti ti-caret-left"></i><span>link one</span></a>
  1864. <a href="/"><i class="ti ti-caret-left"></i><span>link two</span></a>
  1865. <a href="/"><i class="ti ti-caret-left"></i><span>link three</span></a>
  1866. <a href="/"><i class="ti ti-caret-left"></i><span>link four</span></a>
  1867. </div>
  1868. </div><!-- // .navleft / ALL LEFT NAV SECTIONS ABOVE THIS LINE -->
  1869. </div>
  1870. <div class="basicright-wrap">
  1871. <div class="basictitle"><i class="ti ti-map"></i><b>navigate</b></div>
  1872. <div class="basicright"><!--- CAROUSEL --->
  1873.  
  1874. <!--- EDIT HERE: CAROUSEL - HIDDEN INPUTS --->
  1875. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  1876. <input hidden type="radio" name="carousel-control" id="button_b"/>
  1877. <input hidden type="radio" name="carousel-control" id="button_c"/>
  1878. <input hidden type="radio" name="carousel-control" id="button_d"/>
  1879. <input hidden type="radio" name="carousel-control" id="button_e"/>
  1880. <input hidden type="radio" name="carousel-control" id="button_f"/>
  1881. <input hidden type="radio" name="carousel-control" id="button_g"/>
  1882. <input hidden type="radio" name="carousel-control" id="button_h"/>
  1883. <input hidden type="radio" name="carousel-control" id="button_i"/>
  1884. <input hidden type="radio" name="carousel-control" id="button_j"/>
  1885. <input hidden type="radio" name="carousel-control" id="button_k"/>
  1886. <input hidden type="radio" name="carousel-control" id="button_l"/>
  1887. <input hidden type="radio" name="carousel-control" id="button_m"/>
  1888. <input hidden type="radio" name="carousel-control" id="button_n"/>
  1889. <input hidden type="radio" name="carousel-control" id="button_o"/>
  1890. <input hidden type="radio" name="carousel-control" id="button_p"/>
  1891.  
  1892. <!--=== EDIT HERE: CAROUSEL - COPY AND PASTE DIRECTLY ABOVE THIS LINE ======
  1893. - copy and paste for as many buttons/panels you add
  1894. - make sure the letters ALL correspond correctly -->
  1895.  
  1896. <div id="navigation-wrap">
  1897.  
  1898. <!----------------- EDIT HERE: RIGHT NAVIGATION TITLE ----------------------
  1899.  
  1900. - make sure the section title stays wrapped in <b></b>
  1901.  
  1902. --------------------------------------------------------------------------->
  1903. <div class="panel-title"><b>section title</b></div>
  1904.  
  1905. <div id="navigation">
  1906.  
  1907. <!---------------------- EDIT HERE: RIGHT NAVIGATION --------------------
  1908.  
  1909. REGULAR LINK FORMAT:
  1910.  
  1911. <a href="[linkurl]"><i class="ti ti-file"></i><span>[link name]</span></a>
  1912.  
  1913. - bracketed text is what you change, delete the brackets!
  1914. - if you want you can change the icon from 'file' to whatever you like!
  1915. - add as many regular links as you want, you can put them before and after the carousel
  1916. - this section will scroll
  1917.  
  1918. ------------------ ALL LINKS & CAROUSEL NAV BELOW THIS LINE --------------->
  1919.  
  1920. <a href="/"><i class="ti ti-file"></i><span>link one</span></a>
  1921. <a href="/"><i class="ti ti-file"></i><span>link two</span></a>
  1922.  
  1923. <!--=================== EDIT HERE: CAROUSEL NAVIGATION =====================
  1924.  
  1925. CAROUSEL NAV FORMAT:
  1926. <label for="button_a" class="label_a"><li><i class="ti ti-folder"></i><span>[folder name]</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1927.  
  1928. - bracketed text is what you change, delete the brackets! i recommend only change the folder name but you can change the folder icon too if you wish!
  1929. - be careful editing the carousel buttons, DO NOT change the letters (button_a / label_a) and DO NOT change the order!
  1930. - if you do change anything make sure the letters all correspond with each label: button_a / label_a etc.
  1931.  
  1932. !!!! if you want to add another panel to the carousel please message me !!!!
  1933.  
  1934. =========================================================================-->
  1935.  
  1936. <label for="button_a" class="label_a"><li><i class="ti ti-folder"></i><span>folder a</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1937.  
  1938. <label for="button_b" class="label_b"><li><i class="ti ti-folder"></i><span>folder b</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1939.  
  1940. <label for="button_c" class="label_c"><li><i class="ti ti-folder"></i><span>folder c</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1941.  
  1942. <label for="button_d" class="label_d"><li><i class="ti ti-folder"></i><span>folder d</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1943.  
  1944. <label for="button_e" class="label_e"><li><i class="ti ti-folder"></i><span>folder e</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1945.  
  1946. <label for="button_f" class="label_f"><li><i class="ti ti-folder"></i><span>folder f</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1947.  
  1948. <label for="button_g" class="label_g"><li><i class="ti ti-folder"></i><span>folder g</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1949.  
  1950. <label for="button_h" class="label_h"><li><i class="ti ti-folder"></i><span>folder h</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1951.  
  1952. <label for="button_i" class="label_i"><li><i class="ti ti-folder"></i><span>folder i</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1953.  
  1954. <label for="button_j" class="label_j"><li><i class="ti ti-folder"></i><span>folder j</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1955.  
  1956. <label for="button_k" class="label_k"><li><i class="ti ti-folder"></i><span>folder k</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1957.  
  1958. <label for="button_l" class="label_l"><li><i class="ti ti-folder"></i><span>folder l</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1959.  
  1960. <label for="button_m" class="label_m"><li><i class="ti ti-folder"></i><span>folder m</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1961.  
  1962. <label for="button_n" class="label_n"><li><i class="ti ti-folder"></i><span>folder n</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1963.  
  1964. <label for="button_o" class="label_o"><li><i class="ti ti-folder"></i><span>folder o</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1965.  
  1966. <label for="button_p" class="label_p"><li><i class="ti ti-folder"></i><span>folder p</span></li><i id="foldercaret" class="ph-caret-right-bold"></i></label>
  1967.  
  1968. <!--====================== CAROUSEL NAVIGATION ENDS ========================
  1969. ===================== regular links can be added below! =================-->
  1970.  
  1971. <a href="/"><i class="ti ti-file"></i><span>link five</span></a>
  1972. <a href="/"><i class="ti ti-file"></i><span>link six</span></a>
  1973. <a href="/"><i class="ti ti-file"></i><span>link seven</span></a>
  1974. <a href="/"><i class="ti ti-file"></i><span>link eight</span></a>
  1975.  
  1976. </div><!-- // #navigation / ALL LINKS & CAROUSEL NAV ABOVE THIS LINE -->
  1977. </div><!-- // .navigation-wrap -->
  1978.  
  1979. <div id="carousel">
  1980. <div class="p-wrapper">
  1981.  
  1982. <!---------------------- EDIT HERE: CAROUSEL PANELS ------------------------
  1983.  
  1984. PANEL FORMAT:
  1985.  
  1986. <div class="panel_a">
  1987. <div class="panel-title"><b>[folder title]</b></div>
  1988. <div class="panel-links">
  1989. <a href="[linkurl]"><i class="ti ti-link"></i><span>[link name]</span></a>
  1990. </div>
  1991. </div>
  1992.  
  1993. - bracketed text is what you change, delete the brackets!
  1994. - if you want you can change the icon from 'link' to whatever you like!
  1995. - add as many links as you want, all panels will scroll
  1996.  
  1997. ------------------------ ALL PANELS BELOW THIS LINE ----------------------->
  1998.  
  1999. <div class="panel_a"><!-- panel a / folder a -->
  2000. <div class="panel-title"><b>folder a</b></div>
  2001. <div class="panel-links"><!-- PANEL A LINKS BELOW -->
  2002. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2003. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2004. <a href="/"><i class="ti ti-link"></i><span>link three</span></a>
  2005. <a href="/"><i class="ti ti-link"></i><span>link four</span></a>
  2006. </div><!-- // .panel-links / ALL PANEL A LINKS ABOVE -->
  2007. </div><!-- // .panel_a -->
  2008.  
  2009. <div class="panel_b"><!-- panel b / folder b -->
  2010. <div class="panel-title"><b>folder b</b></div>
  2011. <div class="panel-links"><!-- PANEL B LINKS BELOW -->
  2012. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2013. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2014. <a href="/"><i class="ti ti-link"></i><span>link three</span></a>
  2015. <a href="/"><i class="ti ti-link"></i><span>link four</span></a>
  2016. <a href="/"><i class="ti ti-link"></i><span>link five</span></a>
  2017. <a href="/"><i class="ti ti-link"></i><span>link six</span></a>
  2018. <a href="/"><i class="ti ti-link"></i><span>link seven</span></a>
  2019. <a href="/"><i class="ti ti-link"></i><span>link eight</span></a>
  2020. <a href="/"><i class="ti ti-link"></i><span>link nine</span></a>
  2021. <a href="/"><i class="ti ti-link"></i><span>link ten</span></a>
  2022. <a href="/"><i class="ti ti-link"></i><span>link eleven</span></a>
  2023. <a href="/"><i class="ti ti-link"></i><span>link twelve</span></a>
  2024. <a href="/"><i class="ti ti-link"></i><span>link thirteen</span></a>
  2025. <a href="/"><i class="ti ti-link"></i><span>link fourteen</span></a>
  2026. <a href="/"><i class="ti ti-link"></i><span>link fifteen</span></a>
  2027. <a href="/"><i class="ti ti-link"></i><span>link sixteen</span></a>
  2028. </div><!-- // .panel-links / ALL PANEL B LINKS ABOVE -->
  2029. </div><!-- // .panel_b -->
  2030.  
  2031. <div class="panel_c"><!-- panel c / folder c -->
  2032. <div class="panel-title"><b>folder c</b></div>
  2033. <div class="panel-links"><!-- PANEL C LINKS BELOW -->
  2034. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2035. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2036. <a href="/"><i class="ti ti-link"></i><span>link three</span></a>
  2037. <a href="/"><i class="ti ti-link"></i><span>link four</span></a>
  2038. <a href="/"><i class="ti ti-link"></i><span>link five</span></a>
  2039. <a href="/"><i class="ti ti-link"></i><span>link six</span></a>
  2040. <a href="/"><i class="ti ti-link"></i><span>link seven</span></a>
  2041. <a href="/"><i class="ti ti-link"></i><span>link eight</span></a>
  2042. <a href="/"><i class="ti ti-link"></i><span>link nine</span></a>
  2043. <a href="/"><i class="ti ti-link"></i><span>link ten</span></a>
  2044. </div><!-- // .panel-links / ALL PANEL C LINKS ABOVE -->
  2045. </div><!-- // .panel_c -->
  2046.  
  2047. <div class="panel_d"><!-- panel d / folder d -->
  2048. <div class="panel-title"><b>folder d</b></div>
  2049. <div class="panel-links"><!-- PANEL D LINKS BELOW -->
  2050. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2051. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2052. <a href="/"><i class="ti ti-link"></i><span>link three</span></a>
  2053. <a href="/"><i class="ti ti-link"></i><span>link four</span></a>
  2054. <a href="/"><i class="ti ti-link"></i><span>link five</span></a>
  2055. </div><!-- // .panel-links / ALL PANEL D LINKS ABOVE -->
  2056. </div><!-- // .panel_d -->
  2057.  
  2058. <div class="panel_e"><!-- panel e / folder e -->
  2059. <div class="panel-title"><b>folder e</b></div>
  2060. <div class="panel-links"><!-- PANEL E LINKS BELOW -->
  2061. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2062. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2063. <a href="/"><i class="ti ti-link"></i><span>link three</span></a>
  2064. <a href="/"><i class="ti ti-link"></i><span>link four</span></a>
  2065. <a href="/"><i class="ti ti-link"></i><span>link five</span></a>
  2066. <a href="/"><i class="ti ti-link"></i><span>link six</span></a>
  2067. <a href="/"><i class="ti ti-link"></i><span>link seven</span></a>
  2068. <a href="/"><i class="ti ti-link"></i><span>link eight</span></a>
  2069. </div><!-- // .panel-links / ALL PANEL E LINKS ABOVE -->
  2070. </div><!-- // .panel_e -->
  2071.  
  2072. <div class="panel_f"><!-- panel f / folder f -->
  2073. <div class="panel-title"><b>folder f</b></div>
  2074. <div class="panel-links"><!-- PANEL F LINKS BELOW -->
  2075. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2076. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2077. </div><!-- // .panel-links / ALL PANEL F LINKS ABOVE -->
  2078. </div><!-- // .panel_f -->
  2079.  
  2080. <div class="panel_g"><!-- panel g / folder g -->
  2081. <div class="panel-title"><b>folder g</b></div>
  2082. <div class="panel-links">
  2083. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2084. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2085. </div><!-- // .panel-links -->
  2086. </div><!-- // .panel_g -->
  2087.  
  2088. <div class="panel_h"><!-- panel h / folder h -->
  2089. <div class="panel-title"><b>folder h</b></div>
  2090. <div class="panel-links">
  2091. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2092. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2093. </div><!-- // .panel-links -->
  2094. </div><!-- // .panel_h -->
  2095.  
  2096. <div class="panel_i"><!-- panel i / folder i -->
  2097. <div class="panel-title"><b>folder i</b></div>
  2098. <div class="panel-links">
  2099. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2100. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2101. </div><!-- // .panel-links -->
  2102. </div><!-- // .panel_i -->
  2103.  
  2104. <div class="panel_j"><!-- panel j / folder j -->
  2105. <div class="panel-title"><b>folder j</b></div>
  2106. <div class="panel-links">
  2107. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2108. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2109. </div><!-- // .panel-links -->
  2110. </div><!-- // .panel_j -->
  2111.  
  2112. <div class="panel_k"><!-- panel k / folder k -->
  2113. <div class="panel-title"><b>folder k</b></div>
  2114. <div class="panel-links">
  2115. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2116. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2117. </div><!-- // .panel-links -->
  2118. </div><!-- // .panel_k -->
  2119.  
  2120. <div class="panel_l">
  2121. <div class="panel-title"><b>folder l</b></div>
  2122. <div class="panel-links">
  2123. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2124. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2125. </div><!-- // .panel-links -->
  2126. </div>
  2127.  
  2128. <div class="panel_m">
  2129. <div class="panel-title"><b>folder m</b></div>
  2130. <div class="panel-links">
  2131. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2132. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2133. </div><!-- // .panel-links -->
  2134. </div>
  2135.  
  2136. <div class="panel_n">
  2137. <div class="panel-title"><b>folder n</b></div>
  2138. <div class="panel-links">
  2139. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2140. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2141. </div><!-- // .panel-links -->
  2142. </div>
  2143.  
  2144. <div class="panel_o">
  2145. <div class="panel-title"><b>folder o</b></div>
  2146. <div class="panel-links">
  2147. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2148. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2149. </div><!-- // .panel-links -->
  2150. </div>
  2151.  
  2152. <div class="panel_p">
  2153. <div class="panel-title"><b>folder p</b></div>
  2154. <div class="panel-links">
  2155. <a href="/"><i class="ti ti-link"></i><span>link one</span></a>
  2156. <a href="/"><i class="ti ti-link"></i><span>link two</span></a>
  2157. </div><!-- // .panel-links -->
  2158. </div>
  2159.  
  2160. </div><!-- // .p-wrapper / ALL PANELS ABOVE THIS LINE -->
  2161. </div><!-- // #carousel -->
  2162.  
  2163. </div><!-- // .basicright -->
  2164. </div>
  2165. </div>
  2166. </article>
  2167.  
  2168. </section><!-- section ends -->
  2169.  
  2170. </main><!-- end of main container -->
  2171.  
  2172. <script>
  2173.  
  2174. // tooltips
  2175. tippy('[title]', {
  2176. theme: 'custom',
  2177. arrow: false,
  2178. followCursor: true,
  2179. delay: 100,
  2180. placement: 'top',
  2181. offset: "0, 10",
  2182. zIndex: 9999999999,
  2183. maxWidth: 400,
  2184.  
  2185. content(reference) {
  2186. const title = reference.getAttribute('title');
  2187. reference.removeAttribute('title');
  2188. return title;
  2189. },
  2190. });
  2191.  
  2192. // tumblr controls
  2193. $(document).ready(function(){
  2194. $('a#controlsbutton').click(function(){
  2195. $('body').toggleClass('controls-click');
  2196. });
  2197. });
  2198.  
  2199. // message toggle
  2200. $(document).ready(function(){
  2201. $('a#messagebutton').click(function(){
  2202. $('body').toggleClass('message-click');
  2203. });
  2204. });
  2205.  
  2206. // searchbar
  2207. $(document).ready(function(){
  2208. $('.search').submit(function(event){
  2209. var value = $('input:first').val();
  2210. location.replace('http://{Name}.tumblr.com/search/' + value);
  2211. });
  2212. });
  2213.  
  2214. // scroll to top
  2215. $(document).ready(function(){
  2216. $('a#totop').click(function(){
  2217. $('html, body').animate({scrollTop : 0},800);
  2218. return false;
  2219. });
  2220. });
  2221.  
  2222. var mybutton = document.getElementById("totop");
  2223. window.onscroll = function() {scrollFunction()};
  2224.  
  2225. function scrollFunction() {
  2226. if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
  2227. mybutton.style.display = "flex";
  2228. } else {
  2229. mybutton.style.display = "none";
  2230. }
  2231. }
  2232.  
  2233. // day/night mode
  2234. const toggle = document.getElementById("theme-toggle");
  2235.  
  2236. toggle.onclick = function () {
  2237. // add class to html and make transition snappy
  2238. document.documentElement.classList.add("theme-transition");
  2239. // alright lets retrive the info from data-theme
  2240. let currentTheme = document.documentElement.getAttribute("data-theme");
  2241. // if it's dark already, let's go into the light
  2242. let targetTheme = "light";
  2243. // but if it is light let's toggle dark mode
  2244. if (currentTheme === "light") {
  2245. targetTheme = "dark";
  2246. }
  2247. // ok now that theme has been toggled, get rid of snappy transition
  2248. window.setTimeout(function () {
  2249. document.documentElement.classList.remove("theme-transition");
  2250. }, 50);
  2251. // we're going to save our theme preference now
  2252. document.documentElement.setAttribute("data-theme", targetTheme);
  2253. localStorage.setItem("theme", targetTheme);
  2254. };
  2255.  
  2256.  
  2257. // draggable messages
  2258. dragElement(document.getElementById("messages"));
  2259.  
  2260. function dragElement(elmnt) {
  2261. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  2262. if (document.getElementById(elmnt.id + "drag")) {
  2263. // if present, the header is where you move the DIV from:
  2264. document.getElementById(elmnt.id + "drag").onmousedown = dragMouseDown;
  2265. } else {
  2266. // otherwise, move the DIV from anywhere inside the DIV:
  2267. elmnt.onmousedown = dragMouseDown;
  2268. }
  2269.  
  2270. function dragMouseDown(e) {
  2271. e = e || window.event;
  2272. e.preventDefault();
  2273. // get the mouse cursor position at startup:
  2274. pos3 = e.clientX;
  2275. pos4 = e.clientY;
  2276. document.onmouseup = closeDragElement;
  2277. // call a function whenever the cursor moves:
  2278. document.onmousemove = elementDrag;
  2279. }
  2280.  
  2281. function elementDrag(e) {
  2282. e = e || window.event;
  2283. e.preventDefault();
  2284. // calculate the new cursor position:
  2285. pos1 = pos3 - e.clientX;
  2286. pos2 = pos4 - e.clientY;
  2287. pos3 = e.clientX;
  2288. pos4 = e.clientY;
  2289. // set the element's new position:
  2290. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  2291. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  2292. }
  2293.  
  2294. function closeDragElement() {
  2295. // stop moving when mouse button is released:
  2296. document.onmouseup = null;
  2297. document.onmousemove = null;
  2298. }
  2299. }
  2300.  
  2301. </script>
  2302.  
  2303. </body>
  2304. </html>
  2305.  
Advertisement
Add Comment
Please, Sign In to add comment