nicolas-sage

page 18: nylah

Apr 10th, 2026 (edited)
50
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.82 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!----
  11. _________
  12. / \
  13. | __ __ |
  14. | |__| |__| | NYLAH PAGE BY SAGE / PHANTOMCODES
  15. | | //phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20. - theme guide: //phantomcodes.tumblr.com/nylahguide
  21.  
  22. CREDITS:
  23. - phosphor icons / phosphoricons.com
  24. - tabler icons / //tabler-icons.io/
  25. - tippy.js tooltips / //atomiks.github.io/tippyjs/
  26. - bunny fonts / //fonts.bunny.net/
  27. - carousel tutorial by yeolithm / //yeolithm.com/carousel/tutorial
  28. - css popups by glenthemes / //github.com/glenthemes/css-popups
  29.  
  30. ---->
  31.  
  32. <!---- JQUERY ---->
  33. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  34.  
  35. <!----- BUNNY FONTS ---->
  36. <link rel="preconnect" href="//fonts.bunny.net">
  37. <link href="//fonts.bunny.net/css?family=Quicksand:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  38. <link href="//fonts.bunny.net/css?family=albert-sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
  39. <link href="//fonts.bunny.net/css?family=Archivo:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  40. <link href="//fonts.bunny.net/css?family=Poppins:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  41.  
  42. <!---- ICONS ---->
  43. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/regular/style.css"/>
  44. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/bold/style.css"/>
  45. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/fill/style.css"/>
  46. <script src="//pull.cappuccicons.com/cpf.js"></script>
  47.  
  48. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  49. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  50.  
  51. <!---- TOOLTIPS ---->
  52. <script src="//unpkg.com/popper.js@1"></script>
  53. <script src="//unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  54.  
  55. <!--- CSS POPUPS / GLENTHEMES --->
  56. <link href="//glenthemes.github.io/css-popups/core.min.css" rel="stylesheet">
  57.  
  58. <!--- day/night --->
  59. <script>
  60. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  61. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  62. </script>
  63.  
  64. <!------- CSS -------->
  65. <style>
  66.  
  67. /* theme options - common */
  68. :root {
  69. --Spacing:1rem;
  70.  
  71. /* EDIT HERE: FONTS & CORNERS */
  72. --Corners:10px;
  73. --BodyFont:'Albert Sans';
  74. --TitleFont:'Poppins';
  75. /* make sure to find & replace these fonts if you change them */
  76.  
  77. /* opacity settings */
  78. --ColorLessOpaqueBackground:rgb(from var(--ColorBackground) r g b / .85);
  79. --ColorOpaqueBackground:rgb(from var(--ColorBackground) r g b / .5);
  80. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .85);
  81. --ColorMoreOpaquePosts:rgb(from var(--ColorPosts) r g b / .5);
  82.  
  83. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  84. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  85. --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
  86. --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
  87.  
  88.  
  89. --ColorOpaqueTooltipBG:rgb(from var(--ColorTooltipBG) r g b / .75);
  90. }
  91.  
  92. /* theme options - day/night */
  93. :root, html[data-theme='light'] {
  94. --LightOn: flex;
  95. --LightOff: none;
  96.  
  97. /* EDIT HERE: DAY MODE COLORS */
  98. --ColorBackground:#e8e8e8;
  99. --ColorPosts:#fafafa;
  100. --ColorBorders:#dadada;
  101. --ColorTitle:#222;
  102. --ColorText:#555;
  103. --ColorAccentOne:#cd6a60;
  104. --ColorAccentTwo:#c75c8c;
  105. --ColorTooltip:#fff;
  106. --ColorTooltipBG:#333;
  107.  
  108. --ColorPopUpBG:#888;
  109. --ColorPreText:#222;
  110. --ColorPreTextBold:#000;
  111. --ColorPreBackground:#ccc;
  112. --ColorOpacity: rgba(255,255,255,.1);
  113. --ColorReverseOpacity: rgba(0,0,0,.1);
  114. }
  115. html[data-theme='dark'] {
  116. --LightOn: none;
  117. --LightOff: flex;
  118.  
  119. /* EDIT HERE: NIGHT MODE COLORS */
  120. --ColorBackground:#2a2a2a;
  121. --ColorPosts:#3a3a3a;
  122. --ColorBorders:#444;
  123. --ColorTitle:#eee;
  124. --ColorText:#ccc;
  125. --ColorAccentOne:#f3a59e;
  126. --ColorAccentTwo:#ea9abe;
  127. --ColorTooltip:#eee;
  128. --ColorTooltipBG:#111;
  129.  
  130. --ColorPopUpBG:#000;
  131. --ColorPreText:#ccc;
  132. --ColorPreTextBold:#eee;
  133. --ColorPreBackground:#111;
  134. --ColorOpacity: rgba(0,0,0,.1);
  135. --ColorReverseOpacity: rgba(255,255,255,.1);
  136. }
  137. html.theme-transition,
  138. html.theme-transition *,
  139. html.theme-transition *:before,
  140. html.theme-transition *:after {
  141. transition: 0s !important;
  142. transition-delay: 0 !important;
  143. }
  144.  
  145. .light-on{
  146. display: var(--LightOn);
  147. }
  148. .light-off{
  149. display: var(--LightOff);
  150. }
  151.  
  152. /* theme options - style popups */
  153. :root {
  154. --Popup-Fade-Speed:420ms;
  155. --Popup-Z-Index:99999999; /* required */
  156. --Popup-BG-Color:var(--ColorPopUpBG);
  157. --Popup-BG-Color-Transparency:65%;
  158. --Popup-BG-Blur:5px;
  159. --Popup-Width:500px; /* required */
  160. --Popup-Max-Height:calc(100vh - 6rem);
  161. --Popup-Padding:20px;
  162. --Popup-Contents-BG:var(--ColorPosts);
  163. }
  164.  
  165. /*--- TOOLTIPS ---*/
  166. .tippy-tooltip.custom-theme {
  167. font-size:.925em;
  168. font-weight:500;
  169. color:var(--ColorTooltip);
  170. text-transform:lowercase;
  171. text-align:center;
  172. background:var(--ColorTooltipBG);
  173. border-radius:var(--Corners);
  174. box-shadow:0 2px 2px rgba(0,0,0,.1);
  175. }
  176.  
  177. /*--- TEXT SELECTION ---*/
  178. ::-moz-selection { /* Code for Firefox */
  179. color:var(--ColorPosts);
  180. background:var(--ColorAccentOne);
  181. }
  182.  
  183. ::selection {
  184. color:var(--ColorPosts);
  185. background:var(--ColorAccentOne);
  186. }
  187.  
  188. * {box-sizing:border-box;}
  189.  
  190. body {
  191. font-family:var(--BodyFont), sans-serif;
  192. font-size:15px;
  193. color:var(--ColorText);
  194. line-height:140%;
  195. word-wrap:break-word;
  196. letter-spacing:.04em;
  197. margin:0;
  198. background-color:var(--ColorBackground);
  199. }
  200. body {
  201. opacity:1;
  202. transition:.75s opacity;
  203. }
  204.  
  205. body.fade-out {
  206. opacity:0;
  207. transition:none;
  208. }
  209. html {background-color:var(--ColorBackground);}
  210.  
  211. a {
  212. color:var(--ColorAccentOne);
  213. text-decoration:none;
  214. -webkit-transition: all 0.4s;
  215. -moz-transition: all 0.4s;
  216. -ms-transition: all 0.4s;
  217. -o-transition: all 0.4s;
  218. transition: all 0.4s;
  219. }
  220.  
  221. a:hover {
  222. color:var(--ColorAccentTwo);
  223. -webkit-transition: all 0.4s;
  224. -moz-transition: all 0.4s;
  225. -ms-transition: all 0.4s;
  226. -o-transition: all 0.4s;
  227. transition: all 0.4s;
  228. }
  229.  
  230. blockquote {
  231. margin-top:0;
  232. margin-left:1em;
  233. padding-left:.75em;
  234. border-left:1.5px solid var(--ColorBorders);
  235. }
  236. blockquote p {padding:0!important;}
  237.  
  238. ul {list-style-type:circle; margin-bottom:0; padding-right:.5rem;}
  239. ol {list-style-type:decimal-leading-zero;}
  240. li {list-style-type:circle;}
  241. li::marker {color:var(--ColorAccentOne)}
  242.  
  243. small {font-size:.95em;}
  244. big {font-size:1.1em;}
  245.  
  246. h1, h2, h3 {font-family:var(--TitleFont), sans-serif;}
  247.  
  248. button {font-size:1em;}
  249.  
  250. hr {
  251. height:1px;
  252. border:none;
  253. box-shadow:none;
  254. background:var(--ColorBorders);
  255. }
  256.  
  257. pre {
  258. font-size:.875em;
  259. color:var(--ColorPreText);
  260. line-height:160%;
  261. word-wrap:break-word!important;
  262. white-space:pre-wrap;
  263. padding:.5rem;
  264. background:var(--ColorPreBackground);
  265. border-radius:5px;
  266. }
  267. pre b {color:var(--ColorPreTextBold);}
  268. pre.small {display:inline-block; width:fit-content; margin:0; padding:.25rem; line-height:1em;}
  269.  
  270. b, strong {
  271. color:var(--ColorTitle);
  272. font-weight:800;
  273. }
  274.  
  275. b a:hover {
  276. color:var(--ColorAccentTwo);
  277. -webkit-transition: all 0.4s;
  278. -moz-transition: all 0.4s;
  279. -ms-transition: all 0.4s;
  280. -o-transition: all 0.4s;
  281. transition: all 0.4s;
  282. }
  283.  
  284. /* common link effects */
  285. .popup-inner.updates a, .about-text a {
  286. display:inline-block;
  287. position:relative;
  288. line-height:140%;
  289. text-decoration:1.5px underline var(--ColorBorders);
  290. text-underline-offset:3.5px;
  291. }
  292. .popup-inner.updates a:after, .about-text a:after {
  293. content: '';
  294. position:absolute;
  295. bottom:0;
  296. left:0;
  297. width:100%;
  298. height:1.5px;
  299. background:var(--ColorAccentTwo);
  300. transform:scaleX(0);
  301. transform-origin:right;
  302. transition: transform 0.3s ease-out;
  303. }
  304. .popup-inner.updates a:hover:after, .about-text a:hover:after {
  305. transform: scaleX(1);
  306. transform-origin:left;
  307. }
  308.  
  309. /*-- CREDIT: DO NOT TOUCH --*/
  310. a#credit {}
  311. a#credit:hover {}
  312. a#credit i {}
  313. a#credit:hover i {
  314. -webkit-animation-duration: 2s;
  315. animation-duration: 2s;
  316. -webkit-animation-fill-mode: both;
  317. animation-fill-mode: both;
  318. -webkit-animation-timing-function: ease-in-out;
  319. animation-timing-function: ease-in-out;
  320. animation-iteration-count:infinite;
  321. -webkit-animation-iteration-count:infinite;
  322. animation-name: bounce;
  323. -moz-animation-name: bounce;
  324. }
  325.  
  326. @keyframes bounce {
  327. 0% {
  328. -webkit-transform: translateY(0px);
  329. -ms-transform: translateY(0px);
  330. transform: translateY(0px)
  331. }
  332. 25% {
  333. -webkit-transform: translateY(-3px);
  334. -ms-transform: translateY(-3px);
  335. transform: translateY(-3px)
  336. }
  337. 50% {
  338. -webkit-transform: translateY(0px);
  339. -ms-transform: translateY(0px);
  340. transform: translateY(0px)
  341. }
  342. 75% {
  343. -webkit-transform: translateY(-3px);
  344. -ms-transform: translateY(-3px);
  345. transform: translateY(-3px)
  346. }
  347. 100% {
  348. -webkit-transform: translateY(0px);
  349. -ms-transform: translateY(0px);
  350. transform: translateY(0px)
  351. }
  352. }
  353.  
  354. /* TUMBLR CONTROLS */
  355. a#controlsbutton {
  356. display:flex;
  357. justify-content:center;
  358. aling-items:center;
  359. cursor:help;
  360. }
  361. body.controls-click a#controlsbutton i {color:var(--ColorAccentTwo);}
  362. a#controlsbutton i {}
  363. a#controlsbutton:hover i {
  364. -webkit-animation-duration: 1.5s;
  365. animation-duration: 1.5s;
  366. -webkit-animation-fill-mode: both;
  367. animation-fill-mode: both;
  368. -webkit-animation-timing-function: ease-in-out;
  369. animation-timing-function: ease-in-out;
  370. animation-iteration-count:1;
  371. -webkit-animation-iteration-count:1;
  372. animation-name:tumblrcontrols;
  373. -moz-animation-name:tumblrcontrols;
  374. }
  375.  
  376. @keyframes tumblrcontrols {
  377. 45% {
  378. -webkit-transform: rotate(180deg);
  379. -ms-transform: rotate(180deg);
  380. transform: rotate(180deg);
  381. }
  382. 55% {
  383. -webkit-transform: rotate(180deg);
  384. -ms-transform: rotate(180deg);
  385. transform: rotate(180deg);
  386. }
  387. 100% {
  388. -webkit-transform: rotate(360deg);
  389. -ms-transform: rotate(360deg);
  390. transform: rotate(360deg);
  391. }
  392. }
  393.  
  394. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  395. transform:scale(.65);
  396. margin-top:3rem;
  397. opacity:0;
  398. visibility:hidden;
  399. z-index:999999999!important;
  400. }
  401.  
  402. body.controls-click iframe.tmblr-iframe {
  403. opacity:1.0;
  404. visibility:visible;
  405. -webkit-transition: all 0.5s;
  406. -moz-transition: all 0.5s;
  407. -ms-transition: all 0.5s;
  408. -o-transition: all 0.5s;
  409. transition: all 0.5s;
  410. }
  411.  
  412. /* MAIN STYLING */
  413. main {
  414. width:100vw;
  415. height:100vh;
  416. display:flex;
  417. justify-content:center;
  418. align-items:center;
  419. }
  420.  
  421. #containerwrap {
  422. position:relative;
  423. width:calc(100% - 2rem);
  424. max-width:900px;
  425. max-height:calc(100vh - 1rem);
  426. }
  427.  
  428. #container {
  429. width:100%;
  430. height:100%;
  431. display:flex;
  432. flex-direction:column;
  433. justify-content:center;
  434. align-items:flex-start;
  435. background:var(--ColorMoreOpaquePosts);
  436. border-radius:var(--Corners);
  437. border:1px solid var(--ColorOpaquePosts);
  438. }
  439.  
  440. .carousel-header {
  441. width:100%;
  442. display:flex;
  443. justify-content:space-between;
  444. align-items:center;
  445. gap:1rem;
  446. padding:1rem;
  447. }
  448. a.profiletitle {
  449. display:flex;
  450. justify-content:flex-start;
  451. align-items:center;
  452. gap:.25rem;
  453. }
  454. a.profiletitle img {
  455. width:1.5rem;
  456. height:1.5rem;
  457. object-fit:cover;
  458. border-radius:100%;
  459. }
  460. a.profiletitle b {
  461. font-family:var(--TitleFont), sans-serif;
  462. font-size:1.1em;
  463. color:var(--ColorTitle);
  464. }
  465. a.profiletitle i {font-size:1.2em; color:var(--ColorAccentTwo);}
  466.  
  467. .profileicons {
  468. display:flex;
  469. justify-content:flex-end;
  470. align-items:center;
  471. gap:.25rem;
  472. }
  473. .profileicons a {
  474. width:2rem;
  475. height:2rem;
  476. display:flex;
  477. justify-content:center;
  478. align-items:center;
  479. border-radius:100%;
  480. }
  481. .profileicons a:hover {background:var(--ColorOpaqueAccentTwo);}
  482. .profileicons a i {
  483. font-size:1.3em;
  484. color:var(--ColorTitle);
  485. transition:all 0.4s ease-in-out;
  486. }
  487. .profileicons a:hover i {color:var(--ColorAccentTwo); text-shadow:0 1px var(--ColorOpaquePosts);}
  488.  
  489. /* DAY/NIGHT */
  490. button#theme-toggle {
  491. outline:none;
  492. border:none;
  493. padding:0;
  494. background:transparent;
  495. display:flex;
  496. justify-content:center;
  497. align-items:center;
  498. }
  499.  
  500. button#theme-toggle span {
  501. position:relative;
  502. width:2rem;
  503. height:2rem;
  504. justify-content:center;
  505. align-items:center;
  506. border-radius:100%;
  507. cursor:help;
  508. transition:all 0.4s ease-in-out;
  509. }
  510. button#theme-toggle:hover span {background:var(--ColorOpaqueAccentTwo);}
  511. button#theme-toggle i {
  512. font-size:1.3em;
  513. color:var(--ColorTitle);
  514. transition:all 0.4s ease-in-out;
  515. }
  516. button#theme-toggle:hover i {
  517. color:var(--ColorAccentTwo);
  518. text-shadow:0 1px var(--ColorOpaquePosts);
  519. -webkit-animation-duration: .75s;
  520. animation-duration: .75s;
  521. -webkit-animation-fill-mode: both;
  522. animation-fill-mode: both;
  523. -webkit-animation-timing-function: ease-in-out;
  524. animation-timing-function: ease-in-out;
  525. animation-iteration-count:1;
  526. -webkit-animation-iteration-count:1;
  527. animation-name:daynight;
  528. -moz-animation-name:daynight;
  529. }
  530.  
  531. @keyframes daynight {
  532. 50% {
  533. -webkit-transform: scaleX(-1);
  534. -ms-transform: scaleX(-1);
  535. transform: scaleX(-1);
  536. }
  537. }
  538.  
  539. /*-- CAROUSEL TOP / PROFILE --*/
  540. .carousel-top {
  541. position:relative;
  542. width:inherit;
  543. height:fit-content;
  544. overflow:auto;
  545. padding:0;
  546. display:flex;
  547. flex-direction:column;
  548. align-items:center;
  549. }
  550. .profile-info {
  551. width:100%;
  552. max-width:700px;
  553. display:flex;
  554. justify-content:center;
  555. align-items:center;
  556. gap:1rem;
  557. padding:0 1rem .75rem 1rem;
  558. }
  559. .profileimg {
  560. width:160px!important;
  561. height:160px!important;
  562. display:flex;
  563. justify-content:center;
  564. align-items:center;
  565. }
  566. .profileimg img {
  567. width:100%;
  568. height:100%;
  569. object-fit:cover;
  570. border-radius:100%;
  571. }
  572.  
  573. .profilewrap {
  574. width:100%;
  575. max-width:calc(100% - 160px - 1rem);
  576. display:flex;
  577. flex-direction:column;
  578. }
  579. .profilename {
  580. font-family:var(--TitleFont), sans-serif;
  581. display:flex;
  582. justify-content:flex-start;
  583. align-items:center;
  584. gap:.25rem;
  585. }
  586. .profilename img {
  587. width:100px!important;
  588. height:100px!important;
  589. display:none;
  590. justify-content:center;
  591. align-items:center;
  592. object-fit:cover;
  593. border-radius:100%;
  594. }
  595. .profilename-wrap {
  596. display:flex;
  597. flex-direction:column;
  598. gap:.25rem;
  599. }
  600. .profilename-wrap li {
  601. display:flex;
  602. justify-content:flex-start;
  603. align-items:center;
  604. gap:.25rem;
  605. }
  606. .profilename b {font-size:1.1em;}
  607. .profilename span {font-size:1em;}
  608. .profilestats {
  609. display:flex;
  610. justify-content:flex-start;
  611. align-items:center;
  612. gap:.75rem;
  613. }
  614. .profilestats li {
  615. display:flex;
  616. justify-content:flex-start;
  617. align-items:center;
  618. gap:.25rem;
  619. }
  620. .profilestats li i {font-size:1.15em; color:var(--ColorAccentOne);}
  621. .profilestats li span {font-family:var(--TitleFont), sans-serif; font-size:.925em; color:var(--ColorTitle);}
  622.  
  623. .profiletext-wrap {
  624. margin:.5rem 0 .5rem 0;
  625. display:flex;
  626. flex-direction:column;
  627. gap:.25rem;
  628. }
  629. .profiletext {}
  630. .profiletext h5 {
  631. font-size:1em;
  632. font-weight:500;
  633. color:var(--ColorTitle);
  634. margin:0;
  635. padding:0;
  636. }
  637. .profiletext p:first-of-type {margin-top:0;}
  638. .profiletext p:last-of-type {margin-bottom:0;}
  639. .profiletext i {color:var(--ColorAccentTwo);}
  640. .profiletext b {font-weight:normal;}
  641.  
  642. .profilelink a {
  643. width:fit-content;
  644. display:flex;
  645. justify-content:flex-start;
  646. align-items:center;
  647. gap:.15rem;
  648. }
  649. .profilelink i {font-size:1.2em;}
  650.  
  651. /* blogs tab button */
  652. label[for].blogs {width:fit-content; padding:0;}
  653. .followedby {
  654. position:relative;
  655. width:fit-content;
  656. display:flex;
  657. justify-content:flex-start;
  658. align-items:center;
  659. gap:.35rem;
  660. }
  661. .followedby-imgs {display:flex;}
  662. .followedby img {
  663. width:30px;
  664. height:30px;
  665. object-fit:cover;
  666. border-radius:100%;
  667. border:1px solid transparent;
  668. }
  669. .followedby img:nth-of-type(2), .followedby img:nth-of-type(3) {margin-left:-8px; border:1px solid var(--ColorPosts);}
  670. .followedby-txt {font-size:.95em; color:var(--ColorTitle);}
  671. .followedby-txt b {font-weight:600;}
  672.  
  673. /* blogs tab */
  674. dialog.blogs {
  675. width:calc(100% - 2rem);
  676. max-width:500px;
  677. }
  678. dialog .popup-inner.blogs {
  679. position:relative;
  680. padding:0;
  681. background:var(--ColorPosts);
  682. border-radius:var(--Corners);
  683. box-shadow:0px 8px 36px 0px rgba(0,0,0,20%);
  684. }
  685. .blogs-title {
  686. position:sticky;
  687. top:0;
  688. font-family:var(--TitleFont), sans-serif;
  689. font-size:1.1em;
  690. font-weight:bold;
  691. color:var(--ColorTitle);
  692. text-align:center;
  693. width:100%;
  694. padding:1rem;
  695. display:flex;
  696. justify-content:center;
  697. align-items:center;
  698. background:var(--ColorPosts);
  699. border-bottom:1px solid var(--ColorBackground);
  700. }
  701. .blogs-wrap {
  702. width:100%;
  703. max-height:100%;
  704. overflow-y:auto;
  705. padding:1rem;
  706. display:flex;
  707. flex-direction:column;
  708. gap:.75rem;
  709. }
  710.  
  711. .blog {
  712. width:100%;
  713. display:flex;
  714. justify-content:space-between;
  715. align-items:center;
  716. gap:.5rem;
  717. }
  718. .blog a.blog-link {
  719. width:fit-content;
  720. display:flex;
  721. justify-content:flex-start;
  722. align-items:center;
  723. gap:.5rem;
  724. }
  725. a.blog-link img {
  726. width:2.5rem;
  727. height:2.5rem;
  728. object-fit:cover;
  729. border-radius:100%;
  730. transition:all 0.4s ease;
  731. }
  732. a.blog-link:hover img {transform:rotate(10deg);}
  733. a.blog-link li {
  734. line-height:1rem;
  735. display:flex;
  736. flex-direction:column;
  737. gap:.2rem;
  738. }
  739. a.blog-link li b {transition:all 0.4s ease;}
  740. a.blog-link:hover li b {color:var(--ColorAccentOne);}
  741. a.blog-link li span {color:var(--ColorText); transition:all 0.4s ease;}
  742. a.blog-link:hover li span {color:var(--ColorTitle);}
  743.  
  744. a.blog-follow {
  745. font-size:.925em;
  746. font-weight:500;
  747. color:var(--ColorTitle);
  748. line-height:1rem;
  749. padding:.35rem .75rem .35rem .75rem;
  750. background:var(--ColorBackground);
  751. border-radius:30px;
  752. }
  753. a.blog-follow:hover {color:var(--ColorAccentTwo); text-shadow:0 1px var(--ColorPosts); background:var(--ColorOpaqueAccentTwo);}
  754.  
  755. /* profile nav */
  756. .profile-nav {
  757. width:100%;
  758. max-width:700px;
  759. display:flex;
  760. justify-content:center;
  761. align-items:center;
  762. gap:.25rem;
  763. padding:0 1rem .5rem 1rem;
  764. }
  765. .profile-nav li {width:100%; max-width:calc(100% - 2rem - .25rem); display:flex; justify-content:flex-start; align-items:center; gap:.25rem;}
  766. .profile-nav a {
  767. width:100%;
  768. height:2rem;
  769. display:flex;
  770. justify-content:center;
  771. align-items:center;
  772. padding:0 .5rem 0 .5rem;
  773. background:var(--ColorBackground);
  774. border-radius:30px;
  775. }
  776. .profile-nav a:hover {background:var(--ColorOpaqueAccentTwo);}
  777. .profile-nav b {font-weight:500; transition:all 0.4s ease-in-out;}
  778. .profile-nav a:hover b {color:var(--ColorAccentTwo); text-shadow:0 1px var(--ColorOpaquePosts);}
  779.  
  780. /* updates tab */
  781. label[for].updates {
  782. width:2rem!important;
  783. height:2rem;
  784. display:flex;
  785. justify-content:center;
  786. align-items:center;
  787. background:var(--ColorBackground);
  788. border-radius:100%;
  789. cursor:pointer;
  790. transition:all 0.4s ease-in-out;
  791. }
  792. label[for].updates:hover {background:var(--ColorOpaqueAccentTwo);}
  793. label[for].updates i {
  794. position:relative;
  795. font-size:1.3em;
  796. color:var(--ColorTitle);
  797. transition:all 0.4s ease-in-out;
  798. }
  799. label[for].updates i:after {
  800. content:'';
  801. position:absolute;
  802. top:3px;
  803. right:3px;
  804. width:.375rem;
  805. height:.375rem;
  806. backdrop-filter:blur(10px);
  807. background:var(--ColorAccentTwo);
  808. border-radius:100%;
  809. box-shadow:0 0 0 1px var(--ColorBackground);
  810. transition:all 0.4s ease;
  811. }
  812. label[for].updates:hover i:after {box-shadow:0 0 0 1px var(--ColorMoreOpaquePosts);}
  813. label[for].updates:hover i {
  814. color:var(--ColorAccentTwo);
  815. text-shadow:0 1px var(--ColorOpaquePosts);
  816. -webkit-animation-duration: 1s;
  817. animation-duration: 1s;
  818. -webkit-animation-fill-mode: both;
  819. animation-fill-mode: both;
  820. -webkit-animation-timing-function: ease-in-out;
  821. animation-timing-function: ease-in-out;
  822. animation-iteration-count:1;
  823. -webkit-animation-iteration-count:1;
  824. animation-name: wiggle;
  825. -moz-animation-name: wiggle;
  826. }
  827.  
  828. @keyframes wiggle {
  829. 0% {
  830. -webkit-transform: translateX(0px);
  831. -ms-transform: translateX(0px);
  832. transform: translateX(0px)
  833. }
  834. 15% {
  835. -webkit-transform: translateX(0px);
  836. -ms-transform: translateX(0px);
  837. transform: translateX(0px)
  838. }
  839. 30% {
  840. -webkit-transform: rotate(10deg);
  841. -ms-transform: translateX(10deg);
  842. transform: translateX(10deg)
  843. }
  844. 45% {
  845. -webkit-transform: rotate(-10deg);
  846. -ms-transform: rotate(-10deg);
  847. transform: rotate(-10deg)
  848. }
  849. 60% {
  850. -webkit-transform: rotate(10deg);
  851. -ms-transform: rotate(10deg);
  852. transform: rotate(10deg)
  853. }
  854. 75% {
  855. -webkit-transform: rotate(-10deg);
  856. -ms-transform: rotate(-10deg);
  857. transform: rotate(-10deg)
  858. }
  859. 85% {
  860. -webkit-transform: rotate(10deg);
  861. -ms-transform: rotate(10deg);
  862. transform: rotate(10deg)
  863. }
  864. 100% {
  865. -webkit-transform: translateX(0px);
  866. -ms-transform: translateX(0px);
  867. transform: translateX(0px)
  868. }
  869. }
  870.  
  871. dialog.updates {
  872. width:calc(100% - 2rem);
  873. max-width:350px;
  874. }
  875. dialog .popup-inner.updates {
  876. display:flex;
  877. flex-direction:column;
  878. gap:.75rem;
  879. padding:1rem;
  880. background:var(--ColorPosts);
  881. border-radius:var(--Corners);
  882. box-shadow:0px 8px 36px 0px rgba(0,0,0,20%);
  883. }
  884. .updatestitle {
  885. font-family:var(--TitleFont), sans-serif;
  886. font-weight:700;
  887. font-size:1.05em;
  888. text-decoration:underline 2px var(--ColorAccentTwo);
  889. }
  890. .popup-inner.updates li {
  891. width:100%;
  892. line-height:120%;
  893. display:flex;
  894. justify-content:flex-start;
  895. align-items:flex-start;
  896. gap:.35rem;
  897. }
  898. .popup-inner.updates li i {
  899. font-size:1.2em;
  900. color:var(--ColorAccentTwo);
  901. }
  902.  
  903. /*- CLOSE POPUPS -*/
  904. label[for="close-popups"]{}
  905.  
  906. /*--- CAROUSEL ---*/
  907. #carousel, #navigation {
  908. flex:initial;
  909. display:block;
  910. }
  911. #carousel {
  912. position:relative;
  913. width:100%;
  914. height:445px;
  915. overflow:hidden;
  916. }
  917. .p-wrapper {
  918. position:relative;
  919. width:100%;
  920. height:100%;
  921. transition:transform 0s ease-in-out;
  922. }
  923.  
  924. #button_a:checked ~ #carousel .p-wrapper {
  925. -webkit-transform: translateY(0);
  926. transform: translateY(0);
  927. }
  928.  
  929. #button_b:checked ~ #carousel .p-wrapper {
  930. -webkit-transform: translateY(-100%);
  931. transform: translateY(-100%);
  932. }
  933.  
  934. #button_c:checked ~ #carousel .p-wrapper {
  935. -webkit-transform: translateY(-200%);
  936. transform: translateY(-200%);
  937. }
  938.  
  939. #button_d:checked ~ #carousel .p-wrapper {
  940. -webkit-transform: translateY(-300%);
  941. transform: translateY(-300%);
  942. }
  943.  
  944. #button_e:checked ~ #carousel .p-wrapper {
  945. -webkit-transform: translateY(-400%);
  946. transform: translateY(-400%);
  947. }
  948.  
  949. /*- carousel nav -*/
  950. #navigation {
  951. position:relative;
  952. width:100%;
  953. display:flex;
  954. justify-content:center;
  955. align-items:center;
  956. border-bottom:1px solid var(--ColorBackground);
  957. }
  958.  
  959. [class^="label_"] {
  960. position:relative;
  961. display:block;
  962. margin:0;
  963. width:25%;
  964. display:flex;
  965. justify-content:center;
  966. align-items:center;
  967. padding:.5rem 1rem .5rem 1rem;
  968. cursor:pointer;
  969. transition:all 0.4s ease;
  970. }
  971. [class^="label_"]:after {
  972. content:'';
  973. position:absolute;
  974. bottom:0;
  975. width:30%;
  976. height:2px;
  977. display:none;
  978. background:var(--ColorAccentOne);
  979. }
  980.  
  981. [class^="label_"] i {
  982. font-size:1.3em;
  983. color:var(--ColorTitle);
  984. transition:all 0.4s ease;
  985. }
  986. [class^="label_"]:hover i {color:var(--ColorAccentOne);}
  987.  
  988. #button_a:checked ~ #navigation .label_a:after,
  989. #button_b:checked ~ #navigation .label_b:after,
  990. #button_c:checked ~ #navigation .label_c:after,
  991. #button_d:checked ~ #navigation .label_d:after,
  992. #button_e:checked ~ #navigation .label_e:after {
  993. display:block;
  994. cursor:default;
  995. }
  996. #button_a:checked ~ #navigation .label_a i,
  997. #button_b:checked ~ #navigation .label_b i,
  998. #button_c:checked ~ #navigation .label_c i,
  999. #button_d:checked ~ #navigation .label_d i,
  1000. #button_e:checked ~ #navigation .label_e i {
  1001. color:var(--ColorAccentOne);
  1002. }
  1003.  
  1004. /* CAROUSEL PANELS */
  1005. [class^="panel_"] {
  1006. position:relative;
  1007. width:inherit;
  1008. height:inherit;
  1009. overflow:auto;
  1010. padding:0;
  1011. }
  1012.  
  1013. /*-- ABOUT TEXT / PANEL A --*/
  1014. .panel_a {width:100%;}
  1015. .about-text {
  1016. width:100%;
  1017. overflow-y:auto;
  1018. padding:1rem;
  1019. }
  1020. .about-text img {float:left; max-width:150px; margin-right:.75em;}
  1021. .about-text img.right {float:right; margin-left:.75em; margin-right:0;}
  1022.  
  1023. /*--- EDIT HERE: TRANSPARENT IMAGES ---*/
  1024. .about-text img.shape {
  1025. shape-outside: url(//64.media.tumblr.com/8128e34d8ef3bad7889f86a022d7037d/8916492b683a9501-38/s1280x1920/ee1e6e11ea36d2948cb89a2ff83086a45956a8e5.pnj);
  1026. /* replace the url above with your image url */
  1027. shape-margin:.75em;
  1028. }
  1029.  
  1030. .about-text p:last-of-type {margin-bottom:0;}
  1031. .about-text blockquote {margin-top:.5rem; margin-bottom:.5rem;}
  1032. .about-text li {margin-bottom:0; margin-left:1.75rem;}
  1033. .about-text i {color:var(--ColorAccentTwo);}
  1034. .about-text strike {text-decoration:line-through var(--ColorLessOpaqueAccentOne);}
  1035. .about-text u {text-decoration:underline 1.5px var(--ColorLessOpaqueAccentOne);}
  1036. .about-text h1, .about-text h2, .about-text h3, {
  1037. font-family:var(--TitleFont), sans-serif;
  1038. font-weight:900;
  1039. color:var(--ColorTitle);
  1040. text-decoration:underline 2px var(--ColorAccentTwo);
  1041. }
  1042. .about-text h1 {font-size:1.3em;}
  1043. .about-text h2 {font-size:1.2em;}
  1044. .about-text h3 {font-size:1.1em; margin-bottom:.5rem;}
  1045. .about-text h1:first-of-type {padding-top:0; margin-top:0;}
  1046.  
  1047. .about-text h4 {
  1048. font-family:var(--TitleFont), sans-serif;
  1049. font-weight:900;
  1050. color:var(--ColorTitle);
  1051. margin-bottom:.5rem;
  1052. }
  1053.  
  1054. /*-- INFO / PANEL B --*/
  1055. .panel_b {width:100%;}
  1056. .infowrap {width:100%; padding:1rem; display:flex; flex-direction:column; gap:1rem;}
  1057. .infotitle {width:100%;}
  1058. .infotitle b {
  1059. font-family:var(--TitleFont), sans-serif;
  1060. font-size:1.05em;
  1061. font-weight:900;
  1062. color:var(--ColorTitle);
  1063. text-decoration:underline 2px var(--ColorAccentTwo);
  1064. }
  1065. .interests {
  1066. width:100%;
  1067. display:flex;
  1068. flex-wrap:wrap;
  1069. gap:.5rem;
  1070. }
  1071. .interest {
  1072. min-width:calc(50% - .25rem);
  1073. display:flex;
  1074. flex-direction:column;
  1075. }
  1076. .interest li {
  1077. width:100%;
  1078. display:flex;
  1079. justify-content:flex-start;
  1080. align-items:center;
  1081. gap:.25rem;
  1082. }
  1083. .interest li i {font-size:1.1em; color:var(--ColorAccentOne);}
  1084.  
  1085. .projects {
  1086. width:100%;
  1087. display:flex;
  1088. flex-wrap:wrap;
  1089. gap:1rem;
  1090. }
  1091. .project {
  1092. width:calc(50% - .5rem);
  1093. display:flex;
  1094. flex-direction:column;
  1095. gap:.25rem;
  1096. }
  1097. .projectline {
  1098. width:100%;
  1099. height:10px;
  1100. overflow:hidden;
  1101. display:flex;
  1102. justify-content:flex-start;
  1103. align-items:center;
  1104. background:var(--ColorBackground);
  1105. border-radius:30px;
  1106. border:1px solid var(--ColorBorders);
  1107. }
  1108. .projectprogress {
  1109. height:100%;
  1110. background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
  1111. }
  1112. .project li {
  1113. width:100%;
  1114. display:flex;
  1115. justify-content:space-between;
  1116. align-items:center;
  1117. gap:.5rem;
  1118. }
  1119. .project li span {font-size:.95em;}
  1120.  
  1121. /*--- EXPLORE / PANEL C ---*/
  1122. .panel_c {
  1123. width:100%;
  1124. display:flex;
  1125. flex-direction:column;
  1126. justify-content:flex-start;
  1127. align-items:center;
  1128. }
  1129. .searchbar {
  1130. width:calc(100% - 2rem);
  1131. display:flex;
  1132. justify-content:flex-start;
  1133. align-items:center;
  1134. gap:.35rem;
  1135. margin:1rem;
  1136. padding:.75rem;
  1137. background:var(--ColorPosts);
  1138. border-radius:30px;
  1139. }
  1140. .searchbar i {
  1141. font-size:1.2em;
  1142. color:var(--ColorTitle);
  1143. }
  1144. .search {width:100%;}
  1145. .search .query {
  1146. border:0;
  1147. outline:0;
  1148. width:100%;
  1149. font-family:var(--BodyFont), sans-serif;
  1150. font-size:1.05em;
  1151. color:var(--ColorTitle);
  1152. letter-spacing:.05em;
  1153. line-height:120%;
  1154. background:transparent;
  1155. }
  1156. ::-webkit-input-placeholder {color: inherit; opacity:.9;}
  1157. :-moz-placeholder {color: inherit; opacity:.9;}
  1158. ::-moz-placeholder {color: inherit; opacity:.9;}
  1159. :-ms-input-placeholder {color: inherit; opacity:.9;}
  1160.  
  1161. input:focus::-webkit-input-placeholder {color:inherit; opacity:.5;}
  1162. input:focus:-moz-placeholder {color:inherit; opacity:.5;}
  1163. input:focus::-moz-placeholder {color:inherit; opacity:.5;}
  1164. input:focus:-ms-input-placeholder {color:inherit; opacity:.5;}
  1165.  
  1166. .searchlinks {
  1167. width:100%;
  1168. overflow-y:auto;
  1169. padding:.25rem .5rem 1rem .5rem;
  1170. display:flex;
  1171. flex-wrap:wrap;
  1172. gap:0 .5rem;
  1173. }
  1174. .searchlinks h5 {
  1175. font-family:var(--TitleFont), sans-serif;
  1176. font-size:1.05em;
  1177. font-weight:900;
  1178. color:var(--ColorTitle);
  1179. text-decoration:underline 2px var(--ColorAccentTwo);
  1180. width:100%;
  1181. margin:0;
  1182. padding:1rem .5rem .25rem .5rem;
  1183. }
  1184. .searchlinks h5:first-of-type {padding-top:0;}
  1185.  
  1186. a.bloglink, a.searchlink {
  1187. min-width:calc(50% - .25rem);
  1188. display:flex;
  1189. justify-content:flex-start;
  1190. align-items:center;
  1191. gap:.65rem;
  1192. padding:.5rem;
  1193. }
  1194. a.bloglink:hover, a.searchlink:hover {background:var(--ColorOpaquePosts);}
  1195. a.bloglink img {
  1196. width:38px;
  1197. height:38px;
  1198. object-fit:cover;
  1199. border-radius:100%;
  1200. }
  1201. a.bloglink .searchname {display:flex; flex-direction:column;}
  1202. a.bloglink b {}
  1203. a.bloglink li {
  1204. line-height:1em;
  1205. display:flex;
  1206. justify-content:flex-start;
  1207. align-items:center;
  1208. gap:.25rem;
  1209. }
  1210. a.bloglink span {font-size:.95em; color:var(--ColorText);}
  1211. a.bloglink i {font-size:.5em; color:var(--ColorText);}
  1212.  
  1213. a.searchlink .searchicon {
  1214. width:38px;
  1215. height:38px;
  1216. display:flex;
  1217. justify-content:center;
  1218. align-items:center;
  1219. background:var(--ColorLessOpaqueBackground);
  1220. border-radius:100%;
  1221. }
  1222. a.searchlink .searchicon i {
  1223. font-size:1.2em;
  1224. color:var(--ColorTitle);
  1225. }
  1226. a.searchlink .searchname span {color:var(--ColorTitle);}
  1227.  
  1228. /*-- MESSAGES / PANEL D --*/
  1229. .panel_d {
  1230. width:100%;
  1231. display:flex;
  1232. }
  1233.  
  1234. /* message left */
  1235. .message-left {
  1236. width:40%;
  1237. overflow-y:auto;
  1238. display:flex;
  1239. flex-direction:column;
  1240. }
  1241.  
  1242. .messagetitle {
  1243. width:100%;
  1244. display:flex;
  1245. justify-content:space-between;
  1246. align-items:center;
  1247. gap:1rem;
  1248. padding:.75rem .75rem .5rem .75rem;
  1249. cursor:default;
  1250. }
  1251. .messagetitle b {
  1252. font-family:var(--TitleFont), sans-serif;
  1253. font-size:1.1em;
  1254. }
  1255. .messagetitle i {
  1256. font-size:1.3em;
  1257. color:var(--ColorTitle);
  1258. }
  1259.  
  1260. .messagers {
  1261. width:100%;
  1262. overflow-y:auto;
  1263. display:flex;
  1264. flex-direction:column;
  1265. }
  1266. .messager {
  1267. width:100%;
  1268. display:flex;
  1269. align-items:center;
  1270. gap:.5rem;
  1271. padding:.75rem;
  1272. cursor:default;
  1273. }
  1274. .messager.selected {background:var(--ColorBackground);}
  1275. .messager img {
  1276. width:55px;
  1277. height:55px;
  1278. object-fit:cover;
  1279. border-radius:100%;
  1280. }
  1281. .messagerimgwrap {
  1282. position:relative;
  1283. width:55px;
  1284. height:55px;
  1285. }
  1286. .messagerimgwrap img {
  1287. width:35px;
  1288. height:35px;
  1289. object-fit:cover;
  1290. border-radius:100%;
  1291. }
  1292. .messagerimgwrap img:first-of-type {
  1293. position:absolute;
  1294. top:0;
  1295. left:0;
  1296. }
  1297. .messagerimgwrap img:last-of-type {
  1298. position:absolute;
  1299. bottom:0;
  1300. right:0;
  1301. }
  1302.  
  1303. .messagername {
  1304. width:calc(100% - 45px - .5rem);
  1305. display:flex;
  1306. flex-direction:column;
  1307. }
  1308. .messagername b {font-weight:700;}
  1309. .messagername span {font-size:.85em;}
  1310. .messagername span:first-of-type {
  1311. width:100%;
  1312. line-height:1rem;
  1313. display: -webkit-box;
  1314. -webkit-line-clamp: 2;
  1315. -webkit-box-orient: vertical;
  1316. overflow: hidden;
  1317. }
  1318.  
  1319. /* message right */
  1320. .message-right {
  1321. width:60%;
  1322. overflow-y:auto;
  1323. display:flex;
  1324. flex-direction:column;
  1325. border-left:1px solid var(--ColorBackground);
  1326. }
  1327. .message-top {
  1328. width:100%;
  1329. display:flex;
  1330. justify-content:space-between;
  1331. align-items:center;
  1332. gap:1rem;
  1333. padding:.75rem;
  1334. background:var(--ColorMoreOpaquePosts);
  1335. border-bottom:1px solid var(--ColorBackground);
  1336. }
  1337. .message-topname {
  1338. display:flex;
  1339. align-items:center;
  1340. gap:.5rem;
  1341. }
  1342. .message-topname img {
  1343. width:50px;
  1344. height:50px;
  1345. object-fit:cover;
  1346. border-radius:100%;
  1347. }
  1348. .message-topname li {
  1349. display:flex;
  1350. flex-direction:column;
  1351. }
  1352. .message-topname li b {font-family:var(--TitleFont), sans-serif;}
  1353. .message-topname li span {font-size:.9em;}
  1354. .message-topicons {
  1355. display:flex;
  1356. justify-content:flex-end;
  1357. align-items:center;
  1358. gap:.5rem;
  1359. }
  1360. .message-topicons i {
  1361. font-size:1.3em;
  1362. color:var(--ColorTitle);
  1363. }
  1364.  
  1365. .messages {
  1366. width:100%;
  1367. overflow-y:auto;
  1368. display:flex;
  1369. flex-direction:column;
  1370. gap:1rem;
  1371. padding:1rem;
  1372. }
  1373. .messagedate {
  1374. width:100%;
  1375. }
  1376. .messagedate b {
  1377. font-size:.85em;
  1378. font-weight:normal;
  1379. color:var(--ColorText);
  1380. text-transform:uppercase;
  1381. text-align:center;
  1382. display:block;
  1383. }
  1384. .messagedate span {font-size:.85em; text-align:center; display:block;}
  1385.  
  1386. .messagewrap {
  1387. width:100%;
  1388. display:flex;
  1389. align-items:flex-end;
  1390. gap:.5rem;
  1391. }
  1392. .messagewrap img.msgicon {
  1393. width:32px;
  1394. height:32px;
  1395. object-fit:cover;
  1396. border-radius:100%;
  1397. }
  1398. .messagetext {
  1399. max-width:calc(100% - 32px - .5rem);
  1400. display:flex;
  1401. flex-direction:column;
  1402. gap:2px;
  1403. }
  1404. .messagetext li {
  1405. list-style-type:none;
  1406. width:fit-content;
  1407. padding:.35rem .65rem .35rem .65rem;
  1408. }
  1409. .messagewrap.left .messagetext li {background:var(--ColorPosts); border-radius:3px 20px 20px 3px;}
  1410. .messagewrap.left .messagetext li:first-of-type {border-radius:20px 20px 20px 3px;}
  1411. .messagewrap.left .messagetext li:last-of-type {border-radius:3px 20px 20px 20px;}
  1412.  
  1413. .messagewrap.right {justify-content:flex-end;}
  1414. .messagewrap.right .messagetext {align-items:flex-end;}
  1415. .messagewrap.right .messagetext li {color:var(--ColorPosts); background:var(--ColorAccentOne); border-radius:20px 3px 3px 20px;}
  1416. .messagewrap.right .messagetext li:first-of-type {border-radius:20px 20px 3px 20px;}
  1417. .messagewrap.right .messagetext li:last-of-type {border-radius:20px 3px 20px 20px;}
  1418.  
  1419. .messagewrap.left .messagetext li:only-of-type, .messagewrap.right .messagetext li:only-of-type {border-radius:20px;}
  1420.  
  1421. .message-low {
  1422. width:100%;
  1423. padding:.75rem;
  1424. background:var(--ColorMoreOpaquePosts);
  1425. }
  1426. .message-low a {
  1427. width:100%;
  1428. display:flex;
  1429. justify-content:space-between;
  1430. align-items:center;
  1431. gap:1rem;
  1432. padding:.5rem .65rem .5rem .65rem;
  1433. background:transparent;
  1434. border-radius:30px;
  1435. border:1px solid var(--ColorBorders);
  1436. }
  1437. .message-low a:hover {background:var(--ColorBackground); border:1px solid var(--ColorBackground);}
  1438. .message-low a li {
  1439. display:flex;
  1440. justify-content:flex-start;
  1441. align-items:center;
  1442. gap:.5rem;
  1443. }
  1444. .message-low a i {
  1445. font-size:1.3em;
  1446. color:var(--ColorTitle);
  1447. }
  1448. .message-low a span {color:var(--ColorText);}
  1449.  
  1450. /*-- TIMELINE / PANEL E --*/
  1451. .panel_e {width:100%;}
  1452. .timeline {
  1453. width:100%;
  1454. display:flex;
  1455. gap:1rem;
  1456. padding:1rem;
  1457. }
  1458.  
  1459. .timedates {
  1460. display:flex;
  1461. flex-direction:column;
  1462. gap:4.5rem;
  1463. }
  1464. .timedate {
  1465. width:100px;
  1466. text-align:center;
  1467. padding:.25rem .5rem .25rem .5rem;
  1468. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1469. border-radius:30px;
  1470. }
  1471. .timedate b {
  1472. font-size:.85em;
  1473. color:var(--ColorPosts);
  1474. text-transform:uppercase;
  1475. text-align:center;
  1476. white-space:nowrap;
  1477. }
  1478.  
  1479. .timedots {
  1480. position:relative;
  1481. display:flex;
  1482. flex-direction:column;
  1483. align-items:center;
  1484. gap:5.4rem;
  1485. }
  1486. .timedotwrap {
  1487. position:relative;
  1488. padding-top:.5rem;
  1489. display:flex;
  1490. flex-direction:column;
  1491. align-items:center;
  1492. gap:5.4rem;
  1493. }
  1494. .timedot {
  1495. width:15px;
  1496. height:15px;
  1497. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1498. border-radius:100%;
  1499. border:2px solid var(--ColorBorders);
  1500. }
  1501. .time-line {
  1502. position:absolute;
  1503. top:.5rem;
  1504. width:2px;
  1505. height:calc(100% - .5rem);
  1506. background:var(--ColorBorders);
  1507. z-index:-1;
  1508. }
  1509.  
  1510. .timewrap {
  1511. display:flex;
  1512. flex-direction:column;
  1513. gap:1rem;
  1514. }
  1515. .time {
  1516. display:flex;
  1517. flex-direction:column;
  1518. gap:.25rem;
  1519. }
  1520. .timetitle {
  1521. padding-top:.25rem;
  1522. display:flex;
  1523. justify-content:flex-start;
  1524. align-items:center;
  1525. gap:.5rem;
  1526. }
  1527. .timetitle b {
  1528. font-family:var(--TitleFont), sans-serif;
  1529. font-size:1em;
  1530. text-decoration:underline 2px var(--ColorAccentTwo);
  1531. }
  1532. .timetitle span {font-size:.8em; text-transform:uppercase;}
  1533. .timetext {
  1534. padding:.5rem;
  1535. line-height:1.25rem;
  1536. display: -webkit-box;
  1537. -webkit-line-clamp: 2;
  1538. -webkit-box-orient: vertical;
  1539. overflow: hidden;
  1540. background:var(--ColorPosts);
  1541. border-radius:var(--Corners);
  1542. }
  1543.  
  1544. /*---- RESPONSIVENESS ---*/
  1545. @media only screen and (max-width: 600px) {
  1546. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
  1547.  
  1548. .carousel-header {padding:.5rem;}
  1549. #containerwrap {width:100%; max-width:100vw; height:100%; max-height:100vh; margin:0; padding:0;}
  1550. #container {margin:0; padding:0; border-radius:0; border:none;}
  1551.  
  1552. .profilewrap {max-width:100%;}
  1553. .profileimg {display:none;}
  1554. .profilename {gap:.5rem;}
  1555. .profilename img {display:flex;}
  1556.  
  1557. .project {min-width:100%;}
  1558.  
  1559. .message-left {width:calc(55px + 1.5rem);}
  1560. .messagetitle, .messagername {display:none;}
  1561. .message {padding:.5rem;}
  1562.  
  1563. /* message right */
  1564. .message-right {width:calc(100% - 55px - 1.5rem);}
  1565. }
  1566.  
  1567. @media only screen and (max-width: 500px) {
  1568. .interest {min-width:100%;}
  1569. }
  1570.  
  1571. {CustomCSS}
  1572.  
  1573. </style>
  1574. </head>
  1575.  
  1576. <!----- HTML ----->
  1577. <body>
  1578.  
  1579. <!---- CLOSE ALL POPUPS ---->
  1580. <label for="close-popups">
  1581. <input id="close-popups" type="radio" name="p">
  1582. </label>
  1583.  
  1584. <!--- POPUPS --->
  1585.  
  1586. <!-- blogs tab --->
  1587. <dialog class="blogs"><input id="blogs" type="radio" name="p">
  1588. <div class="popup-inner blogs">
  1589. <div class="blogs-title">blogs</div>
  1590. <div class="blogs-wrap">
  1591. <!--====================== EDIT HERE: BLOGS POPUP ==========================
  1592.  
  1593. FORMAT:
  1594.  
  1595. <div class="blog">
  1596. <a class="blog-link" href="//BLOGNAME.tumblr.com"><img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar">
  1597. <li><b>BLOGNAME</b><span>BLOG SUBTITLE</span></li></a>
  1598. <a target="_blank" class="blog-follow" href="//tumblr.com/follow/BLOGNAME">follow</a>
  1599. </div>
  1600.  
  1601. - CAPITALIZED text is what you change
  1602. - add as many as you like, this popup will scroll
  1603.  
  1604. ========================= ALL BLOGS BELOW THIS LINE =====================-->
  1605.  
  1606. <div class="blog">
  1607. <a class="blog-link" href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
  1608. <li><b>phantomcodes</b><span>coding blog</span></li></a>
  1609. <a target="_blank" class="blog-follow" href="//tumblr.com/follow/phantomcodes">follow</a>
  1610. </div>
  1611.  
  1612. <!--==================== ALL BLOGS ABOVE THIS LINE ======================-->
  1613. </div><!-- // .blogs-wrap -->
  1614. </div><!-- // .popup-inner -->
  1615. </dialog>
  1616.  
  1617. <!--- updates tab --->
  1618. <dialog class="updates"><input id="upda" type="radio" name="p">
  1619. <div class="popup-inner updates">
  1620. <div class="updatestitle"><b>updates</b></div>
  1621. <!--====================== EDIT HERE: UPDATES TAB ==========================
  1622.  
  1623. FORMAT:
  1624.  
  1625. <li><i class="ti ti-ICON-NAME"></i><span>UPDATE TEXT</span></li>
  1626.  
  1627. - CAPITALIZED text is what you change
  1628. - add as many as you like, this popup will scroll
  1629.  
  1630. ======================== ALL UPDATES BELOW THIS LINE ====================-->
  1631. <li><i class="ti ti-bell"></i><span>this is an update</span></li>
  1632. <li><i class="ti ti-bell"></i><span>this is an <b>update</b> with <a href="/">a link</a></span></li>
  1633.  
  1634. <!--==================== ALL UPDATES ABOVE THIS LINE ====================-->
  1635. </div></div>
  1636. </dialog>
  1637.  
  1638. <main> <!-- main container -->
  1639.  
  1640. <!--- CONTAINER --->
  1641. <div id="containerwrap"><div id="container">
  1642. <div class="carousel-header"><!-- carousel header -->
  1643. <a class="profiletitle" href="/"><img src="{PortraitURL-128}"><b>{Name}</b><i class="ph-fill ph-seal-check"></i></a>
  1644. <div class="profileicons">
  1645. <!-- CREDIT: DO NOT TOUCH -->
  1646. <a id="credit" title="page by sage" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  1647. <!-- day/night -->
  1648. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1649. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1650. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1651. </button>
  1652. <!-- tumblr controls -->
  1653. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1654. </div>
  1655. </div><!-- // .carousel-header -->
  1656. <div class="carousel-top">
  1657. <div class="profile-info">
  1658. <!--====================== EDIT HERE: PROFILE INFO =========================
  1659.  
  1660. PROFILEIMG
  1661. - replace the image url with your own
  1662. - replace both the profileimg image url and the image url under profilename
  1663.  
  1664. PROFILENAME
  1665. - replace with your name/pronouns
  1666.  
  1667. PROFILESTATS FORMAT:
  1668.  
  1669. <li><i class="ti ti-ICON-NAME"></i><span>STAT TEXT</span></li>
  1670.  
  1671. - CAPITALIZED text is what you change
  1672. - there are only three of these but you could add more if you want, but i don't recommend having more than 4 depending on how long they are
  1673.  
  1674. PROFILETEXT-WRAP
  1675. - use <h5></h5> for the title
  1676. - i recommend keeping the text to just one line
  1677. - replace the profilelink url & name, make sure the link stays within "" and the link name stays within <span></span>
  1678.  
  1679. =========================================================================-->
  1680. <div class="profileimg"><img src="//imgur.com/skvES3z.png"></div>
  1681. <div class="profilewrap">
  1682. <div class="profilename">
  1683. <img src="//imgur.com/skvES3z.png">
  1684. <div class="profilename-wrap">
  1685. <li><b>name</b><span>pronouns</span></li>
  1686. <div class="profilestats">
  1687. <li><i class="ti ti-cake"></i><span>stat</span></li>
  1688. <li><i class="ti ti-flower"></i><span>stat</span></li>
  1689. <li><i class="ti ti-map-pin"></i><span>stat</span></li>
  1690. </div><!-- // .profilestats -->
  1691. </div><!-- // .profilename-wrap -->
  1692. </div><!-- // .profilename -->
  1693. <div class="profiletext-wrap">
  1694. <div class="profiletext">
  1695. <h5>title</h5>
  1696. some text can go here, i recommend keeping this <b>short</b> <i class="ti ti-sparkles"></i>
  1697. </div>
  1698. <div class="profilelink"><a target="_blank" href="/nylahguide"><i class="ti ti-link"></i><span>phantomcodes.tumblr.com/nylahguide</span></a></div>
  1699. </div>
  1700. <label for="blogs" class="blogs" title="show blogs">
  1701. <div class="followedby">
  1702. <div class="followedby-imgs">
  1703. <!--================== EDIT HERE: FOLLOWED BY IMAGES =======================
  1704.  
  1705. FOLLOWEDBY-IMGS FORMAT:
  1706.  
  1707. <img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar">
  1708.  
  1709. - this is only designed to have three images
  1710. - CAPITALIZED text is what you change
  1711.  
  1712. FOLLOWEDBY-TXT
  1713. - replace the blog names to match the ones used in the images
  1714. - make sure the blog names are wrapped in <b></b>
  1715.  
  1716. ======================= ALL IMAGES BELOW THIS LINE ======================-->
  1717.  
  1718. <img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
  1719. <img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar">
  1720. <img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar">
  1721.  
  1722. <!--==================== ALL IMAGES ABOVE THIS LINE =====================-->
  1723. </div>
  1724. <div class="followedby-txt">
  1725. <!--=========== EDIT HERE: FOLLOWED BY TEXT BELOW THIS LINE =============-->
  1726.  
  1727. followed by <b>phantomcodes</b>, <b>blogname</b> + more
  1728.  
  1729. <!--================= FOLLOWED BY TEXT ABOVE THIS LINE ==================-->
  1730. </div><!-- // .followedby-txt -->
  1731. </div></label><!-- // .followedby / blogs label -->
  1732. </div><!-- // .profilewrap -->
  1733. </div><!-- // .profile-info -->
  1734. <div class="profile-nav"><!-- profile nav -->
  1735. <li><a target="_blank" href="//tumblr.com/follow/{Name}"><b>follow</b></a>
  1736. <a target="_blank" href="/ask"><b>ask</b></a></li>
  1737. <label for="upda" class="updates" title="updates"><i class="ti ti-bell"></i></label>
  1738. </div><!-- // .profile-nav -->
  1739. </div><!-- // .carousel-top -->
  1740.  
  1741. <!--- CAROUSEL --->
  1742. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  1743. <input hidden type="radio" name="carousel-control" id="button_b"/>
  1744. <input hidden type="radio" name="carousel-control" id="button_c"/>
  1745. <input hidden type="radio" name="carousel-control" id="button_d"/>
  1746.  
  1747. <div id="navigation"><!-- CAROUSEL NAV -->
  1748. <label for="button_a" class="label_a" title="about"><i class="ti ti-layout-grid"></i></label>
  1749. <label for="button_b" class="label_b" title="info"><i class="ti ti-user-square"></i></label>
  1750. <label for="button_c" class="label_c" title="explore"><i class="ti ti-search"></i></label>
  1751. <label for="button_d" class="label_d" title="faq"><i class="ti ti-send"></i></label>
  1752. </div><!-- // #navigation -->
  1753.  
  1754. <div id="carousel"><!--- CAROUSEL PANELS --->
  1755. <div class="p-wrapper">
  1756.  
  1757. <section class="panel_a"><!-- about text / panel a -->
  1758. <div class="about-text">
  1759. <!--======== EDIT HERE: ABOUT TEXT / ALL TEXT BELOW THIS LINE ===========-->
  1760.  
  1761. <h1>biggest header</h1>
  1762. <img src="//i.imgur.com/89lwXDo.png">
  1763. Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Suspendisse vel justo vitae odio varius pulvinar. Nulla at eros in leo <a href="/">porttitor efficitur</a>. Maecenas congue commodo dui vel placerat. Ut finibus condimentum eleifend. <i>Ut pretium pulvinar erat a congue</i>. Nam hendrerit a est vel <b><a href="/">rhoncus</a></b>.
  1764. <p>Suspendisse nulla sapien, mollis a tincidunt ut, condimentum et tortor. Aliquam hendrerit condimentum dapibus. Sed faucibus sapien diam, ultricies sagittis neque scelerisque at. Curabitur ut eros quis libero auctor gravida sed a nunc. Aenean feugiat ultricies ante quis vestibulum. Morbi in elit quis arcu egestas mollis vitae sit amet eros. Integer laoreet tristique gravida. Maecenas nec ultrices tortor.</p>
  1765.  
  1766. <h2>big header</h2>
  1767. Sed sit amet vestibulum eros. Donec ac est eget ante mattis pulvinar sed vitae dui. Etiam mi eros, vulputate ut massa ut, suscipit dignissim eros.
  1768. <li>Phasellus velit mauris</li>
  1769. <li>pretium vitae nibh non</li>
  1770. <li>fringilla pretium massa</li>
  1771.  
  1772. <h3>small header</h3>
  1773. Quisque sit amet blandit enim. Cras tempus felis ac nibh maximus sollicitudin. Suspendisse vestibulum tortor nec pharetra tempor. Donec luctus porta nunc, ut congue enim varius quis.
  1774.  
  1775. <h4>smallest header</h4>
  1776. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  1777. <blockquote>Fusce fermentum at massa a maximus.</blockquote>
  1778. Sed egestas a nisi et malesuada. Morbi convallis a quam quis dictum. Suspendisse aliquet dolor neque, at pellentesque est ultrices sed. Proin convallis ornare nisl sed molestie. Quisque sed urna nec neque maximus finibus quis ut arcu. Aliquam interdum rhoncus sollicitudin.
  1779.  
  1780. <!--===================== ALL TEXT ABOVE THIS LINE ======================-->
  1781. </div>
  1782. </section>
  1783.  
  1784. <section class="panel_b"><!-- info / panel b -->
  1785. <div class="infowrap">
  1786. <!--====================== EDIT HERE: INTERESTS ==========================
  1787.  
  1788. INTERESTS FORMAT:
  1789.  
  1790. <div class="interests"><div class="infotitle"><b>INTEREST TITLE</b></div>
  1791.  
  1792. <div class="interest">
  1793. <li><i class="ti ti-ICON-NAME"></i><b>INTEREST SUBTITLE</b></li>
  1794. <span>INTEREST TEXT</span>
  1795. </div>
  1796.  
  1797. </div>
  1798.  
  1799. - CAPITALIZED text is what you change
  1800. - add as many interest sections as you like, the panel will scroll
  1801. - add as many interests to each section as you like
  1802.  
  1803. ====================== ALL INTERESTS BELOW THIS LINE ====================-->
  1804.  
  1805. <div class="interests"><div class="infotitle"><b>likes</b></div>
  1806.  
  1807. <div class="interest">
  1808. <li><i class="ti ti-heart"></i><b>fav name</b></li>
  1809. <span>fav subtitle</span>
  1810. </div>
  1811.  
  1812. </div><!-- // .interests -->
  1813.  
  1814. <div class="interests"><div class="infotitle"><b>dislikes</b></div>
  1815.  
  1816. <div class="interest">
  1817. <li><i class="ti ti-thumb-down"></i><b>dislike name</b></li>
  1818. <span>dislike subtitle</span>
  1819. </div>
  1820.  
  1821. </div><!-- // .interests -->
  1822.  
  1823. <!--================== ALL INTERESTS ABOVE THIS LINE ====================-->
  1824.  
  1825. <div class="projects"><div class="infotitle"><b>projects</b></div>
  1826. <!--====================== EDIT HERE: PROJECTS =============================
  1827.  
  1828. PROJECTS FORMAT:
  1829.  
  1830. <div class="project">
  1831. <div class="projectline"><div style="width:PERCENT%" class="projectprogress"></div></div>
  1832. <li><b>PROJECT NAME</b><span>PERCENT%</span></li>
  1833. </div>
  1834.  
  1835. - CAPITALIZED text is what you change
  1836. - add as many projects as you like
  1837.  
  1838. ======================= ALL PROJECTS BELOW THIS LINE ====================-->
  1839.  
  1840. <div class="project">
  1841. <div class="projectline"><div style="width:25%" class="projectprogress"></div></div>
  1842. <li><b>project name</b><span>25%</span></li>
  1843. </div>
  1844.  
  1845. <div class="project">
  1846. <div class="projectline"><div style="width:75%" class="projectprogress"></div></div>
  1847. <li><b>project name</b><span>75%</span></li>
  1848. </div>
  1849.  
  1850. <!--=================== ALL PROJECTS ABOVE THIS LINE ====================-->
  1851. </div>
  1852.  
  1853. </div><!-- // .infowrap -->
  1854. </section>
  1855.  
  1856. <section class="panel_c"><!-- explore / panel c -->
  1857. <div class="searchbar"><!-- search bar -->
  1858. <i class="ti ti-search"></i>
  1859. <form class="search" action="javascript:return false">
  1860. <input type="text" class="query" placeholder="search...">
  1861. </form>
  1862. </div>
  1863. <div class="searchlinks">
  1864. <!--======================== EDIT HERE: SEARCH =============================
  1865.  
  1866. - use <h5></h5> for headers to start a new section!
  1867.  
  1868. LINKS FORMAT:
  1869.  
  1870. <a class="searchlink" target="_blank" href="/LINKURL"><div class="searchicon"><i class="ti ti-ICON-NAME"></i></div>
  1871. <div class="searchname"><span>LINK TEXT</span></div>
  1872. </a>
  1873.  
  1874. BLOGS FORMAT:
  1875.  
  1876. <a class="bloglink" target="_blank" href="//BLOGNAME.tumblr.com"><img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar">
  1877. <div class="searchname"><b>BLOGNAME</b>
  1878. <li><span>BLOGNAME</span><i class="ti ti-point-filled"></i><span>SUBTITLE</span></li></div></a>
  1879.  
  1880. - CAPITALIZED text is what you change
  1881. - add as many links as you like, this section will scroll
  1882.  
  1883. ======================== ALL LINKS BELOW THIS LINE ======================-->
  1884. <h5>links</h5><!-- link section -->
  1885. <a class="searchlink" target="_blank" href="/"><div class="searchicon"><i class="ti ti-search"></i></div>
  1886. <div class="searchname"><span>search link</span></div>
  1887. </a>
  1888.  
  1889. <a class="searchlink" target="_blank" href="/"><div class="searchicon"><i class="ti ti-search"></i></div>
  1890. <div class="searchname"><span>search link</span></div>
  1891. </a>
  1892.  
  1893. <h5>tags</h5><!-- link section -->
  1894. <a class="searchlink" target="_blank" href="/tagged/tag"><div class="searchicon"><i class="ti ti-hash"></i></div>
  1895. <div class="searchname"><span>search tag</span></div>
  1896. </a>
  1897.  
  1898. <a class="searchlink" target="_blank" href="/tagged/tag"><div class="searchicon"><i class="ti ti-hash"></i></div>
  1899. <div class="searchname"><span>search tag</span></div>
  1900. </a>
  1901.  
  1902. <h5>blogs</h5><!-- link section -->
  1903. <a class="bloglink" target="_blank" href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
  1904. <div class="searchname"><b>phantomcodes</b>
  1905. <li><span>phantomcodes</span><i class="ti ti-point-filled"></i><span>themes & resources</span></li></div></a>
  1906.  
  1907. <a class="bloglink" target="_blank" href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
  1908. <div class="searchname"><b>phantomcodes</b>
  1909. <li><span>phantomcodes</span><i class="ti ti-point-filled"></i><span>themes & resources</span></li></div></a>
  1910.  
  1911. <!--==================== ALL LINKS ABOVE THIS LINE ======================-->
  1912. </div>
  1913. </section>
  1914.  
  1915. <section class="panel_d"><!-- messages / panel d -->
  1916.  
  1917. <div class="message-left">
  1918. <div class="messagetitle"><b>messages</b><i class="ti ti-edit"></i></div>
  1919. <div class="messagers">
  1920. <!--=================== EDIT HERE: MESSAGE PREVIEWS ========================
  1921.  
  1922. SINGLE MESSAGE PREVIEW FORMAT:
  1923.  
  1924. <div class="messager">
  1925. <img src="IMGURL">
  1926. <div class="messagername"><b>MESSAGER NAME</b>
  1927. <span>MESSAGE TEXT</span></div>
  1928. </div>
  1929.  
  1930. DOUBLE MESSAGE PREVIEW FORMAT:
  1931.  
  1932. <div class="messager">
  1933. <div class="messagerimgwrap"><img src="FIRSTIMGURL"><img src="SECONDIMGURL"></div>
  1934. <div class="messagername"><b>GROUP NAME</b>
  1935. <span>MESSAGE TEXT</span></div>
  1936. </div>
  1937.  
  1938. SELECTED MESSAGE PREVIEW FORMAT:
  1939.  
  1940. <div class="messager selected">
  1941. <img src="IMGURL">
  1942. <div class="messagername"><b>MESSAGER NAME</b>
  1943. <span>MESSAGE TEXT</span></div>
  1944. </div>
  1945.  
  1946. - add 'selected' after the messager class
  1947. - CAPITALIZED text is what you change
  1948.  
  1949. =================== ALL MESSAGE PREVIEWS BELOW THIS LINE ================-->
  1950. <div class="messager">
  1951. <img src="//i.imgur.com/SGIkVVX.png">
  1952. <div class="messagername"><b>name</b>
  1953. <span>some text can go here. you can have up to two lines before it cuts off</span></div>
  1954. </div><!-- // .messager -->
  1955.  
  1956. <div class="messager selected">
  1957. <img src="//i.imgur.com/muOVtU2.png">
  1958. <div class="messagername"><b>name</b>
  1959. <span>you: second answer text</span></div>
  1960. </div><!-- // .messager -->
  1961.  
  1962. <div class="messager">
  1963. <div class="messagerimgwrap"><img src="//i.imgur.com/Vk0kWJu.png"><img src="//i.imgur.com/YJAF2dQ.png"></div>
  1964. <div class="messagername"><b>group name</b>
  1965. <span>phantomcodes liked a message</span></div>
  1966. </div><!-- // .messager -->
  1967.  
  1968. <div class="messager">
  1969. <img src="//i.imgur.com/83EF0Zb.png">
  1970. <div class="messagername"><b>name</b>
  1971. <span>you: this message previews section will scroll if it gets too long</span></div>
  1972. </div><!-- // .messager -->
  1973.  
  1974. <!--============== ALL MESSAGE PREVIEWS ABOVE THIS LINE =================-->
  1975. </div><!-- // .messagers -->
  1976. </div><!-- // .message-left -->
  1977.  
  1978. <div class="message-right">
  1979. <div class="message-top">
  1980. <div class="message-topname">
  1981. <img src="//i.imgur.com/muOVtU2.png">
  1982. <li><b>name</b><span>frequently asked</span></li>
  1983. </div>
  1984. <div class="message-topicons"><i class="ti ti-phone"></i><i class="ti ti-video"></i><i class="ti ti-info-circle"></i></div>
  1985. </div>
  1986. <div class="messages">
  1987. <!--====================== EDIT HERE: MESSAGES =============================
  1988.  
  1989. MESSAGE DATE FORMAT:
  1990.  
  1991. <div class="messagedate"><b>DATE TEXT</b></div>
  1992.  
  1993. - these can also be used as subtitles, etc. they are optional!
  1994. - if you want lowercase text use <span></span> instead of <b></b>
  1995.  
  1996. MESSAGES FORMAT:
  1997.  
  1998. <div class="messagewrap left">
  1999. <img class="msgicon" src="IMAGEURL">
  2000. <div class="messagetext">
  2001. <li>QUESTION TEXT</li>
  2002. </div>
  2003. </div>
  2004. <div class="messagewrap right">
  2005. <div class="messagetext">
  2006. <li>ANSWER TEXT</li>
  2007. </div>
  2008. </div>
  2009.  
  2010. - CAPITALIZED text is what you change
  2011. - wrap each individual message in <li></li>, you can add as many as you like
  2012. - add as many messages as you like, this section will scroll
  2013.  
  2014. =================== ALL MESSAGE PREVIEWS BELOW THIS LINE ================-->
  2015.  
  2016. <div class="messagedate"><b>april 6th, 2026, 2:15am</b></div>
  2017.  
  2018. <div class="messagewrap left">
  2019. <img class="msgicon" src="//64.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.pnj">
  2020. <div class="messagetext">
  2021. <li>is this a question?</li>
  2022. </div>
  2023. </div><!-- // .messagewrap.left -->
  2024. <div class="messagewrap right">
  2025. <div class="messagetext">
  2026. <li>yes and this is an answer</li>
  2027. </div>
  2028. </div><!-- // .messagewrap.right -->
  2029.  
  2030. <div class="messagedate"><span>use span for lowercase text</span></div>
  2031.  
  2032. <div class="messagewrap left">
  2033. <img class="msgicon" src="//64.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.pnj">
  2034. <div class="messagetext">
  2035. <li>first message text</li>
  2036. <li>second message text️</li>
  2037. </div>
  2038. </div><!-- // .messagewrap.left -->
  2039. <div class="messagewrap right">
  2040. <div class="messagetext">
  2041. <li>first answer text</li>
  2042. <li>second answer text</li>
  2043. <li>third answer text</li>
  2044. </div>
  2045. </div><!-- // .messagewrap.right -->
  2046.  
  2047. <!--=================== ALL MESSAGES ABOVE THIS LINE ====================-->
  2048. </div><!-- // .messages -->
  2049. <div class="message-low">
  2050. <a href="/ask">
  2051. <li><i class="ti ti-mood-smile"></i><span>message...</span></li>
  2052. <li><i class="ti ti-microphone"></i><i class="ti ti-photo"></i></li>
  2053. </a>
  2054. </div>
  2055. </div>
  2056. </section>
  2057.  
  2058. </div><!-- // .p-wrapper -->
  2059. </div><!-- // #carousel -->
  2060.  
  2061. </div></div><!-- // #container / #containerwrap -->
  2062.  
  2063. </main><!-- end of main container -->
  2064.  
  2065. <script>
  2066.  
  2067. // tooltips
  2068. tippy('[title]', {
  2069. theme: 'custom',
  2070. arrow: false,
  2071. followCursor: true,
  2072. delay: 100,
  2073. placement: 'top',
  2074. offset: "0, 5",
  2075. zIndex: 9999999999,
  2076. maxWidth: 400,
  2077.  
  2078. content(reference) {
  2079. const title = reference.getAttribute('title');
  2080. reference.removeAttribute('title');
  2081. return title;
  2082. },
  2083. });
  2084.  
  2085. // tumblr controls
  2086. $(document).ready(function(){
  2087. $('a#controlsbutton').click(function(){
  2088. $('body').toggleClass('controls-click');
  2089. });
  2090. });
  2091.  
  2092. // searchbar
  2093. $(document).ready(function(){
  2094. $('a#searchbutton').click(function(){
  2095. $('body').toggleClass('search-click');
  2096. });
  2097. });
  2098. $(document).ready(function(){
  2099. $('.search').submit(function(event){
  2100. var value = $('input:first').val();
  2101. location.replace('http://{Name}.tumblr.com/search/' + value);
  2102. });
  2103. });
  2104.  
  2105. // tumblr controls
  2106. $(document).ready(function(){
  2107. $('button.highlights').click(function(){
  2108. $('body').toggleClass('highlights-click');
  2109. });
  2110. });
  2111.  
  2112. // day/night mode
  2113. const toggle = document.getElementById("theme-toggle");
  2114.  
  2115. toggle.onclick = function () {
  2116. // add class to html and make transition snappy
  2117. document.documentElement.classList.add("theme-transition");
  2118. // alright lets retrive the info from data-theme
  2119. let currentTheme = document.documentElement.getAttribute("data-theme");
  2120. // if it's dark already, let's go into the light
  2121. let targetTheme = "light";
  2122. // but if it is light let's toggle dark mode
  2123. if (currentTheme === "light") {
  2124. targetTheme = "dark";
  2125. }
  2126. // ok now that theme has been toggled, get rid of snappy transition
  2127. window.setTimeout(function () {
  2128. document.documentElement.classList.remove("theme-transition");
  2129. }, 50);
  2130. // we're going to save our theme preference now
  2131. document.documentElement.setAttribute("data-theme", targetTheme);
  2132. localStorage.setItem("theme", targetTheme);
  2133. };
  2134.  
  2135. // remove empty p tags
  2136. for (const p of document.querySelectorAll('p')) {
  2137. if (p.innerHTML.trim() === '') {
  2138. p.remove()
  2139. }
  2140. }
  2141.  
  2142. </script>
  2143.  
  2144. </body>
  2145. </html>
Advertisement
Add Comment
Please, Sign In to add comment