nicolas-sage

page 17: anemone

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