nicolas-sage

laura about

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