nicolas-sage

custom page 10

Jan 3rd, 2026
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 58.44 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>icons / {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. | |__| |__| | CUSTOM PAGE BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20.  
  21. CREDITS:
  22. - tabler icons / https://tabler-icons.io/
  23. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  24. - bunny fonts / https://fonts.bunny.net/
  25.  
  26. ---->
  27.  
  28. <!---- JQUERY ---->
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!--- FILTERS --->
  32. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  33. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  34.  
  35. <!----- BUNNY FONTS ---->
  36. <link href="https://fonts.bunny.net/css?family=Quicksand:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Montserrat:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  37.  
  38. <!---- ICONS ---->
  39. <script src="https://unpkg.com/phosphor-icons"></script>
  40. <script src="https://unpkg.com/[email protected]"></script>
  41. <script src="//pull.cappuccicons.com/cpf.js"></script>
  42.  
  43. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  44. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  45.  
  46. <!---- TOOLTIPS ---->
  47. <script src="https://unpkg.com/popper.js@1"></script>
  48. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  49.  
  50. <!--- day/night --->
  51. <script>
  52. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  53. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  54. </script>
  55.  
  56. <!------- CSS -------->
  57. <style>
  58.  
  59. /* theme options - common */
  60. :root {
  61. /* EDIT HERE: FONTS, CORNERS, GLOW
  62. - find and replace the fonts if you change them
  63. - change glow to 0 0 0 if you don't want it */
  64.  
  65. --BodyFont:'Quicksand';
  66. --TitleFont:'Montserrat';
  67. --FontSize:15px;
  68. --Corners:10px;
  69. --Glow:0 0 10px;
  70.  
  71. /* OPACITY SETTINGS */
  72. --Spacing: 1rem;
  73.  
  74. --ColorOpaqueBackground:rgb(from var(--ColorBackground) r g b / .75);
  75. --ColorMoreOpaqueBackground:rgb(from var(--ColorBackground) r g b / .3);
  76.  
  77. --ColorLessOpaquePosts:rgb(from var(--ColorPosts) r g b / .9);
  78. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .75);
  79. --ColorMoreOpaquePosts:rgb(from var(--ColorPosts) r g b / .3);
  80.  
  81. --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
  82. --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
  83. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  84. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  85. }
  86.  
  87. /* theme options - day/night */
  88. :root, html[data-theme='light'] {
  89. --LightOn: flex;
  90. --LightOff: none;
  91.  
  92. /*--- EDIT HERE: DAYMODE COLORS ---*/
  93. --ColorBackground:#eee;
  94. --ColorPosts:#f8f8f8;
  95. --ColorSidebar:#f2f2f2;
  96. --ColorBorders:#e2e2e2;
  97. --ColorTitle:#333;
  98. --ColorText:#5a5a5a;
  99. --ColorAccentOne:#5e3592;
  100. --ColorAccentTwo:#ad638d;
  101. --ColorAccentText:#fff;
  102. }
  103. html[data-theme='dark'] {
  104. --LightOn: none;
  105. --LightOff: flex;
  106.  
  107. /*--- EDIT HERE: NIGHTMODE COLORS ---*/
  108. --ColorBackground:#333;
  109. --ColorPosts:#404040;
  110. --ColorSidebar:#3a3a3a;
  111. --ColorBorders:#4a4a4a;
  112. --ColorTitle:#fafafa;
  113. --ColorText:#dadada;
  114. --ColorAccentOne:#d5b5ff;
  115. --ColorAccentTwo:#ffcbe2;
  116. --ColorAccentText:#fff;
  117. }
  118. html.theme-transition,
  119. html.theme-transition *,
  120. html.theme-transition *:before,
  121. html.theme-transition *:after {
  122. transition: 0s !important;
  123. transition-delay: 0 !important;
  124. }
  125.  
  126. .light-on{
  127. display: var(--LightOn);
  128. }
  129. .light-off{
  130. display: var(--LightOff);
  131. }
  132.  
  133. /*--- TOOLTIPS ---*/
  134. .tippy-tooltip.custom-theme {
  135. position:relative;
  136. font-size:.95em;
  137. font-weight:500;
  138. color:var(--ColorTitle);
  139. text-transform:lowercase;
  140. text-align:center;
  141. background:var(--ColorPosts);
  142. border-radius:var(--Corners);
  143. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  144. }
  145.  
  146. /*--- SCROLLBAR ---*/
  147. ::-webkit-scrollbar {
  148. width:4px;
  149. height:4px;
  150. background:var(--ColorBackground);
  151. }
  152. ::-webkit-scrollbar-track {
  153. background:var(--ColorBackground);
  154. border-radius: 5px;
  155. }
  156. ::-webkit-scrollbar-thumb {
  157. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo));
  158. border-radius: 5px;
  159. }
  160.  
  161. /*--- TEXT SELECTION ---*/
  162. ::-moz-selection { /* Code for Firefox */
  163. color:var(--ColorPosts);
  164. background:var(--ColorAccentOne);
  165. }
  166.  
  167. ::selection {
  168. color:var(--ColorPosts);
  169. background:var(--ColorAccentOne);
  170. }
  171.  
  172. * {box-sizing:border-box;}
  173.  
  174. body {
  175. font-family:var(--BodyFont), sans-serif;
  176. font-size:var(--FontSize);
  177. color:var(--ColorText);
  178. line-height:150%;
  179. word-wrap:break-word;
  180. letter-spacing:.04em;
  181. margin:0;
  182. /*===================== EDIT HERE: BACKGROUND COLOR ========================
  183. - if you want a regular background color instead of the gradient change the background below to: background:var(--ColorPosts);
  184. ==========================================================================*/
  185. background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
  186. }
  187.  
  188. body {
  189. opacity:1;
  190. transition:.75s opacity;
  191. }
  192.  
  193. body.fade-out {
  194. opacity:0;
  195. transition:none;
  196. }
  197. html {background:var(--ColorBackground); scrollbar-gutter:stable;}
  198.  
  199. a {
  200. color:var(--ColorAccentOne);
  201. text-decoration:none;
  202. -webkit-transition: all 0.4s;
  203. -moz-transition: all 0.4s;
  204. -ms-transition: all 0.4s;
  205. -o-transition: all 0.4s;
  206. transition: all 0.4s;
  207. }
  208.  
  209. a:hover {
  210. color:var(--ColorAccentTwo);
  211. -webkit-transition: all 0.4s;
  212. -moz-transition: all 0.4s;
  213. -ms-transition: all 0.4s;
  214. -o-transition: all 0.4s;
  215. transition: all 0.4s;
  216. }
  217.  
  218. blockquote {
  219. border-left:1.5px solid var(--ColorBorders);
  220. padding-left:.75rem;
  221. margin-left:1rem;
  222. }
  223. blockquote p {padding:0!important;}
  224.  
  225. ul {list-style-type:circle;}
  226. ol {list-style-type:decimal-leading-zero; margin:0;}
  227. li::marker {color:var(--ColorAccentOne);}
  228.  
  229. small {font-size:.95em;}
  230. big {font-size:1.1em;}
  231.  
  232. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  233. h1 a {color:var(--ColorTitle);}
  234. h1 a:hover {color:var(--ColorAccentTwo);}
  235. h2 {font-size:1.25em; color:var(--ColorTitle);}
  236. h3 {font-size:1.15em; color:var(--ColorTitle);}
  237. h4 {font-size:1.1em; color:var(--ColorTitle); margin-bottom:1rem;}
  238. h5 {font-size:1.05em; color:var(--ColorTitle);}
  239. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  240.  
  241. button {font-size:1em;}
  242.  
  243. hr {
  244. height:1px;
  245. border:none;
  246. box-shadow:none;
  247. background:var(--ColorBorders);
  248. }
  249.  
  250. pre {
  251. word-wrap:break-word!important;
  252. white-space:pre-wrap;
  253. }
  254.  
  255. b, strong {
  256. color:var(--ColorTitle);
  257. font-weight:800;
  258. }
  259.  
  260. b a:hover {
  261. color:var(--ColorAccentTwo);
  262. -webkit-transition: all 0.4s;
  263. -moz-transition: all 0.4s;
  264. -ms-transition: all 0.4s;
  265. -o-transition: all 0.4s;
  266. transition: all 0.4s;
  267. }
  268.  
  269. /* common link effects */
  270. .sb-text a {
  271. display:inline-block;
  272. position:relative;
  273. }
  274. .sb-text a:after {
  275. content: '';
  276. position:absolute;
  277. bottom:0;
  278. left:0;
  279. width:100%;
  280. height:1.5px;
  281. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  282. transform:scaleX(0);
  283. transform-origin:center;
  284. transition:transform 0.4s ease-out;
  285. }
  286. .sb-text a:hover:after {
  287. transform:scaleX(1);
  288. transform-origin:center;
  289. }
  290.  
  291. /*--- HEADER ---*/
  292. header {
  293. position:fixed;
  294. top:0;
  295. left:0;
  296. right:0;
  297. width:100%;
  298. height:2rem;
  299. padding:0 .5rem 0 .5rem;
  300. display:flex;
  301. justify-content:space-between;
  302. align-items:center;
  303. gap:1rem;
  304. backdrop-filter:blur(50px);
  305. background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
  306. z-index:99999;
  307. }
  308.  
  309. .header-left {
  310. position:relative;
  311. display:flex;
  312. justify-content:flex-start;
  313. align-items:center;
  314. gap:.75rem;
  315. }
  316.  
  317. .header-left a#sidebarbutton {
  318. display:none;
  319. justify-content:center;
  320. align-items:center;
  321. cursor:help;
  322. }
  323. .header-left a#sidebarbutton i {
  324. font-size:1.3em;
  325. color:var(--ColorAccentText);
  326. text-shadow:0 1px rgba(0,0,0,.1);
  327. -webkit-transition: all 0.4s;
  328. -moz-transition: all 0.4s;
  329. -ms-transition: all 0.4s;
  330. -o-transition: all 0.4s;
  331. transition: all 0.4s;
  332. }
  333. .header-left a#sidebarbutton:hover i, body.sidebar-click .header-left a#sidebarbutton i {text-shadow:var(--Glow);}
  334.  
  335. a.htitle {
  336. font-family:var(--TitleFont), sans-serif;
  337. font-size:1.05em;
  338. font-weight:700;
  339. color:var(--ColorAccentText);
  340. text-shadow:0 1px rgba(0,0,0,.1);
  341. white-space:nowrap;
  342. }
  343. a.htitle:hover {text-shadow:var(--Glow);}
  344.  
  345. .header-left a.mainlink {
  346. font-weight:500;
  347. color:var(--ColorAccentText);
  348. text-shadow:0 1px rgba(0,0,0,.1);
  349. white-space:nowrap;
  350. }
  351. a.mainlink:hover {text-shadow:var(--Glow);}
  352.  
  353. /* requests button */
  354. a#requestsbutton {cursor:help;}
  355. body.requests-click a#requestsbutton {text-shadow:var(--Glow);}
  356.  
  357. /* requests popup */
  358. .requests-wrap {
  359. position:fixed;
  360. top:2rem;
  361. left:0;
  362. right:0;
  363. bottom:0;
  364. width:100%;
  365. height:calc(100% - 2.5rem);
  366. display:none; /* change later */
  367. justify-content:center;
  368. align-items:flex-start;
  369. padding:2rem;
  370. backdrop-filter:blur(50px);
  371. z-index:9999;
  372. }
  373. body.requests-click .requests-wrap {display:flex;}
  374. .requests {
  375. width:100%;
  376. max-width:900px;
  377. height:fit-content;
  378. max-height:calc(100vh - 6rem);
  379. display:flex;
  380. gap:1.5px;
  381. overflow:hidden;
  382. background:var(--ColorBackground);
  383. border-radius:var(--Corners);
  384. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  385. }
  386.  
  387.  
  388. .req-leftwrap {
  389. width:25%;
  390. display:flex;
  391. flex-direction:column;
  392. gap:1rem;
  393. padding:1rem .5rem 1rem .5rem;
  394. background:var(--ColorLessOpaqueAccentOne);
  395. }
  396. .req-leftwrap .dots {width:fit-content; padding:0 .5rem 0 .5rem;}
  397. .req-leftwrap .dot:nth-of-type(1) {opacity:.9; background:var(--ColorPosts);}
  398. .req-leftwrap .dot:nth-of-type(2) {opacity:.75; background:var(--ColorPosts);}
  399. .req-leftwrap .dot:nth-of-type(3) {opacity:.6; background:var(--ColorPosts);}
  400. .req-leftwrap .dot i {color:var(--ColorAccentOne); text-shadow:0 1px var(--ColorPosts);}
  401.  
  402. .req-left {
  403. width:100%;
  404. overflow-y:auto;
  405. display:flex;
  406. flex-direction:column;
  407. gap:1rem;
  408. padding:0 .5rem 0 .5rem;
  409. }
  410.  
  411. .req-left::-webkit-scrollbar {
  412. width:1.5px;
  413. background:transparent;
  414. }
  415. .req-left::-webkit-scrollbar-track {
  416. margin-top:2px;
  417. margin-bottom:2px;
  418. background:transparent;
  419. }
  420. .req-left::-webkit-scrollbar-thumb {
  421. background:var(--ColorLessOpaqueAccentOne);
  422. border-radius:none;
  423. }
  424.  
  425. .req-status, .req-links, .req-rules {
  426. display:flex;
  427. flex-direction:column;
  428. gap:.65rem;
  429. }
  430. .status-title, .links-title, .info-title, .rules-title {
  431. font-size:.925em;
  432. font-weight:bold;
  433. color:var(--ColorPosts);
  434. text-shadow:0 .5px var(--ColorAccentOne);
  435. text-transform:uppercase;
  436. }
  437.  
  438. .req-info {
  439. display:flex;
  440. flex-direction:column;
  441. gap:.15rem;
  442. }
  443. .infotext {
  444. width:100%;
  445. color:var(--ColorPosts);
  446. text-shadow:0 .5px var(--ColorAccentOne);
  447. }
  448. .infotext p:first-of-type {margin-top:0;}
  449. .infotext p:last-of-type {margin-bottom:0;}
  450. .infotext b {color:var(--ColorPosts);}
  451. .infotext a, .infotext b a {
  452. display:inline-block;
  453. color:var(--ColorPosts);
  454. text-shadow:0 .5px var(--ColorAccentOne);
  455. border-bottom:1px solid var(--ColorMoreOpaquePosts);
  456. }
  457. .infotext a:hover, .infotext b a:hover {
  458. border-bottom:1px solid var(--ColorAccentOne);
  459. }
  460.  
  461. .status, .rule, .req-links a {
  462. line-height:125%;
  463. display:flex;
  464. justify-content:flex-start;
  465. align-items:flex-start;
  466. gap:.35rem;
  467. }
  468. .status i, .rule i, .req-links a i {font-size:1.2em; color:var(--ColorPosts); text-shadow:0 .5px var(--ColorAccentOne); transition:ease-in-out .4s;}
  469. .status.on i, .status.off i {font-size:1.4em;}
  470. .status.off i {color:var(--ColorMoreOpaquePosts); text-shadow:none;}
  471. .status span, .rule span, .req-links a span {color:var(--ColorPosts); text-shadow:0 .5px var(--ColorAccentOne); transition:ease-in-out .4s;}
  472. .req-links a:hover {gap:.15rem;}
  473. .req-links a:hover i {transform:rotate(180deg);}
  474.  
  475. .req-right {
  476. width:75%;
  477. display:flex;
  478. flex-direction:column;
  479. gap:1.5px;
  480. }
  481. .req-title {
  482. width:100%;
  483. display:flex;
  484. justify-content:flex-start;
  485. align-items:center;
  486. gap:.5rem;
  487. padding:.5rem;
  488. background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
  489. }
  490. .req-title i {
  491. font-size:1.2em;
  492. color:var(--ColorPosts);
  493. text-shadow:0 1px var(--ColorAccentOne);
  494. }
  495. .req-title b {font-size:1.05em; color:var(--ColorPosts); text-shadow:0 1px var(--ColorAccentOne);}
  496.  
  497. .req-tracking {
  498. width:100%;
  499. height:100%;
  500. display:flex;
  501. gap:1.5px;
  502. overflow-y:auto;
  503. }
  504. .req-tracking::-webkit-scrollbar, .req-progress::-webkit-scrollbar {
  505. width:1.5px;
  506. background:transparent;
  507. }
  508. .req-tracking::-webkit-scrollbar-track, .req-progress::-webkit-scrollbar-track {
  509. margin-top:2px;
  510. margin-bottom:2px;
  511. background:transparent;
  512. }
  513. .req-tracking::-webkit-scrollbar-thumb, .req-progress::-webkit-scrollbar-thumb {
  514. background:var(--ColorLessOpaqueAccentTwo);
  515. border-radius:none;
  516. }
  517. .reqt-wrap {
  518. overflow-y:auto;
  519. display:flex;
  520. flex-direction:column;
  521. background:var(--ColorPosts);
  522. }
  523. .reqt-wrap.progress {width:calc(40% - .75px);}
  524. .reqt-wrap.complete {width:calc(60% - .75px);}
  525. .reqt-title {
  526. width:fit-content;
  527. padding:.5rem .75rem .5rem .75rem;
  528. font-size:.925em;
  529. font-weight:bold;
  530. color:var(--ColorTitle);
  531. text-transform:uppercase;
  532. }
  533.  
  534. .req-progress, .req-complete {
  535. width:100%;
  536. overflow-y:auto;
  537. padding:0 .25rem .75rem .25rem;
  538. display:flex;
  539. flex-direction:column;
  540. gap:.15rem;
  541. }
  542.  
  543. .req-complete::-webkit-scrollbar, .req-progress::-webkit-scrollbar {
  544. width:1.5px;
  545. background:transparent;
  546. }
  547. .req-complete::-webkit-scrollbar-track, .req-progress::-webkit-scrollbar-track {
  548. margin-top:2px;
  549. margin-bottom:2px;
  550. background:transparent;
  551. }
  552. .req-complete::-webkit-scrollbar-thumb, .req-progress::-webkit-scrollbar-thumb {
  553. background:var(--ColorLessOpaqueAccentTwo);
  554. border-radius:none;
  555. }
  556. .req-progress li, .req-complete a {
  557. position:relative;
  558. width:100%;
  559. display:flex;
  560. justify-content:flex-start;
  561. align-items:flex-start;
  562. gap:.35rem;
  563. line-height:125%;
  564. padding:.35rem .5rem .35rem .5rem;
  565. border-radius:5px;
  566. }
  567. .req-complete a:hover {background:var(--ColorOpaqueAccentTwo);}
  568.  
  569. .req-progress li i {font-size:1.2em; color:var(--ColorAccentOne);}
  570.  
  571. .req-complete a i {font-size:1.2em; color:var(--ColorAccentTwo); text-shadow:0 .5px var(--ColorOpaquePosts);}
  572. .req-complete a span {
  573. color:var(--ColorText);
  574. text-shadow:0 .5px var(--ColorOpaquePosts);
  575. transition:ease-in-out .4s;
  576. }
  577. .req-complete a:hover span {color:var(--ColorAccentTwo);}
  578.  
  579. .req-askbox {
  580. width:100%;
  581. display:flex;
  582. flex-direction:column;
  583. background:var(--ColorPosts);
  584. }
  585. .req-asktitle {
  586. width:100%;
  587. padding:.5rem .75rem .5rem .75rem;
  588. font-size:.925em;
  589. font-weight:bold;
  590. color:var(--ColorTitle);
  591. text-transform:uppercase;
  592. }
  593.  
  594. .header-right {
  595. display:flex;
  596. justify-content:flex-ends;
  597. align-items:center;
  598. gap:.5rem;
  599. }
  600.  
  601. /* SCROLL TO TOP */
  602. a#totop {
  603. display:none;
  604. justify-content:center;
  605. align-items:center;
  606. cursor:help;
  607. }
  608. a#totop i {
  609. font-size:1.4em;
  610. color:var(--ColorAccentText);
  611. text-shadow:0 1px rgba(0,0,0,.1);
  612. -webkit-transition: all 0.4s;
  613. -moz-transition: all 0.4s;
  614. -ms-transition: all 0.4s;
  615. -o-transition: all 0.4s;
  616. transition: all 0.4s;
  617. }
  618. a#totop:hover i {
  619. text-shadow:var(--Glow);
  620. -webkit-animation-duration: 2.5s;
  621. animation-duration: 2.5s;
  622. -webkit-animation-fill-mode: both;
  623. animation-fill-mode: both;
  624. -webkit-animation-timing-function: ease-in-out;
  625. animation-timing-function: ease-in-out;
  626. animation-iteration-count:1;
  627. -webkit-animation-iteration-count:1;
  628. animation-name:totop;
  629. -moz-animation-name:totop;
  630. }
  631.  
  632. @keyframes totop {
  633. 0% {
  634. -webkit-transform: translateY(0px);
  635. -ms-transform: translateY(0px);
  636. transform: translateY(0px)
  637. }
  638. 10% {
  639. -webkit-transform: translateY(-3px);
  640. -ms-transform: translateY(-3px);
  641. transform: translateY(-3px)
  642. }
  643. 20% {
  644. -webkit-transform: translateY(0px);
  645. -ms-transform: translateY(0px);
  646. transform: translateY(0px)
  647. }
  648. 30% {
  649. -webkit-transform: translateY(-3px);
  650. -ms-transform: translateY(-3px);
  651. transform: translateY(-3px)
  652. }
  653. 40% {
  654. -webkit-transform: translateY(0px);
  655. -ms-transform: translateY(0px);
  656. transform: translateY(0px)
  657. }
  658. 50% {
  659. -webkit-transform: translateY(0px);
  660. -ms-transform: translateY(0px);
  661. transform: translateY(0px)
  662. }
  663. 60% {
  664. -webkit-transform: translateY(0px);
  665. -ms-transform: translateY(0px);
  666. transform: translateY(0px)
  667. }
  668. 70% {
  669. -webkit-transform: translateY(-3px);
  670. -ms-transform: translateY(-3px);
  671. transform: translateY(-3px)
  672. }
  673. 80% {
  674. -webkit-transform: translateY(0px);
  675. -ms-transform: translateY(0px);
  676. transform: translateY(0px)
  677. }
  678. 90% {
  679. -webkit-transform: translateY(-3px);
  680. -ms-transform: translateY(-3px);
  681. transform: translateY(-3px)
  682. }
  683. 100% {
  684. -webkit-transform: translateY(0px);
  685. -ms-transform: translateY(0px);
  686. transform: translateY(0px)
  687. }
  688. }
  689.  
  690. /* DAY/NIGHT */
  691. button#theme-toggle {
  692. position:relative;
  693. outline:none;
  694. border:none;
  695. background:none;
  696. padding:0;
  697. display:flex;
  698. justify-content:center;
  699. align-items:center;
  700. cursor:help;
  701. }
  702.  
  703. button#theme-toggle span {
  704. justify-content:center;
  705. align-items:center;
  706. -webkit-transition: all 0.4s;
  707. -moz-transition: all 0.4s;
  708. -ms-transition: all 0.4s;
  709. -o-transition: all 0.4s;
  710. transition: all 0.4s;
  711. }
  712.  
  713. button#theme-toggle i {
  714. font-size:1.3em;
  715. color:var(--ColorAccentText);
  716. text-shadow:0 1px rgba(0,0,0,.1);
  717. -webkit-transition: all 0.4s;
  718. -moz-transition: all 0.4s;
  719. -ms-transition: all 0.4s;
  720. -o-transition: all 0.4s;
  721. transition: all 0.4s;
  722. }
  723. button#theme-toggle:hover i {
  724. text-shadow:var(--Glow);
  725. -webkit-transition: all 0.4s;
  726. -moz-transition: all 0.4s;
  727. -ms-transition: all 0.4s;
  728. -o-transition: all 0.4s;
  729. transition: all 0.4s;
  730. -webkit-animation-duration: .75s;
  731. animation-duration: .75s;
  732. -webkit-animation-fill-mode: both;
  733. animation-fill-mode: both;
  734. -webkit-animation-timing-function: ease-in-out;
  735. animation-timing-function: ease-in-out;
  736. animation-iteration-count:1;
  737. -webkit-animation-iteration-count:1;
  738. animation-name:daynight;
  739. -moz-animation-name:daynight;
  740. }
  741.  
  742. @keyframes daynight {
  743. 50% {
  744. -webkit-transform: scaleX(-1);
  745. -ms-transform: scaleX(-1);
  746. transform: scaleX(-1);
  747. }
  748. }
  749.  
  750. /* TUMBLR CONTROLS */
  751. a#controlsbutton {
  752. display:flex;
  753. justify-content:center;
  754. align-items:center;
  755. cursor:help;
  756. }
  757. a#controlsbutton i {
  758. font-size:1.35em;
  759. color:var(--ColorAccentText);
  760. text-shadow:0 1px rgba(0,0,0,.1);
  761. -webkit-transition: all 0.4s;
  762. -moz-transition: all 0.4s;
  763. -ms-transition: all 0.4s;
  764. -o-transition: all 0.4s;
  765. transition: all 0.4s;
  766. }
  767. a#controlsbutton:hover i {
  768. text-shadow:var(--Glow);
  769. -webkit-animation-duration: 1.5s;
  770. animation-duration: 1.5s;
  771. -webkit-animation-fill-mode: both;
  772. animation-fill-mode: both;
  773. -webkit-animation-timing-function: ease-in-out;
  774. animation-timing-function: ease-in-out;
  775. animation-iteration-count:1;
  776. -webkit-animation-iteration-count:1;
  777. animation-name:tumblrcontrols;
  778. -moz-animation-name:tumblrcontrols;
  779. }
  780. body.controls-click a#controlsbutton i {text-shadow:var(--Glow);}
  781.  
  782. @keyframes tumblrcontrols {
  783. 45% {
  784. -webkit-transform: rotate(180deg);
  785. -ms-transform: rotate(180deg);
  786. transform: rotate(180deg);
  787. }
  788. 55% {
  789. -webkit-transform: rotate(180deg);
  790. -ms-transform: rotate(180deg);
  791. transform: rotate(180deg);
  792. }
  793. 100% {
  794. -webkit-transform: rotate(360deg);
  795. -ms-transform: rotate(360deg);
  796. transform: rotate(360deg);
  797. }
  798. }
  799.  
  800. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  801. transform:scale(.75);
  802. margin-right:3.5rem;
  803. opacity:0;
  804. visibility:hidden;
  805. z-index:999999999!important;
  806. }
  807.  
  808. body.controls-click iframe.tmblr-iframe {
  809. opacity:1.0;
  810. visibility:visible;
  811. -webkit-transition: all 0.5s;
  812. -moz-transition: all 0.5s;
  813. -ms-transition: all 0.5s;
  814. -o-transition: all 0.5s;
  815. transition: all 0.5s;
  816. }
  817.  
  818. /*--- CREDIT: DO NOT TOUCH ---*/
  819. a#credit {
  820. display:flex;
  821. justify-content:center;
  822. align-items:center;
  823. z-index:999999;
  824. }
  825. a#credit:hover {transform:scale(1.1);}
  826. a#credit i {
  827. font-size:1.35em;
  828. color:var(--ColorAccentText);
  829. text-shadow:0 1px rgba(0,0,0,.1);
  830. -webkit-transition: all 0.4s;
  831. -moz-transition: all 0.4s;
  832. -ms-transition: all 0.4s;
  833. -o-transition: all 0.4s;
  834. transition: all 0.4s;
  835. }
  836. a#credit:hover i {
  837. text-shadow:var(--Glow);
  838. -webkit-animation-duration: 2s;
  839. animation-duration: 2s;
  840. -webkit-animation-fill-mode: both;
  841. animation-fill-mode: both;
  842. -webkit-animation-timing-function: ease-in-out;
  843. animation-timing-function: ease-in-out;
  844. animation-iteration-count:infinite;
  845. -webkit-animation-iteration-count:infinite;
  846. animation-name: bounce;
  847. -moz-animation-name: bounce;
  848. }
  849.  
  850. @keyframes bounce {
  851. 0% {
  852. -webkit-transform: translateY(0px);
  853. -ms-transform: translateY(0px);
  854. transform: translateY(0px)
  855. }
  856. 25% {
  857. -webkit-transform: translateY(-3px);
  858. -ms-transform: translateY(-3px);
  859. transform: translateY(-3px)
  860. }
  861. 50% {
  862. -webkit-transform: translateY(0px);
  863. -ms-transform: translateY(0px);
  864. transform: translateY(0px)
  865. }
  866. 75% {
  867. -webkit-transform: translateY(-3px);
  868. -ms-transform: translateY(-3px);
  869. transform: translateY(-3px)
  870. }
  871. 100% {
  872. -webkit-transform: translateY(0px);
  873. -ms-transform: translateY(0px);
  874. transform: translateY(0px)
  875. }
  876. }
  877.  
  878. /* MAIN STYLING */
  879. main {
  880. width:100%;
  881. height:100vh;
  882. padding:3.5rem 2rem 1rem 2rem;
  883. display:flex;
  884. gap:3rem;
  885. }
  886. .main-wrap {
  887. width:100%;
  888. max-width:calc(100% - 300px);
  889. height:fit-content;
  890. max-height:calc(100vh - 4.5rem);
  891. display:flex;
  892. flex-direction:column;
  893. overflow:hidden;
  894. background:var(--ColorPosts);
  895. border-radius:var(--Corners);
  896. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  897. }
  898. .section-wrap {
  899. width:100%;
  900. display:flex;
  901. overflow-y:auto;
  902. }
  903. section {
  904. width:100%;
  905. padding:1rem;
  906. overflow-y:auto;
  907. display:flex;
  908. justify-content:center;
  909. }
  910. section::-webkit-scrollbar {
  911. width:1.5px;
  912. height:1.5px;
  913. background:transparent;
  914. }
  915. section::-webkit-scrollbar-track {
  916. margin-bottom:2px;
  917. background:transparent;
  918. }
  919. section::-webkit-scrollbar-thumb {
  920. background:var(--ColorLessOpaqueAccentTwo);
  921. border-radius:none;
  922. }
  923. .icon-wrap {}
  924.  
  925. /*-- SECTION HEADER --*/
  926. .section-header {
  927. position:relative;
  928. width:100%;
  929. padding:.75rem;
  930. display:flex;
  931. justify-content:flex-start;
  932. align-items:center;
  933. gap:1rem;
  934. background:var(--ColorBackground);
  935. box-shadow:inset 2px 2px 4px var(--ColorPosts);
  936. border-radius:var(--Corners) var(--Corners) 0 0;
  937. z-index:2;
  938. }
  939.  
  940. /* dots */
  941. .dots {
  942. display:flex;
  943. justify-content:flex-start;
  944. align-items:center;
  945. gap:.35rem;
  946. }
  947. .dot {width:.7rem; height:.7rem; display:flex; justify-content:center;
  948. align-items:center; border-radius:100%;}
  949. .dot:nth-of-type(1) {background:var(--ColorLessOpaqueAccentOne);}
  950. .dot:nth-of-type(2) {background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));}
  951. .dot:nth-of-type(3) {background:var(--ColorLessOpaqueAccentTwo);}
  952. .dot:nth-of-type(3) i {transform:rotate(-45deg);}
  953. .dot i {
  954. opacity:0;
  955. font-size:.65em;
  956. color:var(--ColorPosts);
  957. text-shadow:0 1px rgba(0,0,0,.1);
  958. -webkit-transition: all 0.4s;
  959. -moz-transition: all 0.4s;
  960. -ms-transition: all 0.4s;
  961. -o-transition: all 0.4s;
  962. transition: all 0.4s;
  963. }
  964. .dots:hover .dot i {opacity:1;}
  965.  
  966. .sh-links {
  967. display:flex;
  968. justify-content:flex-start;
  969. align-items:center;
  970. gap:.75rem;
  971. }
  972. .sh-links.two {gap:.5rem;}
  973. .sh-links a {
  974. display:flex;
  975. justify-content:center;
  976. align-items:center;
  977. }
  978. .sh-links a i {
  979. font-size:1.35em;
  980. color:var(--ColorTitle);
  981. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  982. background-clip:text;
  983. -webkit-background-clip:text;
  984. transition:ease-in-out .5s;
  985. }
  986. .sh-links a:hover i {color:transparent;}
  987. .sh-links a.nolink i {color:var(--ColorText); opacity:.3;}
  988. .sh-links a.nolink:hover i {color:var(--ColorText);}
  989. .sh-links a.smaller i {font-size:1.2em;}
  990.  
  991. .sh-titlewrap {
  992. width:100%;
  993. height:1.75rem;
  994. display:flex;
  995. justify-content:space-between;
  996. align-items:center;
  997. gap:.5rem;
  998. padding:.35rem;
  999. background:var(--ColorPosts);
  1000. border-radius:30px;
  1001. }
  1002. .sh-titlewrap li {
  1003. display:flex;
  1004. justify-content:flex-start;
  1005. align-items:center;
  1006. gap:.5rem;
  1007. }
  1008. .sh-titlewrap li img {
  1009. width:1.4rem;
  1010. height:1.4rem;
  1011. display:flex;
  1012. justify-content:center;
  1013. align-items:center;
  1014. object-fit:cover;
  1015. border-radius:100%;
  1016. }
  1017. .sh-title {
  1018. color:var(--ColorTitle);
  1019. /*
  1020. font-weight:500;
  1021. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1022. -webkit-background-clip:text;
  1023. -webkit-text-fill-color:transparent;
  1024. */
  1025. }
  1026. .sh-titlewrap i {
  1027. padding:.5rem;
  1028. display:flex;
  1029. justify-content:center;
  1030. align-items:center;
  1031. font-size:1.1em;
  1032. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1033. -webkit-background-clip:text;
  1034. -webkit-text-fill-color:transparent;
  1035. }
  1036.  
  1037. /*--- SIDEBAR ---*/
  1038. #sidebar {
  1039. position:sticky;
  1040. top:2.5rem;
  1041. width:300px;
  1042. max-height:calc(100vh - 4.5rem);
  1043. overflow-y:auto;
  1044. display:flex;
  1045. flex-direction:column;
  1046. align-items:center;
  1047. gap:1rem;
  1048. z-index:999;
  1049. }
  1050. .sidebar::-webkit-scrollbar {
  1051. width:0;
  1052. background:transparent;
  1053. }
  1054. .sidebar::-webkit-scrollbar-track {
  1055. margin-top:2px;
  1056. margin-bottom:2px;
  1057. background:transparent;
  1058. }
  1059. .sidebar::-webkit-scrollbar-thumb {
  1060. background:transparent;
  1061. border-radius:none;
  1062. }
  1063.  
  1064. .sidebar-top {
  1065. position:relative;
  1066. width:100%;
  1067. display:flex;
  1068. flex-direction:column;
  1069. background:var(--ColorPosts);
  1070. border-radius:var(--Corners);
  1071. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  1072. }
  1073.  
  1074. .sb-top {
  1075. position:relative;
  1076. width:100%;
  1077. padding:.5rem;
  1078. display:flex;
  1079. justify-content:flex-start;
  1080. align-items:center;
  1081. gap:.75rem;
  1082. background:var(--ColorBackground);
  1083. box-shadow:inset 2px 2px 4px var(--ColorPosts);
  1084. border-radius:var(--Corners) var(--Corners) 0 0;
  1085. }
  1086. .sb-top.two {justify-content:space-between;}
  1087. #sbtwo {
  1088. font-size:1.1em;
  1089. color:var(--ColorTitle);
  1090. margin-right:.5rem;
  1091. }
  1092. .sb-title {
  1093. font-size:1.025em;
  1094. font-weight:500;
  1095. color:var(--ColorTitle);
  1096. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1097. background-clip:text;
  1098. -webkit-background-clip:text;
  1099. transition:ease-in-out .5s;
  1100. }
  1101.  
  1102. .sb-img {
  1103. position:relative;
  1104. width:100%;
  1105. max-height:200px;
  1106. display:flex;
  1107. justify-content:center;
  1108. align-items:center;
  1109. }
  1110. .sb-img img {
  1111. width:100%;
  1112. height:100%;
  1113. max-height:200px;
  1114. object-fit:cover;
  1115. border-radius:0;
  1116. }
  1117.  
  1118. a.main-title {
  1119. width:fit-content;
  1120. line-height:130%;
  1121. padding:.5rem;
  1122. display:flex;
  1123. flex-direction:column;
  1124. }
  1125. a.main-title b {
  1126. font-family:var(--TitleFont), sans-serif;
  1127. font-size:1em;
  1128. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1129. -webkit-background-clip:text;
  1130. -webkit-text-fill-color:transparent;
  1131. }
  1132. a.main-title i {
  1133. font-size:.95em;
  1134. font-style:normal;
  1135. color:var(--ColorText);
  1136. transition:ease-in-out .4s;
  1137. }
  1138. a.main-title:hover i {color:var(--ColorTitle);}
  1139.  
  1140. .sb-text {
  1141. width:100%;
  1142. padding:0 .5rem .5rem .5rem;
  1143. }
  1144. .sb-text p:first-of-type {margin-top:0;}
  1145. .sb-text p:last-of-type {margin-bottom:0;}
  1146.  
  1147. /* search bar */
  1148. .searchbar {
  1149. width:100%;
  1150. padding:.5rem;
  1151. display:flex;
  1152. justify-content:flex-start;
  1153. align-items:center;
  1154. gap:.25rem;
  1155. background:var(--ColorBackground);
  1156. box-shadow:inset 2px -2px 4px var(--ColorPosts);
  1157. border-radius:0 0 var(--Corners) var(--Corners);
  1158. }
  1159. .searchbar i {
  1160. font-size:1.1em;
  1161. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1162. -webkit-background-clip:text;
  1163. -webkit-text-fill-color:transparent;
  1164. }
  1165. .search {
  1166. width:100%;
  1167. }
  1168. .search .query {
  1169. border:0;
  1170. outline:0;
  1171. font-family:var(--BodyFont), sans-serif;
  1172. width:100%;
  1173. font-size:.975em;
  1174. font-weight:normal;
  1175. color:var(--ColorText);
  1176. text-transform:lowercase;
  1177. letter-spacing:.04rem;
  1178. line-height:120%;
  1179. word-wrap:break-word;
  1180. background:transparent;
  1181. }
  1182.  
  1183. .search .query::-webkit-input-placeholder {color:inherit; opacity:.85;}
  1184. .search .query:-moz-placeholder {color:inherit; opacity:.85;}
  1185. .search .query::-moz-placeholder {color:inherit; opacity:.85;}
  1186. .search .query:-ms-input-placeholder {color:inherit; opacity:.85;}
  1187.  
  1188. input:focus::-webkit-input-placeholder {color:transparent; text-shadow:none;}
  1189. input:focus:-moz-placeholder {color:transparent; text-shadow:none;}
  1190. input:focus::-moz-placeholder {color:transparent; text-shadow:none;}
  1191. input:focus:-ms-input-placeholder {color:transparent; text-shadow:none;}
  1192.  
  1193. /*--- RULES ---*/
  1194. .rules {
  1195. width:100%;
  1196. overflow-y:auto;
  1197. display:flex;
  1198. flex-direction:column;
  1199. background:var(--ColorPosts);
  1200. border-radius:var(--Corners);
  1201. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  1202. }
  1203. .sb-rules {
  1204. width:100%;
  1205. overflow-y:auto;
  1206. padding:.5rem;
  1207. display:flex;
  1208. flex-direction:column;
  1209. gap:.65rem;
  1210. }
  1211. .sb-rules::-webkit-scrollbar {
  1212. width:1.5px;
  1213. background:transparent;
  1214. }
  1215. .sb-rules::-webkit-scrollbar-track {
  1216. margin-top:2px;
  1217. margin-bottom:2px;
  1218. background:transparent;
  1219. }
  1220. .sb-rules::-webkit-scrollbar-thumb {
  1221. background:var(--ColorLessOpaqueAccentTwo);
  1222. border-radius:none;
  1223. }
  1224.  
  1225. .sb-rules li {
  1226. line-height:125%;
  1227. display:flex;
  1228. justify-content:flex-start;
  1229. align-items:flex-start;
  1230. gap:.35rem;
  1231. }
  1232. .sb-rules i {
  1233. font-size:1.125em;
  1234. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1235. -webkit-background-clip:text;
  1236. -webkit-text-fill-color:transparent;
  1237. }
  1238.  
  1239. /*--- FILTERS ---*/
  1240. .sort {
  1241. width:275px;
  1242. overflow-y:auto;
  1243. border-right:1px solid var(--ColorBackground);
  1244. }
  1245. .sort::-webkit-scrollbar {
  1246. width:1.5px;
  1247. background:transparent;
  1248. }
  1249. .sort::-webkit-scrollbar-track {
  1250. margin-top:2px;
  1251. margin-bottom:2px;
  1252. background:transparent;
  1253. }
  1254. .sort::-webkit-scrollbar-thumb {
  1255. background:var(--ColorLessOpaqueAccentTwo);
  1256. border-radius:none;
  1257. }
  1258.  
  1259. .sort-top {
  1260. width:100%;
  1261. display:flex;
  1262. justify-content:space-between;
  1263. align-items:center;
  1264. gap:.5rem;
  1265. padding:.5rem;
  1266. border-bottom:1px solid var(--ColorBackground);
  1267. }
  1268. .sort-title {
  1269. font-size:1.05em;
  1270. font-weight:bold;
  1271. color:var(--ColorTitle);
  1272. }
  1273. .sort-top i {
  1274. font-size:1.2em;
  1275. color:var(--ColorTitle);
  1276. }
  1277.  
  1278. .filtersubtitle {width:100%;}
  1279. .filtersubtitle b {
  1280. font-size:.925em;
  1281. text-transform:uppercase;
  1282. white-space:nowrap;
  1283. }
  1284.  
  1285. /* filterboxes */
  1286. .filterbox ul {
  1287. width:100%;
  1288. margin:0;
  1289. padding:.5rem;
  1290. display:flex;
  1291. flex-direction:column;
  1292. gap:.25rem;
  1293. }
  1294.  
  1295. .filterbox a {
  1296. position:relative;
  1297. line-height:100%;
  1298. padding:.35rem .5rem .35rem .5rem;
  1299. cursor:help;
  1300. z-index:1;
  1301. }
  1302. .filterbox a:after {
  1303. content:'';
  1304. position:absolute;
  1305. bottom:0;
  1306. left:0;
  1307. width:100%;
  1308. height:100%;
  1309. opacity:0;
  1310. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1311. border-radius:5px;
  1312. z-index:-1;
  1313. -webkit-transition: all 0.4s;
  1314. -moz-transition: all 0.4s;
  1315. -ms-transition: all 0.4s;
  1316. -o-transition: all 0.4s;
  1317. transition: all 0.4s;
  1318. }
  1319. .filterbox a:hover:after {opacity:.5;}
  1320. .filterbox a.selected:after {opacity:1;}
  1321.  
  1322. .filterbox span {
  1323. font-size:.95em;
  1324. font-weight:normal;
  1325. color:var(--ColorText);
  1326. text-shadow:0 1px var(--ColorOpaquePosts);
  1327. line-height:100%;
  1328. -webkit-transition: all 0.4s;
  1329. -moz-transition: all 0.4s;
  1330. -ms-transition: all 0.4s;
  1331. -o-transition: all 0.4s;
  1332. transition: all 0.4s;
  1333. }
  1334. .filterbox a:hover span {font-weight:500; color:var(--ColorAccentOne);}
  1335. .filterbox a.selected span {font-weight:bold; color:var(--ColorPosts); text-shadow:none;}
  1336.  
  1337. /*--- ICONS ---*/
  1338. .icon {
  1339. width:85px;
  1340. height:85px;
  1341. margin-bottom:10px;
  1342. display:flex;
  1343. justify-content:center;
  1344. align-items:center;
  1345. }
  1346. .icon img {
  1347. width:100%;
  1348. height:100%;
  1349. object-fit:cover;
  1350. border-radius:var(--Corners);
  1351. }
  1352.  
  1353. /*---- RESPONSIVENESS ---*/
  1354. @media only screen and (max-width: 900px) {
  1355. .header-left a#sidebarbutton {display:flex;}
  1356. #sidebar {position:fixed; top:3rem; left:-100%; padding:.35rem; backdrop-filter:blur(50px); background:var(--ColorOpaquePosts); border-radius:var(--Corners);}
  1357. body.sidebar-click #sidebar {left:1rem;}
  1358.  
  1359. main {padding:3rem 1rem 1rem 1rem;}
  1360. .main-wrap {max-width:100%; max-height:calc(100vh - 4rem);}
  1361. }
  1362. @media only screen and (max-width: 750px) {
  1363. .tmblr-iframe-compact .tmblr-iframe--unified-controls, tumblr_controls, .tmblr-iframe, a#controlsbutton {display:none!important;}
  1364.  
  1365. .req-leftwrap {width:35%;}
  1366. .req-right {width:65%;}
  1367. .req-tracking {display:block;}
  1368. .reqt-wrap.progress {border-bottom:1.5px solid var(--ColorBackground);}
  1369. .reqt-wrap.progress, .reqt-wrap.complete {width:100%;}
  1370. }
  1371. @media only screen and (max-width: 650px) {
  1372. a.htitle {display:none;}
  1373. .sh-links.one {display:none;}
  1374. .sh-titlewrap li img, .sh-titlewrap i {display:none;}
  1375.  
  1376. .req-leftwrap {width:40%;}
  1377. .req-right {width:60%;}
  1378. }
  1379.  
  1380. {CustomCSS}
  1381.  
  1382. </style>
  1383. </head>
  1384.  
  1385. <!----- HTML ----->
  1386. <body>
  1387.  
  1388. <main><!-- main container -->
  1389.  
  1390. <!--- HEADER --->
  1391. <header>
  1392. <div class="header-left">
  1393. <a id="sidebarbutton" title="toggle sidebar"><i class="ti ti-layout-sidebar-left-collapse-filled"></i></a>
  1394. <a class="htitle" href="/">{Title}</a>
  1395. <a class="mainlink" href="/">home</a>
  1396. <a class="mainlink" href="/ask">ask</a>
  1397. <a class="mainlink" href="/archive">archive</i></a>
  1398. <a class="mainlink" id="requestsbutton">requests</a>
  1399. </div>
  1400. <div class="header-right">
  1401. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
  1402. <!-- day/night -->
  1403. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1404. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1405. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1406. </button>
  1407. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1408.  
  1409. <!--- CREDIT: DO NOT TOUCH --->
  1410. <a title="custom page by sage" id="credit" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  1411. </div>
  1412. </header><!-- header ends -->
  1413.  
  1414. <!--- REQUESTS POPUP --->
  1415. <div class="requests-wrap">
  1416. <div class="requests">
  1417. <div class="req-leftwrap">
  1418. <a class="dots" id="requestsbutton" title="close"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></a>
  1419. <div class="req-left">
  1420. <div class="req-info">
  1421. <div class="info-title">info</div>
  1422. <!--====================== EDIT HERE: REQUEST INFO =========================
  1423.  
  1424. - links and bold text can be added to the infotext
  1425. - recommend keeping this text relatively short!
  1426.  
  1427. =========================================================================-->
  1428. <div class="infotext"><!-- ALL TEXT BELOW THIS LINE -->
  1429. your request will be completed in the order that it's received.
  1430. </div><!-- // .infotext / ALL TEXT ABOVE THIS LINE -->
  1431. </div><!-- // .req-info -->
  1432.  
  1433. <div class="req-status">
  1434. <div class="status-title">status</div>
  1435. <!--===================== EDIT HERE: REQUEST STATUSES ======================
  1436.  
  1437. REGULAR STATUS FORMAT:
  1438. <div class="status"><i class="ti ti-ICON-NAME"></i><span>TEXT</span></div>
  1439.  
  1440.  
  1441. TOGGLE STATUS FORMAT:
  1442. <div class="status ON"><i class="ti ti-toggle-RIGHT"></i><span>TEXT</span></div>
  1443.  
  1444. - for the toggle statuses: if you want a status that's off, change ON to OFF and RIGHT to LEFT
  1445.  
  1446. - CAPITALIZED text is what you change
  1447. - you can add as many of these as you like!
  1448. - make sure all your statuses are between the indicated lines
  1449.  
  1450. ======================== ALL STATUSES BELOW THIS LINE ===================-->
  1451. <div class="status"><i class="ti ti-calendar-dot"></i><span>updated dec 21st</span></div>
  1452. <div class="status"><i class="ti ti-bell-ringing-2"></i><span>update text</span></div>
  1453. <div class="status on"><i class="ti ti-toggle-right"></i><span>status on</span></div>
  1454. <div class="status off"><i class="ti ti-toggle-left"></i><span>status off</span></div>
  1455. </div><!-- // .req-status / ALL STATUSES ABOVE THIS LINE -->
  1456.  
  1457. <!--====================== EDIT HERE: REQUEST RULES ========================
  1458.  
  1459. RULES FORMAT:
  1460. <div class="rule"><i class="ti ti-ICON-NAME"></i><span>TEXT</span></div>
  1461.  
  1462. - CAPITALIZED text is what you change
  1463. - you can add as many of these as you like!
  1464. - make sure all your rules are below the rules title and above the indicated line
  1465.  
  1466. - if you don't want the rules here delete the line below ↓
  1467. =========================================================================-->
  1468. <div class="req-rules">
  1469. <div class="rules-title">rules</div>
  1470. <div class="rule"><i class="ti ti-checkbox"></i><span>here's a rule</span></div>
  1471. <div class="rule"><i class="ti ti-checkbox"></i><span>here's a rule</span></div>
  1472. <div class="rule"><i class="ti ti-square-x"></i><span>here's a rule</span></div>
  1473. <div class="rule"><i class="ti ti-square-x"></i><span>here's a rule</span></div>
  1474. </div><!-- // .req-rules / ALL RULES ABOVE THIS LINE -->
  1475.  
  1476. <div class="req-links">
  1477. <div class="links-title">links</div>
  1478. <!--====================== EDIT HERE: REQUEST LINKS ========================
  1479.  
  1480. LINKS FORMAT:
  1481. <a href="/LINKURL"><i class="ti ti-caret-right"></i><span>LINK NAME</span></a>
  1482.  
  1483. - CAPITALIZED text is what you change
  1484. - you can add as many of these as you like!
  1485. - make sure all your links are between the indicated lines
  1486.  
  1487. ========================= ALL LINKS BELOW THIS LINE =====================-->
  1488. <a href="/"><i class="ti ti-caret-right"></i><span>requests tag</span></a>
  1489. <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
  1490. <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
  1491. <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
  1492. </div><!-- // .req-links / ALL LINKS ABOVE THIS LINE -->
  1493. </div></div><!-- // .req-left -->
  1494.  
  1495. <div class="req-right">
  1496. <div class="req-title"><i class="ti ti-list-details"></i><b>requests</b></div>
  1497. <div class="req-tracking">
  1498. <div class="reqt-wrap progress">
  1499. <div class="reqt-title">in progress</div>
  1500. <div class="req-progress">
  1501. <!--=================== EDIT HERE: REQUESTS IN PROGRESS ====================
  1502.  
  1503. IN PROGRESS REQUESTS FORMAT:
  1504. <li><i class="ti ti-ICON-NAME"></i><span>REQUEST TEXT</span></li>
  1505.  
  1506. - CAPITALIZED text is what you change
  1507. - you can add as many of these as you like!
  1508. - make sure all your links are between the indicated lines
  1509.  
  1510. ======================= ALL REQUESTS BELOW THIS LINE ====================-->
  1511. <li><i class="ti ti-square-rounded"></i><span>request</span></li>
  1512. <li><i class="ti ti-square-rounded"></i><span>request</span></li>
  1513. <li><i class="ti ti-square-rounded"></i><span>request</span></li>
  1514. </div><!-- // .req-progress / ALL REQUESTS ABOVE --->
  1515. </div><!-- // .reqt-wrap.progress -->
  1516.  
  1517. <div class="reqt-wrap complete">
  1518. <div class="reqt-title">completed</div>
  1519. <div class="req-complete">
  1520. <!--=================== EDIT HERE: REQUESTS COMPLETED ======================
  1521.  
  1522. COMPLETED REQUESTS FORMAT:
  1523. <a href="/LINKURL"><i class="ti ti-ICON-NAME"></i><span>REQUEST TEXT</span></a>
  1524.  
  1525. - CAPITALIZED text is what you change
  1526. - you can add as many of these as you like!
  1527. - make sure all your links are between the indicated lines
  1528.  
  1529. ======================= ALL REQUESTS BELOW THIS LINE ====================-->
  1530. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1531. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1532. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1533. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1534. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1535. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1536. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1537. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1538. <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
  1539. </div><!-- // .req-complete / ALL REQUESTS ABOVE -->
  1540. </div><!-- // .reqt-wrap -->
  1541. </div><!-- // .req-tracking -->
  1542. <div class="req-askbox">
  1543. <div class="req-asktitle">have a question?</div>
  1544. <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="//tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe>
  1545. </div><!-- // .req-askbox -->
  1546. </div><!-- // .req-right -->
  1547. </div><!-- // .requests -->
  1548. </div><!-- // .requests-wrap -->
  1549.  
  1550.  
  1551. <!-- SIDEBAR -->
  1552. <div id="sidebar">
  1553.  
  1554. <div class="sidebar-top">
  1555. <div class="sb-top">
  1556. <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
  1557. <div class="sb-title" href="/">{Name}.txt</div>
  1558. </div>
  1559. <!--===================== EDIT HERE: SIDEBAR IMAGE =========================
  1560.  
  1561. SIDEBAR IMAGE FORMAT:
  1562. <div class="sb-img"><img src="IMAGEURL"></div>
  1563.  
  1564. - CAPITALIZED text is what you change
  1565. - replace the image url below, make sure the link is within the quotation marks ""
  1566.  
  1567. =========================================================================-->
  1568. <div class="sb-img"><img src="//64.media.tumblr.com/c4fd701ce3ef5797cf8a342d21e23c4a/cd457da01e6cbba5-4d/s2048x3072/226687274de043e2cb2570d5c7344d5b274d721d.png"></div>
  1569.  
  1570. <a class="main-title" href="/"><b>icons page</b></a>
  1571. <!--===================== EDIT HERE: SIDEBAR TEXT ==========================
  1572.  
  1573. - i recommend keeping this text relatively short
  1574. - links and bold text can be added!
  1575.  
  1576. - if you don't want this text section delete the line below ↓
  1577. =========================================================================-->
  1578. <div class="sb-text">
  1579. some text can go here! <a href="/">a link</a>. <b>bold text</b>.
  1580. </div><!-- // .sb-text -->
  1581.  
  1582. <!-- search bar -->
  1583. <div class="searchbar">
  1584. <i class="ti ti-search"></i>
  1585. <form class="search" action="javascript:return false">
  1586. <input type="text" class="query" placeholder="search blog . . .">
  1587. </form>
  1588. </div><!-- // .searchbar -->
  1589. </div><!-- // .sidebar-top -->
  1590.  
  1591. <div class="rules"><!-- rules -->
  1592. <div class="sb-top two">
  1593. <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
  1594. <div class="sb-title">rules</div>
  1595. <i id="sbtwo" class="ti ti-text-grammar"></i>
  1596. </div>
  1597. <div class="sb-rules">
  1598. <!--===================== EDIT HERE: SIDEBAR RULES =========================
  1599.  
  1600. RULES FORMAT:
  1601. <li><i class="ti ti-ICON-NAME"></i><span>RULES TEXT</span></li>
  1602.  
  1603. - CAPITALIZED text is what you can change
  1604. - you can add as many of these as you like, it will scroll
  1605.  
  1606. ======================== ALL RULES BELOW THIS LINE ======================-->
  1607. <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
  1608. <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
  1609. <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
  1610. <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
  1611. </div><!-- // .sb-rules - ALL RULES ABOVE THIS LINE -->
  1612. </div><!-- // .rules -->
  1613.  
  1614. </div><!-- // #sidebar -->
  1615.  
  1616. <div class="main-wrap">
  1617.  
  1618. <div class="section-header"><!-- SECTION HEADER -->
  1619. <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
  1620. <div class="sh-links one">
  1621. <a href="/" title="back to blog"><i class="ti ti-arrow-left"></i></a>
  1622. <a class="nolink"><i class="ti ti-arrow-right"></i></a>
  1623. <a class="smaller" href="" title="refresh"><i class="ti ti-reload"></i></a>
  1624. </div>
  1625. <div class="sh-titlewrap">
  1626. <li>
  1627. <img src="{PortraitURL-128}">
  1628. <div class="sh-title">{Name}.tumblr.com/icons</div>
  1629. </li>
  1630. <i class="ti ti-star"></i>
  1631. </div>
  1632. <div class="sh-links two">
  1633. <!--=================== EDIT HERE: SECTION HEADER LINKS ====================
  1634.  
  1635. LINKS FORMAT:
  1636. <a class="smaller" href="/LINKURL" title="LINK TITLE"><i class="ti ti-ICON-NAME"></i></a>
  1637.  
  1638. - CAPITALIZED text is what you can change
  1639.  
  1640. - if you don't want these to be links delete: href="/" title="link"
  1641.  
  1642. - example here: <a class="smaller"><i class="ti ti-plus"></i></a>
  1643.  
  1644. ======================== ALL LINKS BELOW THIS LINE ======================-->
  1645. <a class="smaller" href="/" title="link"><i class="ti ti-plus"></i></a>
  1646. <a class="smaller" href="/" title="link"><i class="ti ti-share-2"></i></a>
  1647. </div><!-- // .sh-links.two / ALL LINKS ABOVE THIS LINE -->
  1648. </div><!-- // .section-header -->
  1649.  
  1650. <div class="section-wrap">
  1651.  
  1652. <div class="sort"><!-- filters -->
  1653. <div class="sort-top">
  1654. <div class="sort-title">sort by</div>
  1655. <i class="ti ti-sort-descending"></i>
  1656. </div>
  1657. <!--========================== EDIT HERE: FILTERS ==========================
  1658.  
  1659. 1. FILTERBOX
  1660.  
  1661. - this is if you want to add an entire new filter section
  1662.  
  1663. FORMAT:
  1664. <div class="filterbox [three]">
  1665. <ul class="filter option-set exclusive" data-filter-group="group[3]">
  1666.  
  1667. <div class="filtersubtitle"><b>[filer section name]</b></div>
  1668.  
  1669. <a href="#" data-filter-value="" class="selected" id="allplus">
  1670. <span>all</span></a>
  1671.  
  1672. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1673. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1674. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1675.  
  1676. </ul>
  1677. </div>
  1678.  
  1679. 2. INDIVIDUAL FILTERS
  1680.  
  1681. - make sure each filter name is between <span></span>, example: <span>filter 1</span>
  1682.  
  1683. - if you want to change the filter values (f1, f2, etc.) you can! just make sure to keep the period before each value, example: .f1
  1684.  
  1685. FORMAT:
  1686. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1687.  
  1688. - [bracketed text] is what you can change, delete the brackets
  1689.  
  1690. ======================= ALL FILTERBOXES BELOW THIS LINE =================-->
  1691.  
  1692. <div class="filterbox one"><!-- filterbox one -->
  1693. <ul class="filter option-set exclusive" data-filter-group="group1">
  1694.  
  1695. <div class="filtersubtitle"><b>colors</b></div>
  1696.  
  1697. <a href="#" data-filter-value="" class="selected" id="allplus">
  1698. <span>all</span></a>
  1699.  
  1700. <a href="#" data-filter-value=".f1"><span>color 1</span></a>
  1701. <a href="#" data-filter-value=".f2"><span>color 2</span></a>
  1702. <a href="#" data-filter-value=".f3"><span>color 3</span></a>
  1703. <a href="#" data-filter-value=".f4"><span>color 4</span></a>
  1704.  
  1705. </ul><!-- // all filterbox one filters above this line -->
  1706. </div><!-- // .filterbox.one -->
  1707.  
  1708. <div class="filterbox two"><!-- filterbox two -->
  1709. <ul class="filter option-set exclusive" data-filter-group="group2">
  1710.  
  1711. <div class="filtersubtitle"><b>alphabetical</b></div>
  1712.  
  1713. <a href="#" data-filter-value="" class="selected">
  1714. <span>all</span></a>
  1715.  
  1716. <a href="#" data-filter-value=".ae"><span>a - e</span></a>
  1717. <a href="#" data-filter-value=".fj"><span>f - j</span></a>
  1718. <a href="#" data-filter-value=".ko"><span>k - o</span></a>
  1719. <a href="#" data-filter-value=".pt"><span>p - t</span></a>
  1720. <a href="#" data-filter-value=".uz"><span>u - z</span></a>
  1721.  
  1722. </ul><!-- // all filterbox two filters above this line -->
  1723. </div><!-- // .filterbox.two -->
  1724.  
  1725. <!--==================== ALL FILTERBOXES ABOVE THIS LINE ================-->
  1726. </div><!-- // .sort -->
  1727.  
  1728. <section><!-- section -->
  1729. <div class="icon-wrap">
  1730. <!--========================== EDIT HERE: ICONS ============================
  1731.  
  1732. GENERAL FORMAT:
  1733. <div class="icon FILTER VALUES">
  1734. <img src="IMAGEURL">
  1735. </div>
  1736.  
  1737. - CAPITALIZED text is what you change
  1738. - make sure each filter value is separated by a single space
  1739.  
  1740. ========================= ALL ICONS BELOW THIS LINE =====================-->
  1741. <div class="icon f1 f3 ae ko uz">
  1742. <img src="//i.imgur.com/WT8b1PB.png">
  1743. </div>
  1744.  
  1745. <div class="icon f3 f4 ae fj pt uz">
  1746. <img src="//i.imgur.com/MWUqSqm.png">
  1747. </div>
  1748.  
  1749. <div class="icon f2 f4 fj ko pt">
  1750. <img src="//i.imgur.com/yW6CU8U.png">
  1751. </div>
  1752.  
  1753. <div class="icon f4 fj ko pt">
  1754. <img src="//i.imgur.com/rYQ0c6c.png">
  1755. </div>
  1756.  
  1757. <div class="icon f1 f2 f4 ae fj pt">
  1758. <img src="//i.imgur.com/bXRP6Im.png">
  1759. </div>
  1760.  
  1761. <div class="icon f3 f4 fj fj pt">
  1762. <img src="//i.imgur.com/YJAF2dQ.png">
  1763. </div>
  1764.  
  1765. <div class="icon f2 f3 ae ko pt">
  1766. <img src="//i.imgur.com/WKJTnvQ.png">
  1767. </div>
  1768.  
  1769. <div class="icon f1 f4 fj ko fj">
  1770. <img src="//i.imgur.com/2V4oeru.png">
  1771. </div>
  1772.  
  1773. <div class="icon f1 f4 fj ko fj">
  1774. <img src="//i.imgur.com/ejyElQW.png">
  1775. </div>
  1776.  
  1777. <div class="icon f1 f4 fj ko fj">
  1778. <img src="//i.imgur.com/lNMazbY.png">
  1779. </div>
  1780.  
  1781. <div class="icon f1 f4 fj ko fj">
  1782. <img src="//i.imgur.com/1NpmxHi.png">
  1783. </div>
  1784.  
  1785. <div class="icon f1 f4 fj ko fj">
  1786. <img src="//i.imgur.com/aUFCu8Z.png">
  1787. </div>
  1788.  
  1789. <!--===================== ALL ICONS ABOVE THIS LINE =====================-->
  1790. </div><!-- // .icon-wrap -->
  1791.  
  1792. </div><!-- // .section-wrap -->
  1793. </div><!-- // .main-wrap -->
  1794.  
  1795. </section><!-- // section -->
  1796.  
  1797. </main><!-- end of main container -->
  1798.  
  1799. <script>
  1800.  
  1801. // tooltips
  1802. tippy('[title]', {
  1803. theme: 'custom',
  1804. arrow: false,
  1805. followCursor: true,
  1806. delay: 100,
  1807. placement: 'top',
  1808. offset: "0, 5",
  1809. zIndex: 9999999999,
  1810. maxWidth: 400,
  1811.  
  1812. content(reference) {
  1813. const title = reference.getAttribute('title');
  1814. reference.removeAttribute('title');
  1815. return title;
  1816. },
  1817. });
  1818.  
  1819. // sidebar popup
  1820. $(document).ready(function(){
  1821. $('a#sidebarbutton').click(function(){
  1822. $('body').toggleClass('sidebar-click');
  1823. $('a#sidebarbutton i').toggleClass("ti-layout-sidebar-left-expand-filled");
  1824. });
  1825. });
  1826.  
  1827. //filters
  1828. $(document).ready(function() {
  1829. var $container = $(".icon-wrap"); // the container with all the elements to filter inside
  1830. var filters = {}; //should be outside the scope of the filtering function
  1831. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  1832. var $grid = $container.isotope({
  1833. itemSelector: ".icon", // the elements to filter
  1834. masonry: {
  1835. columnWidth:85,
  1836. gutter: 10,
  1837. fitWidth: true,
  1838. horizontalOrder: true
  1839. }
  1840. });
  1841. $('.icon-wrap').isotope({
  1842. transitionDuration: '0.8s',
  1843. hiddenStyle: {
  1844. opacity: 0
  1845. },
  1846. visibleStyle: {
  1847. opacity: 1
  1848. }
  1849. })
  1850. $(".option-set a").click(function(e) {
  1851. var $this = $(this); // cache the clicked link
  1852. var filterAttr = "data-filter-value";
  1853. var filterValue = $this.attr(filterAttr); // cache the filter
  1854. var $optionSet = $this.parents(".option-set"); // cache the parent element
  1855. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  1856. var filterGroup = filters[group];
  1857. if (!filterGroup) {
  1858. filterGroup = filters[group] = [];
  1859. }
  1860. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  1861. var activeClass = "selected", // the class for active links
  1862. exclClass = "exclusive"; // the class for exclusive groups
  1863. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  1864. var comboFilter = getComboFilter(filters);
  1865. $grid.isotope({
  1866. filter: comboFilter
  1867. });
  1868. $this.toggleClass(activeClass);
  1869. e.preventDefault();
  1870. });
  1871. });
  1872.  
  1873. // requests popup
  1874. $(document).ready(function(){
  1875. $('a#requestsbutton').click(function(){
  1876. $('body').toggleClass('requests-click');
  1877. });
  1878. });
  1879.  
  1880. // tumblr controls
  1881. $(document).ready(function(){
  1882. $('a#controlsbutton').click(function(){
  1883. $('body').toggleClass('controls-click');
  1884. });
  1885. });
  1886.  
  1887. // tab click
  1888. $(document).ready(function(){
  1889. $('.moreinfo').hide();
  1890. $('.tab.info').click(function() {
  1891. $('tab').toggleClass('more-click');
  1892. $(this).closest('.folder').find('.moreinfo').slideToggle(0);
  1893. $(this).toggleClass('more-click');
  1894. return false;
  1895. });
  1896. });
  1897.  
  1898. // searchbar
  1899. $(document).ready(function(){
  1900. $('a#searchbutton').click(function(){
  1901. $('body').toggleClass('search-click');
  1902. });
  1903. });
  1904. $(document).ready(function(){
  1905. $('.search').submit(function(event){
  1906. var value = $('input:first').val();
  1907. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  1908. });
  1909. });
  1910.  
  1911. // scroll to top
  1912. $(document).ready(function(){
  1913. $('a#totop').click(function(){
  1914. $('html, body').animate({scrollTop : 0},800);
  1915. return false;
  1916. });
  1917. });
  1918.  
  1919. var mybutton = document.getElementById("totop");
  1920. window.onscroll = function() {scrollFunction()};
  1921.  
  1922. function scrollFunction() {
  1923. if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
  1924. mybutton.style.display = "flex";
  1925. } else {
  1926. mybutton.style.display = "none";
  1927. }
  1928. }
  1929.  
  1930. // day/night mode
  1931. const toggle = document.getElementById("theme-toggle");
  1932.  
  1933. toggle.onclick = function () {
  1934. // add class to html and make transition snappy
  1935. document.documentElement.classList.add("theme-transition");
  1936. // alright lets retrive the info from data-theme
  1937. let currentTheme = document.documentElement.getAttribute("data-theme");
  1938. // if it's dark already, let's go into the light
  1939. let targetTheme = "light";
  1940. // but if it is light let's toggle dark mode
  1941. if (currentTheme === "light") {
  1942. targetTheme = "dark";
  1943. }
  1944. // ok now that theme has been toggled, get rid of snappy transition
  1945. window.setTimeout(function () {
  1946. document.documentElement.classList.remove("theme-transition");
  1947. }, 50);
  1948. // we're going to save our theme preference now
  1949. document.documentElement.setAttribute("data-theme", targetTheme);
  1950. localStorage.setItem("theme", targetTheme);
  1951. };
  1952.  
  1953. </script>
  1954.  
  1955. </body>
  1956. </html>
  1957.  
Advertisement
Add Comment
Please, Sign In to add comment