nicolas-sage

starburst media

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