nicolas-sage

page 15: starburst about

Jan 2nd, 2023 (edited)
194
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.61 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. | |__| |__| | STARBURST PAGE BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20.  
  21. CREDITS:
  22. - phosphor icons / phosphoricons.com
  23. - tabler icons / https://tabler-icons.io/ <-- you'll use these icons
  24. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  25. - bunny fonts / https://fonts.bunny.net/
  26.  
  27. ---->
  28.  
  29. <!---- JQUERY ---->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!----- BUNNY FONTS ---->
  33. <link href="https://fonts.bunny.net/css?family=Urbanist:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Montserrat+Alternates:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  34.  
  35. <!---- ICONS ---->
  36. <script src="https://unpkg.com/phosphor-icons"></script>
  37. <script src="https://unpkg.com/[email protected]"></script>
  38. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  39.  
  40. <!---- TOOLTIPS ---->
  41. <script src="https://unpkg.com/popper.js@1"></script>
  42. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  43.  
  44. <!--- day/night --->
  45. <script>
  46. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  47. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  48. </script>
  49.  
  50. <!------- CSS -------->
  51. <style>
  52.  
  53. :root {
  54.  
  55. /*---- EDIT HERE | VARIABLES ----*/
  56. --Corners:15px; /*-- 0px, 5px, 10px, or 15px recommended --*/
  57. --Glow:0 0 10px; /*-- change to 0 if you don't want the glow --*/
  58.  
  59. /*---- EDIT HERE | FONT STYLE -----*/
  60. --BodyFont:'Urbanist'; /*-- command+f to find & replace font names --*/
  61. --TitleFont:'Montserrat Alternates';
  62. --FontSize:15px;
  63.  
  64. /*--- EDIT HERE | GRADIENT COLORS ---*/
  65. --ColorGradientOne:#e19eb4;
  66. --ColorGradientTwo:#e6be89;
  67. --ColorGradientText:#fff;
  68. --ColorGradientAccent:#ffd3e4;
  69. --ColorGradientAccentTwo:#ffefd6;
  70.  
  71. /* don't change these */
  72. --ColorOpacity:rgba(255,255,255,.25);
  73. --ColorReverseOpacity:rgba(0,0,0,.05);
  74. }
  75.  
  76. html[data-theme='light'] {
  77. --LightOn: flex;
  78. --LightOff: none;
  79.  
  80. /* EDIT HERE | LIGHT MODE COLORS */
  81. --ColorBackground:#eaeaea;
  82. --ColorPosts:#fff;
  83. --ColorBorders:#ddd;
  84. --ColorTitle:#333;
  85. --ColorText:#666;
  86. --ColorLink:#cd7596;
  87. --ColorAccent:#e67da4;
  88. }
  89. html[data-theme='dark'] {
  90. --LightOn: none;
  91. --LightOff: flex;
  92.  
  93. /* EDIT HERE | DARK MODE COLORS */
  94. --ColorBackground:#222;
  95. --ColorPosts:#3a3a3a;
  96. --ColorBorders:#555;
  97. --ColorTitle:#fff;
  98. --ColorText:#ccc;
  99. --ColorLink:#ffb8d7;
  100. --ColorAccent:#ffcae1;
  101. }
  102.  
  103. html.theme-transition,
  104. html.theme-transition *,
  105. html.theme-transition *:before,
  106. html.theme-transition *:after {
  107. transition: 0s !important;
  108. transition-delay: 0 !important;
  109. }
  110.  
  111. .light-on{
  112. display: var(--LightOn);
  113. }
  114. .light-off{
  115. display: var(--LightOff);
  116. }
  117.  
  118. /*--- TOOLTIPS ---*/
  119. .tippy-tooltip.custom-theme {
  120. font-family:var(--TitleFont), sans-serif;
  121. font-size:.9em;
  122. color:var(--ColorTitle);
  123. text-transform:lowercase;
  124. text-align:center;
  125. letter-spacing:.1em;
  126. background:var(--ColorPosts);
  127. border-radius:var(--Corners);
  128. margin-bottom:.5em;
  129. }
  130.  
  131. /*--- SCROLLBAR ---*/
  132. ::-webkit-scrollbar {
  133. width:5px;
  134. height:5px;
  135. background:var(--ColorBackground);
  136. }
  137.  
  138. ::-webkit-scrollbar-track {
  139. background:var(--ColorBackground);
  140. border-radius: 5px;
  141. }
  142.  
  143. ::-webkit-scrollbar-thumb {
  144. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  145. border-radius: 5px;
  146. }
  147.  
  148. /*--- TEXT SELECTION ---*/
  149. ::-moz-selection { /* Code for Firefox */
  150. color:var(--ColorPosts);
  151. background:var(--ColorAccent);
  152. }
  153.  
  154. ::selection {
  155. color:var(--ColorPosts);
  156. background:var(--ColorAccent);
  157. }
  158.  
  159. /*--- COMMON ---*/
  160.  
  161. body {
  162. font-family:var(--BodyFont), sans-serif;
  163. font-size:var(--FontSize);
  164. color: var(--ColorText);
  165. background-color: var(--ColorBackground);
  166. line-height:140%;
  167. word-wrap:break-word;
  168. letter-spacing:.04em;
  169. margin:0;
  170. }
  171.  
  172. a {
  173. color:var(--ColorLink);
  174. text-decoration: none;
  175. -webkit-transition: all 0.3s;
  176. -moz-transition: all 0.3s;
  177. -ms-transition: all 0.3s;
  178. -o-transition: all 0.3s;
  179. transition: all 0.3s;
  180. }
  181.  
  182. a:hover {
  183. color: var(--ColorAccent);
  184. -webkit-transition: all 0.3s;
  185. -moz-transition: all 0.3s;
  186. -ms-transition: all 0.3s;
  187. -o-transition: all 0.3s;
  188. transition: all 0.3s;
  189. }
  190.  
  191. .abt-text a {
  192. position:relative;
  193. white-space:nowrap;
  194. border-bottom:2px solid var(--ColorBorders);
  195. }
  196.  
  197. .abt-text a:after {
  198. content:'';
  199. position:absolute;
  200. width:100%;
  201. transform:scaleX(0);
  202. height:2px;
  203. bottom:-2px;
  204. left:0;
  205. background-color:var(--ColorLink);
  206. border-radius:5px;
  207. transform-origin:middle;
  208. transition: transform 0.25s ease-out;
  209. }
  210.  
  211. .abt-text a:hover:after {
  212. transform: scaleX(1);
  213. transform-origin:middle;
  214. }
  215.  
  216. button {font-size:1em;}
  217.  
  218. blockquote {
  219. border-left:2px solid var(--ColorBorders);
  220. padding-left:.75em;
  221. margin-left:1em;
  222. }
  223.  
  224. li {list-style-type:circle;}
  225. li::marker {color:var(--ColorAccent)}
  226.  
  227. h1, h1 a, h2, h3, h4, h5 {
  228. font-family:var(--TitleFont), sans-serif;
  229. letter-spacing:.1em;
  230. color:var(--ColorTitle);
  231. }
  232.  
  233. h1 {font-size:1.3em;}
  234. h2 {font-size:1.2em;}
  235. h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
  236. h4 {font-size:1.05em;}
  237. h5 {font-size:1.025em;}
  238. h1 a:hover {color:var(--ColorAccent);}
  239.  
  240. h4 {margin:0 0 1em 0; text-align:center;}
  241. h5 {margin:0; padding:0;}
  242.  
  243. small {font-size: 0.95em;}
  244. big {font-size: 1.1em;}
  245.  
  246. hr {
  247. height: 1px;
  248. border: none;
  249. box-shadow: none;
  250. background-color: var(--ColorBorders);
  251. }
  252.  
  253. pre {
  254. line-height: inherit;
  255. font-size: inherit;
  256. white-space: pre-wrap;
  257. white-space: -moz-pre-wrap;
  258. white-space: -pre-wrap;
  259. white-space: -o-pre-wrap;
  260. word-wrap: break-word;
  261. }
  262.  
  263. b, strong {
  264. color:var(--ColorTitle);
  265. font-weight:800;
  266. }
  267.  
  268. b a:hover {
  269. color:var(--ColorAccent);
  270. -webkit-transition: all 0.3s;
  271. -moz-transition: all 0.3s;
  272. -ms-transition: all 0.3s;
  273. -o-transition: all 0.3s;
  274. transition: all 0.3s;
  275. }
  276.  
  277. /*--- HEADER ---*/
  278.  
  279. header {
  280. position:fixed;
  281. top:0;
  282. width:100%;
  283. height:50px;
  284. display:flex;
  285. justify-content:center;
  286. align-items:center;
  287. gap:1em;
  288. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  289. z-index:9999;
  290. }
  291.  
  292. /* header middle */
  293. .topmid {
  294. display:flex;
  295. justify-content:center;
  296. align-items:center;
  297. }
  298. .topmid a {
  299. display:flex;
  300. align-items:center;
  301. font-family:var(--TitleFont), sans-serif;
  302. font-size:1.1em;
  303. font-weight:500;
  304. color:var(--ColorGradientText);
  305. white-space:nowrap;
  306. }
  307. .topmid a:hover {transform:scale(.95);}
  308.  
  309. /* header left & right */
  310. .topleft {
  311. position:absolute;
  312. left:.5em;
  313. display:flex;
  314. justify-content:flex-start;
  315. align-items:center;
  316. gap:.5em;
  317. }
  318. a.headericon {
  319. display:flex;
  320. justify-content:center;
  321. align-items:center;
  322. padding:0!important;
  323. border:2.5px dotted var(--ColorOpacity);
  324. }
  325. a.headericon:hover {background:none!important; border:2.5px dotted var(--ColorGradientAccent);}
  326. a.headericon img {
  327. width:2.25em;
  328. height:2.25em;
  329. padding:2px;
  330. border-radius:100%;
  331. -webkit-transition: all 0.4s;
  332. -moz-transition: all 0.4s;
  333. -ms-transition: all 0.4s;
  334. -o-transition: all 0.4s;
  335. transition: all 0.4s;
  336. }
  337. a.headericon:hover img {transform:rotate(10deg) scale(.95);}
  338.  
  339. .topright {
  340. position:absolute;
  341. right:.5em;
  342. height:100%;
  343. display:flex;
  344. justify-content:flex-end;
  345. align-items:center;
  346. gap:.5em;
  347. }
  348.  
  349. .topleft a, .topright a {
  350. display:flex;
  351. justify-content:center;
  352. align-items:center;
  353. padding:.4em;
  354. border:2.5px dotted var(--ColorOpacity);
  355. border-radius:100%;
  356. }
  357. .topleft a:hover {border:2.5px dotted var(--ColorGradientAccent);}
  358. .topright a:hover {border:2.5px dotted var(--ColorGradientAccentTwo);}
  359.  
  360. .topleft i, .topright i {
  361. font-size:1.4em;
  362. color:var(--ColorGradientText);
  363. text-shadow:var(--Glow);
  364. -webkit-transition: all 0.4s;
  365. -moz-transition: all 0.4s;
  366. -ms-transition: all 0.4s;
  367. -o-transition: all 0.4s;
  368. transition: all 0.4s;
  369. }
  370. .topleft a:hover i {transform:scale(.95);}
  371.  
  372. /* updates */
  373. a#updatesbutton {cursor:help;}
  374. body.updates-click a#updatesbutton {border:2.5px dotted var(--ColorGradientAccentTwo);}
  375. a#updatesbutton:hover i {
  376. -webkit-animation-duration: 1s;
  377. animation-duration: 1s;
  378. -webkit-animation-fill-mode: both;
  379. animation-fill-mode: both;
  380. -webkit-animation-timing-function: ease-in-out;
  381. animation-timing-function: ease-in-out;
  382. animation-iteration-count:1;
  383. -webkit-animation-iteration-count:1;
  384. animation-name: wiggle;
  385. -moz-animation-name: wiggle;
  386. }
  387.  
  388. @keyframes wiggle {
  389. 0% {
  390. -webkit-transform: translateX(0px);
  391. -ms-transform: translateX(0px);
  392. transform: translateX(0px)
  393. }
  394. 15% {
  395. -webkit-transform: translateX(0px);
  396. -ms-transform: translateX(0px);
  397. transform: translateX(0px)
  398. }
  399. 30% {
  400. -webkit-transform: rotate(10deg);
  401. -ms-transform: translateX(10deg);
  402. transform: translateX(10deg)
  403. }
  404. 45% {
  405. -webkit-transform: rotate(-10deg);
  406. -ms-transform: rotate(-10deg);
  407. transform: rotate(-10deg)
  408. }
  409. 60% {
  410. -webkit-transform: rotate(10deg);
  411. -ms-transform: rotate(10deg);
  412. transform: rotate(10deg)
  413. }
  414. 75% {
  415. -webkit-transform: rotate(-10deg);
  416. -ms-transform: rotate(-10deg);
  417. transform: rotate(-10deg)
  418. }
  419. 85% {
  420. -webkit-transform: rotate(10deg);
  421. -ms-transform: rotate(10deg);
  422. transform: rotate(10deg)
  423. }
  424. 100% {
  425. -webkit-transform: translateX(0px);
  426. -ms-transform: translateX(0px);
  427. transform: translateX(0px)
  428. }
  429. }
  430.  
  431. /* updates tab */
  432. .updates {
  433. position:absolute;
  434. top:calc(100% + .5em);
  435. display:none;
  436. width:250px;
  437. overflow:hidden;
  438. box-shadow:0 4px 8px rgba(0,0,0,.1);
  439. border-radius:var(--Corners);
  440. }
  441. body.updates-click .updates {display:block;}
  442.  
  443. .updates-title {
  444. width:calc(100% - 2em);
  445. display:flex;
  446. justify-content:center;
  447. align-items:center;
  448. gap:1em;
  449. padding:.75em 1em .75em 1em;
  450. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  451. border-radius:var(--Corners) var(--Corners) 0 0;
  452. }
  453. .updates-title b {
  454. font-family:var(--TitleFont), sans-serif;
  455. font-weight:600;
  456. color:var(--ColorGradientText);
  457. text-align:center;
  458. }
  459.  
  460. .updates-wrap {
  461. width:100%;
  462. display:flex;
  463. flex-direction:column;
  464. background:var(--ColorPosts);
  465. border-radius:0 0 var(--Corners) var(--Corners);
  466. }
  467.  
  468. .updates li {
  469. width:calc(100% - 1em);
  470. display:flex;
  471. justify-content:flex-start;
  472. align-items:center;
  473. gap:.5em;
  474. padding:.5em 1em .5em 1em;
  475. border-bottom:2px dotted var(--ColorBorders);
  476. }
  477. .updates li:first-of-type {padding-top:.75em;}
  478. .updates li:last-of-type {padding-bottom:.75em; border-bottom:none;}
  479.  
  480. .updates li i {
  481. font-size:1.3em;
  482. text-shadow:none;
  483. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  484. -webkit-background-clip:text;
  485. -webkit-text-fill-color:transparent;
  486. }
  487.  
  488. /* DAY/NIGHT */
  489. button#theme-toggle {
  490. outline:none;
  491. border:none;
  492. height:100%;
  493. padding:0;
  494. background:transparent;
  495. display:flex;
  496. justify-content:center;
  497. align-items:center;
  498. }
  499. button#theme-toggle span {
  500. position:relative;
  501. justify-content:center;
  502. align-items:center;
  503. padding:.4em;
  504. border:2.5px dotted var(--ColorOpacity);
  505. border-radius:100%;
  506. -webkit-transition: all 0.4s;
  507. -moz-transition: all 0.4s;
  508. -ms-transition: all 0.4s;
  509. -o-transition: all 0.4s;
  510. transition: all 0.4s;
  511. cursor:help;
  512. }
  513. button#theme-toggle span:hover {border:2.5px dotted var(--ColorGradientAccentTwo);}
  514.  
  515. button#theme-toggle span:hover i {
  516. -webkit-animation-duration: .75s;
  517. animation-duration: .75s;
  518. -webkit-animation-fill-mode: both;
  519. animation-fill-mode: both;
  520. -webkit-animation-timing-function: ease-in-out;
  521. animation-timing-function: ease-in-out;
  522. animation-iteration-count:1;
  523. -webkit-animation-iteration-count:1;
  524. animation-name:daynight;
  525. -moz-animation-name:daynight;
  526. }
  527.  
  528. @keyframes daynight {
  529. 50% {
  530. -webkit-transform: scaleX(-1);
  531. -ms-transform: scaleX(-1);
  532. transform: scaleX(-1);
  533. }
  534. }
  535.  
  536. a#sidebarbutton {display:none; cursor:help;}
  537. body.sidebar-click a#sidebarbutton {border:2.5px dotted var(--ColorGradientAccent);}
  538.  
  539. /* TUMBLR CONTROLS */
  540. a#controlsbutton {cursor:help;}
  541. body.controls-click a#controlsbutton {border:2.5px dotted var(--ColorGradientAccentTwo);}
  542. a#controlsbutton:hover i {
  543. -webkit-animation-duration: 1.5s;
  544. animation-duration: 1.5s;
  545. -webkit-animation-fill-mode: both;
  546. animation-fill-mode: both;
  547. -webkit-animation-timing-function: ease-in-out;
  548. animation-timing-function: ease-in-out;
  549. animation-iteration-count:1;
  550. -webkit-animation-iteration-count:1;
  551. animation-name:tumblrcontrols;
  552. -moz-animation-name:tumblrcontrols;
  553. }
  554.  
  555. @keyframes tumblrcontrols {
  556. 45% {
  557. -webkit-transform: rotate(180deg);
  558. -ms-transform: rotate(180deg);
  559. transform: rotate(180deg);
  560. }
  561. 55% {
  562. -webkit-transform: rotate(180deg);
  563. -ms-transform: rotate(180deg);
  564. transform: rotate(180deg);
  565. }
  566. 100% {
  567. -webkit-transform: rotate(360deg);
  568. -ms-transform: rotate(360deg);
  569. transform: rotate(360deg);
  570. }
  571. }
  572.  
  573. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  574. transform:scale(.75);
  575. margin-top:50px;
  576. margin-right:-1em;
  577. opacity:0;
  578. visibility:hidden;
  579. z-index:999999999!important;
  580. }
  581.  
  582. body.controls-click iframe.tmblr-iframe {
  583. opacity:1.0;
  584. visibility:visible;
  585. -webkit-transition: all 0.5s;
  586. -moz-transition: all 0.5s;
  587. -ms-transition: all 0.5s;
  588. -o-transition: all 0.5s;
  589. transition: all 0.5s;
  590. }
  591.  
  592. /*---- FIXED BUTTONS ----*/
  593. .fixedbuttons {
  594. position:fixed;
  595. right:.5em;
  596. bottom:.5em;
  597. display:flex;
  598. flex-direction:column;
  599. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  600. border-radius:50px;
  601. z-index:9999;
  602. }
  603. .fixedbuttons a {
  604. display:flex;
  605. justify-content:center;
  606. align-items:center;
  607. padding:.6em;
  608. }
  609. .fixedbuttons i {
  610. font-size:1.4em;
  611. color:var(--ColorGradientText);
  612. text-shadow:var(--Glow);
  613. }
  614.  
  615. /* SCROLL TO TOP */
  616. a#totop {
  617. display:none;
  618. cursor:help;
  619. }
  620. a#totop:hover i {
  621. -webkit-animation-duration: 2.5s;
  622. animation-duration: 2.5s;
  623. -webkit-animation-fill-mode: both;
  624. animation-fill-mode: both;
  625. -webkit-animation-timing-function: ease-in-out;
  626. animation-timing-function: ease-in-out;
  627. animation-iteration-count:1;
  628. -webkit-animation-iteration-count:1;
  629. animation-name:totop;
  630. -moz-animation-name:totop;
  631. }
  632.  
  633. @keyframes totop {
  634. 0% {
  635. -webkit-transform: translateY(0px);
  636. -ms-transform: translateY(0px);
  637. transform: translateY(0px)
  638. }
  639. 10% {
  640. -webkit-transform: translateY(-3px);
  641. -ms-transform: translateY(-3px);
  642. transform: translateY(-3px)
  643. }
  644. 20% {
  645. -webkit-transform: translateY(0px);
  646. -ms-transform: translateY(0px);
  647. transform: translateY(0px)
  648. }
  649. 30% {
  650. -webkit-transform: translateY(-3px);
  651. -ms-transform: translateY(-3px);
  652. transform: translateY(-3px)
  653. }
  654. 40% {
  655. -webkit-transform: translateY(0px);
  656. -ms-transform: translateY(0px);
  657. transform: translateY(0px)
  658. }
  659. 50% {
  660. -webkit-transform: translateY(0px);
  661. -ms-transform: translateY(0px);
  662. transform: translateY(0px)
  663. }
  664. 60% {
  665. -webkit-transform: translateY(0px);
  666. -ms-transform: translateY(0px);
  667. transform: translateY(0px)
  668. }
  669. 70% {
  670. -webkit-transform: translateY(-3px);
  671. -ms-transform: translateY(-3px);
  672. transform: translateY(-3px)
  673. }
  674. 80% {
  675. -webkit-transform: translateY(0px);
  676. -ms-transform: translateY(0px);
  677. transform: translateY(0px)
  678. }
  679. 90% {
  680. -webkit-transform: translateY(-3px);
  681. -ms-transform: translateY(-3px);
  682. transform: translateY(-3px)
  683. }
  684. 100% {
  685. -webkit-transform: translateY(0px);
  686. -ms-transform: translateY(0px);
  687. transform: translateY(0px)
  688. }
  689. }
  690.  
  691. /*--- CREDIT: DO NOT TOUCH ---*/
  692. a.credit {
  693. }
  694. a.credit i {
  695. font-size:1.5em;
  696. -webkit-transition: all 0.4s;
  697. -moz-transition: all 0.4s;
  698. -ms-transition: all 0.4s;
  699. -o-transition: all 0.4s;
  700. transition: all 0.4s;
  701. }
  702. a.credit:hover i {
  703. -webkit-animation-duration: 2s;
  704. animation-duration: 2s;
  705. -webkit-animation-fill-mode: both;
  706. animation-fill-mode: both;
  707. -webkit-animation-timing-function: ease-in-out;
  708. animation-timing-function: ease-in-out;
  709. animation-iteration-count:infinite;
  710. -webkit-animation-iteration-count:infinite;
  711. animation-name: bounce;
  712. -moz-animation-name: bounce;
  713. }
  714.  
  715. @keyframes bounce {
  716. 0% {
  717. -webkit-transform: translateY(0px);
  718. -ms-transform: translateY(0px);
  719. transform: translateY(0px)
  720. }
  721. 25% {
  722. -webkit-transform: translateY(-3px);
  723. -ms-transform: translateY(-3px);
  724. transform: translateY(-3px)
  725. }
  726. 50% {
  727. -webkit-transform: translateY(0px);
  728. -ms-transform: translateY(0px);
  729. transform: translateY(0px)
  730. }
  731. 75% {
  732. -webkit-transform: translateY(-3px);
  733. -ms-transform: translateY(-3px);
  734. transform: translateY(-3px)
  735. }
  736. 100% {
  737. -webkit-transform: translateY(0px);
  738. -ms-transform: translateY(0px);
  739. transform: translateY(0px)
  740. }
  741. }
  742.  
  743. /*--- MAIN CONTENT ---*/
  744.  
  745. main {
  746. width:100%;
  747. display:flex;
  748. justify-content:center;
  749. }
  750.  
  751. section {
  752. width:calc(100% - 4em);
  753. max-width:1000px;
  754. margin-top:calc(50px + 3em);
  755. margin-bottom:4em;
  756. display:flex;
  757. flex-direction:column;
  758. align-items:center;
  759. gap:.5em;
  760. }
  761.  
  762. .section-top {
  763. position:relative;
  764. width:100%;
  765. display:flex;
  766. gap:.5em;
  767. }
  768.  
  769. /* images */
  770. .images {
  771. width:100%;
  772. display:flex;
  773. flex-direction:column;
  774. align-items:center;
  775. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  776. border-radius:var(--Corners);
  777. }
  778.  
  779. .headerimg {
  780. width:100%;
  781. display:flex;
  782. justify-content:center;
  783. align-items:center;
  784. }
  785. .headerimg img {
  786. width:100%;
  787. height:250px;
  788. display:flex;
  789. justify-content:center;
  790. border-radius:var(--Corners) var(--Corners) 0 0;
  791. object-fit:cover;
  792. }
  793.  
  794. .profileimg {
  795. position:relative;
  796. width:100%;
  797. height:calc(48px + .5em);
  798. display:flex;
  799. justify-content:flex-end;
  800. align-items:center;
  801. }
  802. img.blogicon {
  803. position:absolute;
  804. top:-40px;
  805. left:1em;
  806. width:80px;
  807. height:80px;
  808. padding:4px;
  809. object-fit:cover;
  810. border-radius:100%;
  811. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  812. }
  813.  
  814. /* SEARCH BAR */
  815. #search {
  816. position:relative;
  817. width:calc(100% - 2em);
  818. display:flex;
  819. justify-content:flex-start;
  820. align-items:center;
  821. gap:.5em;
  822. padding:.75em 1em .75em 1em;
  823. border-top:2.5px dotted var(--ColorOpacity);
  824. }
  825.  
  826. #search i {
  827. font-size:1.3em;
  828. color:var(--ColorGradientText);
  829. text-shadow:var(--Glow);
  830. }
  831.  
  832. .search {width:100%;}
  833.  
  834. .search .query {
  835. border: 0;
  836. outline: 0;
  837. font-family:var(--TitleFont), sans-serif;
  838. font-size:.9em;
  839. color:var(--ColorGradientText);
  840. width:100%;
  841. height:100%;
  842. letter-spacing:.05em;
  843. background:transparent;
  844. -webkit-transition: all 0.4s;
  845. -moz-transition: all 0.4s;
  846. -ms-transition: all 0.4s;
  847. -o-transition: all 0.4s;
  848. transition: all 0.4s;
  849. }
  850.  
  851. ::-webkit-input-placeholder {color: inherit; opacity:.9;}
  852. :-moz-placeholder {color: inherit; opacity:.9;}
  853. ::-moz-placeholder {color: inherit; opacity:.9;}
  854. :-ms-input-placeholder {color: inherit; opacity:.9;}
  855.  
  856. input:focus::-webkit-input-placeholder {color: transparent;}
  857. input:focus:-moz-placeholder {color: transparent;}
  858. input:focus::-moz-placeholder {color: transparent;}
  859. input:focus:-ms-input-placeholder { color: transparent;}
  860.  
  861. /* socials */
  862. .socials {
  863. max-width:150px;
  864. display:flex;
  865. flex-direction:column;
  866. align-items:center;
  867. gap:1em;
  868. padding:1em;
  869. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  870. border-radius:var(--Corners);
  871. }
  872. .socials a {
  873. display:flex;
  874. justify-content:center;
  875. align-items:center;
  876. padding:.3em;
  877. border:2.5px dotted var(--ColorOpacity);
  878. border-radius:100%;
  879. }
  880. .socials a:hover {border:2.5px dotted var(--ColorGradientText);}
  881. .socials i {
  882. font-size:1.3em;
  883. color:var(--ColorGradientText);
  884. text-shadow:var(--Glow);
  885. -webkit-transition: all 0.4s;
  886. -moz-transition: all 0.4s;
  887. -ms-transition: all 0.4s;
  888. -o-transition: all 0.4s;
  889. transition: all 0.4s;
  890. }
  891. .socials a:hover i {transform:scale(.95);}
  892.  
  893. /*-- section mid --*/
  894. .section-mid {
  895. width:100%;
  896. display:flex;
  897. gap:.5em;
  898. }
  899.  
  900. /* about */
  901. .about {
  902. width:100%;
  903. display:flex;
  904. flex-direction:column;
  905. background:var(--ColorPosts);
  906. border-radius:var(--Corners);
  907. }
  908.  
  909. .abt-desc {
  910. width:100%;
  911. display:flex;
  912. flex-direction:column;
  913. }
  914. .abt-title {
  915. width:calc(100% - 2em);
  916. display:flex;
  917. justify-content:center;
  918. align-items:center;
  919. gap:2em;
  920. padding:.75em 1em .5em 1em;
  921. border-bottom:2.5px dotted var(--ColorBorders);
  922. }
  923. .abt-title b {
  924. font-family:var(--TitleFont), sans-serif;
  925. font-size:1.1em;
  926. font-weight:600;
  927. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  928. -webkit-background-clip: text;
  929. -webkit-text-fill-color: transparent;
  930. }
  931.  
  932. .abt-text {
  933. width:calc(100% - 2em);
  934. max-height:250px;
  935. padding:.75em 1em .75em 1em;
  936. overflow-y:auto;
  937. text-align:left;
  938. }
  939. .abt-text p {margin-bottom:0;}
  940. .abt-text::-webkit-scrollbar {
  941. width:3px;
  942. height:3px;
  943. background:transparent;
  944. }
  945. .abt-text::-webkit-scrollbar-track {margin-top:.25em; background:transparent;}
  946. .abt-text li {list-style-type:circle;}
  947.  
  948. .stats {
  949. width:100%;
  950. height:55px;
  951. display:flex;
  952. justify-content:center;
  953. align-items:center;
  954. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  955. border-radius:0 0 var(--Corners) var(--Corners);
  956. }
  957. .stats li {
  958. position:relative;
  959. min-width:calc(20% - 1.5em);
  960. width:calc(100% - 1em);
  961. height:calc(100% - 1em - 2.5px);
  962. display:flex;
  963. flex-direction:column;
  964. justify-content:center;
  965. align-items:center;
  966. gap:.15em;
  967. padding:.5em;
  968. border-right:2.5px dotted var(--ColorOpacity);
  969. }
  970. .stats li:last-of-type {border-right:none;}
  971.  
  972. .stats i {
  973. font-size:1.3em;
  974. color:var(--ColorGradientText);
  975. text-shadow:var(--Glow);
  976. display:flex;
  977. justify-content:center;
  978. align-items:center;
  979. }
  980. .stats span {
  981. font-size:.925em;
  982. font-family:var(--TitleFont), sans-serif;
  983. color:var(--ColorGradientText);
  984. text-align:center;
  985. }
  986.  
  987. /* lower section */
  988. .section-low {
  989. position:relative;
  990. width:100%;
  991. display:flex;
  992. gap:.5em;
  993. }
  994.  
  995. /* status */
  996. .status {
  997. width:350px;
  998. max-height:250px;
  999. display:flex;
  1000. flex-direction:column;
  1001. overflow:hidden;
  1002. padding-bottom:.5em;
  1003. background:var(--ColorPosts);
  1004. border-radius:var(--Corners);
  1005. }
  1006. .statustitle {
  1007. width:calc(100% - 2em);
  1008. display:flex;
  1009. justify-content:center;
  1010. align-items:center;
  1011. padding:.75em 1em .75em 1em;
  1012. border-bottom:2.5px dotted var(--ColorBorders);
  1013. }
  1014. .statustitle b {
  1015. font-family:var(--TitleFont), sans-serif;
  1016. font-size:1em;
  1017. font-weight:600;
  1018. text-align:center;
  1019. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1020. -webkit-background-clip: text;
  1021. -webkit-text-fill-color: transparent;
  1022. }
  1023.  
  1024. .es-status {
  1025. width:100%;
  1026. overflow-y:auto;
  1027. display:flex;
  1028. flex-direction:column;
  1029. }
  1030. .es-status::-webkit-scrollbar {
  1031. width:3px;
  1032. height:3px;
  1033. background:transparent;
  1034. }
  1035. .es-status::-webkit-scrollbar-track {margin-top:.25em; background:transparent;}
  1036. .es-status li {
  1037. display:flex;
  1038. justify-content:flex-start;
  1039. align-items:center;
  1040. gap:.5em;
  1041. padding:.5em 1em .5em 1em;
  1042. }
  1043. .es-status i {font-size:1.5em;}
  1044. .es-status li.right i {
  1045. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1046. -webkit-background-clip:text;
  1047. -webkit-text-fill-color:transparent;
  1048. }
  1049. .es-status li.left i {color:var(--ColorBorders);}
  1050.  
  1051. /* blogs */
  1052. .blogs {
  1053. width:100%;
  1054. max-height:250px;
  1055. display:flex;
  1056. flex-direction:column;
  1057. overflow:hidden;
  1058. padding-bottom:.25em;
  1059. background:var(--ColorPosts);
  1060. border-radius:var(--Corners);
  1061. }
  1062. .blogstitle {
  1063. width:calc(100% - 2em);
  1064. display:flex;
  1065. justify-content:center;
  1066. align-items:center;
  1067. padding:.75em 1em .75em 1em;
  1068. border-bottom:2.5px dotted var(--ColorBorders);
  1069. }
  1070. .blogstitle b {
  1071. font-family:var(--TitleFont), sans-serif;
  1072. font-size:1em;
  1073. font-weight:600;
  1074. text-align:center;
  1075. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1076. -webkit-background-clip: text;
  1077. -webkit-text-fill-color: transparent;
  1078. }
  1079.  
  1080. .blog-links {
  1081. width:100%;
  1082. overflow-y:auto;
  1083. }
  1084. .blog-links::-webkit-scrollbar {
  1085. width:3px;
  1086. height:3px;
  1087. background:transparent;
  1088. }
  1089. .blog-links::-webkit-scrollbar-track {margin-top:.25em; background:transparent;}
  1090. .blogs a {
  1091. display:flex;
  1092. justify-content:flex-start;
  1093. align-items:center;
  1094. gap:.5em;
  1095. padding:.5em 1em .5em 1em;
  1096. }
  1097. .blogs img {
  1098. width:1.75em;
  1099. height:1.75em;
  1100. padding:3px;
  1101. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1102. border-radius:100%;
  1103. -webkit-transition: all 0.4s;
  1104. -moz-transition: all 0.4s;
  1105. -ms-transition: all 0.4s;
  1106. -o-transition: all 0.4s;
  1107. transition: all 0.4s;
  1108. }
  1109. .blogs a:hover img {transform:rotate(10deg) scale(.95);}
  1110. .blogs span {
  1111. font-family:var(--TitleFont), sans-serif;
  1112. font-size:.9em;
  1113. font-weight:600;
  1114. overflow:hidden;
  1115. white-space:nowrap;
  1116. text-overflow:ellipsis;
  1117. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1118. -webkit-background-clip: text;
  1119. -webkit-text-fill-color: transparent;
  1120. }
  1121. .blog-title {
  1122. width:calc(100% - 2em);
  1123. height:calc(55px - 2em);
  1124. font-family:var(--TitleFont), sans-serif;
  1125. font-size:1.05em;
  1126. font-weight:600;
  1127. color:var(--ColorGradientText);
  1128. text-align:center;
  1129. display:flex;
  1130. justify-content:center;
  1131. align-items:center;
  1132. padding:1em;
  1133. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1134. }
  1135.  
  1136. /* likes */
  1137. .likes {
  1138. width:100%;
  1139. max-height:250px;
  1140. overflow:hidden;
  1141. display:flex;
  1142. flex-direction:column;
  1143. padding-bottom:.5em;
  1144. background:var(--ColorPosts);
  1145. border-radius:var(--Corners);
  1146. }
  1147. .likestitle {
  1148. width:calc(100% - 2em);
  1149. display:flex;
  1150. justify-content:center;
  1151. align-items:center;
  1152. padding:.75em 1em .75em 1em;
  1153. border-bottom:2.5px dotted var(--ColorBorders);
  1154. }
  1155. .likestitle b {
  1156. font-family:var(--TitleFont), sans-serif;
  1157. font-size:1em;
  1158. font-weight:600;
  1159. text-align:center;
  1160. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1161. -webkit-background-clip: text;
  1162. -webkit-text-fill-color: transparent;
  1163. }
  1164.  
  1165. .es-likes {display:flex; gap:.5em; overflow-y:auto;}
  1166. .es-likes::-webkit-scrollbar {
  1167. width:3px;
  1168. height:3px;
  1169. background:transparent;
  1170. }
  1171. .es-likes::-webkit-scrollbar-track {margin-top:.25em; background:transparent;}
  1172.  
  1173. .es-likes .left {
  1174. width:calc(50% - 2.25em);
  1175. display:flex;
  1176. flex-direction:column;
  1177. gap:.5em;
  1178. padding:.5em 1em .5em 1em;
  1179. }
  1180. .es-likes .right {
  1181. width:calc(50% - 2.25em);
  1182. display:flex;
  1183. flex-direction:column;
  1184. gap:.5em;
  1185. padding:.5em 1em .5em 1em;
  1186. }
  1187. .es-likes li {
  1188. display:flex;
  1189. justify-content:flex-start;
  1190. align-items:center;
  1191. gap:.5em;
  1192. }
  1193. .es-likes li i {
  1194. font-size:1.5em;
  1195. }
  1196. .es-likes .left li i {color:var(--ColorGradientOne);}
  1197. .es-likes .right li i {color:var(--ColorGradientTwo);}
  1198. .es-likes li span {color:var(--ColorText);}
  1199.  
  1200. /*---- RESPONSIVENESS ----*/
  1201.  
  1202. @media only screen and (max-width: 800px) {
  1203. .topleft a, .tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton {display:none;}
  1204. a.headericon {display:flex;}
  1205. .abt-text {height:auto;}
  1206. .section-low {flex-direction:column;}
  1207. .status {width:100%;}
  1208. }
  1209.  
  1210. @media only screen and (max-width: 450px) {
  1211. section {width:calc(100% - .5em); margin-top:auto; margin-bottom:1em; margin-left:auto; margin-right:auto;}
  1212. }
  1213.  
  1214. {CustomCSS}
  1215.  
  1216. </style>
  1217. </head>
  1218.  
  1219. <!----- HTML ----->
  1220.  
  1221. <body>
  1222. <main> <!-- main container -->
  1223.  
  1224. <!-- HEADER --->
  1225. <header>
  1226. <div class="topleft">
  1227. <a class="headericon" title="follow @{Name}" href="//tumblr.com/follow/{Name}"><img src="{PortraitURL-128}"></a>
  1228. <a title="contact" href="/ask"><i class="ph-chat-teardrop-dots"></i></a>
  1229. <a title="archive" href="/archive"><i class="ph-clock-counter-clockwise"></i></a>
  1230. </div><!-- .topleft -->
  1231. <div class="topmid"><a href="/">{Title}</a></div>
  1232. <div class="topright">
  1233. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1234. <span class="light-on" title="turn off the lights"><i class="ph-moon"></i></span>
  1235. <span class="light-off" title="turn on the lights"><i class="ph-sun"></i></span>
  1236. </button>
  1237. <a title="toggle controls" id="controlsbutton"><i class="ph-gear"></i></a>
  1238. </div>
  1239. </header>
  1240.  
  1241. <div class="fixedbuttons">
  1242. <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-arrow-up"></i></a>
  1243. <!--- CREDIT: DO NOT TOUCH --->
  1244. <a title="sunrise theme by sage" class="credit" href="//phantomcodes.tumblr.com"><i class="ph-ghost"></i></a>
  1245. </div>
  1246.  
  1247. <section><!-- MAIN CONTENT -->
  1248. <div class="section-top"><!-- top section -->
  1249.  
  1250. <!-- EDIT HERE | IMAGES --
  1251.  
  1252. - replace the image urls below with the images of your choosing
  1253. - header image width adjusts depending on screen size, height is 250px
  1254. - profile image is 80px x 80px
  1255. - you can replace your blog icon with an image link if you want
  1256.  
  1257. -->
  1258. <div class="images">
  1259. <div class="headerimg"><img src="https://64.media.tumblr.com/63d410a114663b888c0c8ef3b8575be2/dc47a6ae9a5ac960-c0/s1280x1920/c7985a82a3c1c69d21f068ae037cf78e1f70b75c.pnj"></div>
  1260. <div class="profileimg">
  1261. <img class="blogicon" src="{PortraitURL-128}">
  1262. </div>
  1263. </div>
  1264.  
  1265. <!-- EDIT HERE | LINKS/SOCIALS --
  1266.  
  1267. FORMAT:
  1268. <a title="LINK TITLE" href="LINKURL"><i class="ti ti-ICON-NAME"></i></a>
  1269.  
  1270. - capitalized words indicate what you can change
  1271. - icons are https://tabler-icons.io/
  1272. - max of 6 links
  1273.  
  1274. -->
  1275. <div class="socials">
  1276. <a title="back to blog" href="/"><i class="ti ti-arrow-left"></i></a>
  1277. <a title="twitter" href="/"><i class="ti ti-brand-twitter"></i></a>
  1278. <a title="instagram" href="/"><i class="ti ti-brand-instagram"></i></a>
  1279. <a title="spotify" href="/"><i class="ti ti-brand-spotify"></i></a>
  1280. <a title="discord" href="/"><i class="ti ti-brand-discord"></i></a>
  1281. <a title="pinterest" href="/"><i class="ti ti-brand-pinterest"></i></a>
  1282. </div>
  1283.  
  1284. </div><!-- .section-top -->
  1285.  
  1286. <!-- middle section -->
  1287. <div class="section-mid">
  1288.  
  1289. <!-- EDIT HERE | ABOUT DESCRIPTION --
  1290.  
  1291. - replace the placeholder text with whatever you want
  1292. - the text will scroll if it gets too long
  1293.  
  1294. -->
  1295. <div class="about">
  1296. <div class="abt-desc">
  1297. <div class="abt-title"><b>about</b></div>
  1298. <div class="abt-text">
  1299. description/bio text goes here. <b>bold text.</b> <a href="/">here's a link.</a>
  1300. <br>line break
  1301. <p>paragraph break
  1302. <li>this is
  1303. <li>a list
  1304. <li>of things
  1305. <blockquote>here's a blockquote</blockquote>
  1306. </div>
  1307. </div>
  1308.  
  1309. <!-- EDIT HERE | STATS --
  1310.  
  1311. FORMAT:
  1312. <li><i class="ti ti-ICON-NAME"></i><span>STAT TEXT</span></li>
  1313.  
  1314. - capitalized words indicate what you can change
  1315. - max of 5 stats
  1316. -->
  1317. <div class="stats">
  1318. <li><i class="ti ti-user"></i><span>name</span></li>
  1319. <li><i class="ti ti-cake"></i><span>age</span></li>
  1320. <li><i class="ti ti-seeding"></i><span>pronouns</span></li>
  1321. <li><i class="ti ti-map-pin"></i><span>location</span></li>
  1322. <li><i class="ti ti-sun"></i><span>zodiac</span></li>
  1323. </div>
  1324. </div><!-- .about -->
  1325.  
  1326. </div>
  1327.  
  1328. <!-- lower section -->
  1329. <div class="section-low">
  1330.  
  1331. <!-- EDIT HERE | STATUS --
  1332.  
  1333. - change the title if you want, make sure it stays wrapped in <b></b>
  1334.  
  1335. FORMAT:
  1336. <li class="RIGHT/LEFT"><i class="ti ti-toggle-RIGHT/LEFT"></i><span>STATUS TEXT</span></li>
  1337.  
  1338. - capitalized words indicate what you can change
  1339. - choose either right or left, right the toggle will be on, left it's off, make sure you change it in both places!
  1340. - copy and paste as many times as you want, this section will scroll
  1341.  
  1342. -->
  1343. <div class="status">
  1344. <div class="statustitle"><b>status</b></div>
  1345. <div class="es-status">
  1346. <li class="right"><i class="ti ti-toggle-right"></i><span>status on</span></li>
  1347. <li class="right"><i class="ti ti-toggle-right"></i><span>status on</span></li>
  1348. <li class="right"><i class="ti ti-toggle-right"></i><span>status on</span></li>
  1349. <li class="left"><i class="ti ti-toggle-left"></i><span>status off</span></li>
  1350. <li class="left"><i class="ti ti-toggle-left"></i><span>status off</span></li>
  1351. </div>
  1352. </div><!-- .status -->
  1353.  
  1354. <!-- EDIT HERE | BLOGS --
  1355.  
  1356. - change the title if you want, make sure it stays wrapped in <b></b>
  1357.  
  1358. FORMAT:
  1359. <a href="//BLOGNAME.tumblr.com"><img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar"><span>@BLOGNAME</span></a>
  1360.  
  1361. - capitalized words indicate what you can change
  1362. - copy and paste as many times as you want, this section will scroll
  1363.  
  1364. -->
  1365. <div class="blogs">
  1366. <div class="blogstitle"><b>blogs</b></div>
  1367. <div class="blog-links">
  1368. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>@phantomcodes</span></a>
  1369. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>@phantomcodes</span></a>
  1370. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>@phantomcodes</span></a>
  1371. <a href="//phantomcodes.tumblr.com"><img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar"><span>@phantomcodes</span></a>
  1372. </div>
  1373. </div><!-- .blogs -->
  1374.  
  1375. <!-- EDIT HERE | LIKES/DISLIKES --
  1376.  
  1377. - change the title if you want, make sure it stays wrapped in <b></b>
  1378.  
  1379. FORMAT:
  1380. <li><i class="ti ti-ICON-NAME"></i><span>LIKE TEXT</span></li>
  1381.  
  1382. - capitalized words indicate what you can change
  1383. - copy and paste as many times as you want, this section will scroll
  1384.  
  1385. -->
  1386. <div class="likes">
  1387. <div class="likestitle"><b>likes & dislikes</b></div>
  1388. <div class="es-likes">
  1389. <div class="left"><!-- likes -->
  1390. <li><i class="ti ti-heart"></i><span>like</span></li>
  1391. <li><i class="ti ti-heart"></i><span>like</span></li>
  1392. <li><i class="ti ti-heart"></i><span>like</span></li>
  1393. <li><i class="ti ti-heart"></i><span>like</span></li>
  1394. <li><i class="ti ti-heart"></i><span>like</span></li>
  1395. <li><i class="ti ti-heart"></i><span>like</span></li>
  1396. </div><!-- likes end -->
  1397. <div class="right"><!-- dislikes -->
  1398. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1399. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1400. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1401. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1402. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1403. <li><i class="ti ti-x"></i><span>dislike</span></li>
  1404. </div><!-- dislikes end -->
  1405. </div>
  1406. </div><!-- .likes -->
  1407.  
  1408. </div><!-- .section-low -->
  1409.  
  1410. </section><!-- section ends -->
  1411.  
  1412. </main><!-- end of main container -->
  1413.  
  1414. <script>
  1415.  
  1416. // tooltips
  1417. tippy('[title]', {
  1418. theme: 'custom',
  1419. arrow: false,
  1420. followCursor: true,
  1421. delay: 100,
  1422. placement: 'bottom',
  1423. offset: "40, 10",
  1424. zIndex: 9999999999,
  1425. maxWidth: 400,
  1426.  
  1427. content(reference) {
  1428. const title = reference.getAttribute('title');
  1429. reference.removeAttribute('title');
  1430. return title;
  1431. },
  1432. });
  1433.  
  1434. // scroll to top
  1435. $(document).ready(function(){
  1436. $('a#totop').click(function(){
  1437. $('html, body').animate({scrollTop : 0},800);
  1438. return false;
  1439. });
  1440. });
  1441.  
  1442. var mybutton = document.getElementById("totop");
  1443. window.onscroll = function() {scrollFunction()};
  1444.  
  1445. function scrollFunction() {
  1446. if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
  1447. mybutton.style.display = "flex";
  1448. } else {
  1449. mybutton.style.display = "none";
  1450. }
  1451. }
  1452.  
  1453. // toggle tags
  1454. $(document).ready(function(){
  1455. $('.clicktags').hide();
  1456. $('.clicktagsbutton').click(function() {
  1457. $(this).closest('article').find('.clicktagsbutton i').toggleClass('ph-tag-fill');
  1458. $(this).closest('article').find('.clicktags').slideToggle(500);
  1459. $(this).toggleClass('tags-click');
  1460. return false;
  1461. });
  1462. });
  1463.  
  1464. // tumblr controls
  1465. $(document).ready(function(){
  1466. $('a#controlsbutton').click(function(){
  1467. $('body').toggleClass('controls-click');
  1468. });
  1469. });
  1470.  
  1471. //updates tab
  1472. $(document).ready(function(){
  1473. $('a#updatesbutton').click(function(){
  1474. $('body').toggleClass('updates-click');
  1475. $('a#updatesbutton i').toggleClass('ph-bell-simple-slash');
  1476. });
  1477. });
  1478.  
  1479. // sidebar popup
  1480. $(document).ready(function(){
  1481. $('a#sidebarbutton').click(function(){
  1482. $('body').toggleClass('sidebar-click');
  1483. });
  1484. });
  1485.  
  1486. // day/night mode
  1487. const toggle = document.getElementById("theme-toggle");
  1488.  
  1489. toggle.onclick = function () {
  1490. // add class to html and make transition snappy
  1491. document.documentElement.classList.add("theme-transition");
  1492. // alright lets retrive the info from data-theme
  1493. let currentTheme = document.documentElement.getAttribute("data-theme");
  1494. // if it's dark already, let's go into the light
  1495. let targetTheme = "light";
  1496. // but if it is light let's toggle dark mode
  1497. if (currentTheme === "light") {
  1498. targetTheme = "dark";
  1499. }
  1500. // ok now that theme has been toggled, get rid of snappy transition
  1501. window.setTimeout(function () {
  1502. document.documentElement.classList.remove("theme-transition");
  1503. }, 50);
  1504. // we're going to save our theme preference now
  1505. document.documentElement.setAttribute("data-theme", targetTheme);
  1506. localStorage.setItem("theme", targetTheme);
  1507. };
  1508.  
  1509. </script>
  1510.  
  1511. </body>
  1512. </html>
Advertisement
Add Comment
Please, Sign In to add comment