nicolas-sage

custom page 06

Sep 22nd, 2024
138
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.79 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 06 BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20. customization guide: https://phantomcodes.tumblr.com/samanthaguide
  21.  
  22. CREDITS:
  23. - tabler icons / https://tabler-icons.io/
  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=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" />
  38.  
  39. <!---- ICONS ---->
  40. <script src="https://unpkg.com/phosphor-icons"></script>
  41. <script src="https://unpkg.com/[email protected]"></script>
  42. <script src="//pull.cappuccicons.com/cpf.js"></script>
  43.  
  44. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  45. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  46.  
  47. <!---- TOOLTIPS ---->
  48. <script src="https://unpkg.com/popper.js@1"></script>
  49. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  50.  
  51. <!--- day/night --->
  52. <script>
  53. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  54. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  55. </script>
  56.  
  57. <!------- CSS -------->
  58. <style>
  59.  
  60. /* theme options - common */
  61. :root {
  62.  
  63. /*--- EDIT HERE: CORNERS & FONT STYLE ---*/
  64. --Corners:5px;
  65. --BodyFont:'Quicksand';
  66. --TitleFont:'Montserrat';
  67. --FontSize:15px;
  68.  
  69. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .3);
  70. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  71. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  72. }
  73.  
  74. /* theme options - day/night */
  75. :root, html[data-theme='light'] {
  76. --LightOn: flex;
  77. --LightOff: none;
  78.  
  79. /*--- EDIT HERE: DAYMODE COLORS ---*/
  80. --ColorBackground:#eee;
  81. --ColorPosts:#f8f8f8;
  82. --ColorSidebar:#f2f2f2;
  83. --ColorBorders:#e2e2e2;
  84. --ColorTitle:#333;
  85. --ColorText:#5a5a5a;
  86. --ColorAccentOne:#5e3592;
  87. --ColorAccentTwo:#ad638d;
  88. --ColorAccentText:#fff;
  89. }
  90. html[data-theme='dark'] {
  91. --LightOn: none;
  92. --LightOff: flex;
  93.  
  94. /*--- EDIT HERE: NIGHTMODE COLORS ---*/
  95. --ColorBackground:#333;
  96. --ColorPosts:#404040;
  97. --ColorSidebar:#3a3a3a;
  98. --ColorBorders:#4a4a4a;
  99. --ColorTitle:#fafafa;
  100. --ColorText:#dadada;
  101. --ColorAccentOne:#d5b5ff;
  102. --ColorAccentTwo:#ffcbe2;
  103. --ColorAccentText:#fff;
  104. }
  105. html.theme-transition,
  106. html.theme-transition *,
  107. html.theme-transition *:before,
  108. html.theme-transition *:after {
  109. transition: 0s !important;
  110. transition-delay: 0 !important;
  111. }
  112.  
  113. .light-on{
  114. display: var(--LightOn);
  115. }
  116. .light-off{
  117. display: var(--LightOff);
  118. }
  119.  
  120. /*--- TOOLTIPS ---*/
  121.  
  122. .tippy-tooltip.custom-theme {
  123. position:relative;
  124. font-size:.95em;
  125. font-weight:500;
  126. color:var(--ColorAccentText);
  127. text-shadow:0 0 1px rgba(0,0,0,.1);
  128. text-transform:lowercase;
  129. text-align:center;
  130. background:transparent;
  131. backdrop-filter:blur(50px);
  132. border-radius:var(--Corners);
  133. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  134. }
  135. .tippy-tooltip.custom-theme:after {
  136. content:'';
  137. position:absolute;
  138. top:0;
  139. left:0;
  140. width:100%;
  141. height:100%;
  142. opacity:.75;
  143. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  144. border-radius:var(--Corners);
  145. z-index:-1;
  146. }
  147.  
  148. /*--- SCROLLBAR ---*/
  149. ::-webkit-scrollbar {
  150. width:4px;
  151. height:4px;
  152. background:var(--ColorBackground);
  153. }
  154. ::-webkit-scrollbar-track {
  155. background:var(--ColorBackground);
  156. border-radius: 5px;
  157. }
  158. ::-webkit-scrollbar-thumb {
  159. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  160. border-radius: 5px;
  161. }
  162.  
  163. /*--- TEXT SELECTION ---*/
  164. ::-moz-selection { /* Code for Firefox */
  165. color:var(--ColorPosts);
  166. background:var(--ColorAccentOne);
  167. }
  168.  
  169. ::selection {
  170. color:var(--ColorPosts);
  171. background:var(--ColorAccentOne);
  172. }
  173.  
  174. * {box-sizing:border-box;}
  175.  
  176. body {
  177. font-family:var(--BodyFont), sans-serif;
  178. font-size:var(--FontSize);
  179. color:var(--ColorText);
  180. line-height:150%;
  181. word-wrap:break-word;
  182. letter-spacing:.04em;
  183. margin:0;
  184. background-color:var(--ColorBackground);
  185. }
  186. body {
  187. opacity:1;
  188. transition:.75s opacity;
  189. }
  190.  
  191. body.fade-out {
  192. opacity:0;
  193. transition:none;
  194. }
  195. html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
  196.  
  197. a {
  198. color:var(--ColorAccentOne);
  199. text-decoration:none;
  200. -webkit-transition: all 0.4s;
  201. -moz-transition: all 0.4s;
  202. -ms-transition: all 0.4s;
  203. -o-transition: all 0.4s;
  204. transition: all 0.4s;
  205. }
  206.  
  207. a:hover {
  208. color:var(--ColorAccentThree);
  209. -webkit-transition: all 0.4s;
  210. -moz-transition: all 0.4s;
  211. -ms-transition: all 0.4s;
  212. -o-transition: all 0.4s;
  213. transition: all 0.4s;
  214. }
  215.  
  216. blockquote {
  217. border-left:1.5px solid var(--ColorBorders);
  218. padding-left:.75rem;
  219. margin-left:1rem;
  220. }
  221. blockquote p {padding:0!important;}
  222.  
  223. ul {list-style-type:circle;}
  224. ol {list-style-type:decimal-leading-zero; margin:0;}
  225. li::marker {color:var(--ColorAccentOne);}
  226.  
  227. small {font-size:.95em;}
  228. big {font-size:1.1em;}
  229.  
  230. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  231. h1 a {color:var(--ColorTitle);}
  232. h1 a:hover {color:var(--ColorAccentThree);}
  233. h2 {font-size:1.25em; color:var(--ColorTitle);}
  234. h3 {font-size:1.15em; color:var(--ColorTitle);}
  235. h4 {font-size:1.1em; color:var(--ColorTitle); margin-bottom:1rem;}
  236. h5 {font-size:1.05em; color:var(--ColorTitle);}
  237. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  238.  
  239. button {font-size:1em;}
  240.  
  241. hr {
  242. height:1px;
  243. border:none;
  244. box-shadow:none;
  245. background:var(--ColorBorders);
  246. }
  247.  
  248. pre {
  249. word-wrap:break-word!important;
  250. white-space:pre-wrap;
  251. }
  252.  
  253. b, strong {
  254. color:var(--ColorTitle);
  255. font-weight:800;
  256. }
  257.  
  258. b a:hover {
  259. color:var(--ColorAccentThree);
  260. -webkit-transition: all 0.4s;
  261. -moz-transition: all 0.4s;
  262. -ms-transition: all 0.4s;
  263. -o-transition: all 0.4s;
  264. transition: all 0.4s;
  265. }
  266.  
  267. /* common link effects */
  268. .moreinfotext a {
  269. display:inline-block;
  270. position:relative;
  271. }
  272. .moreinfotext a:after {
  273. content: '';
  274. position:absolute;
  275. bottom:0;
  276. left:0;
  277. width:100%;
  278. height:1.5px;
  279. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  280. transform:scaleX(0);
  281. transform-origin:center;
  282. transition:transform 0.4s ease-out;
  283. }
  284. .moreinfotext a:hover:after {
  285. transform:scaleX(1);
  286. transform-origin:center;
  287. }
  288.  
  289. /*--- HEADER ---*/
  290. header {
  291. position:fixed;
  292. top:0;
  293. left:0;
  294. right:0;
  295. width:100%;
  296. height:3rem;
  297. padding:0 1rem 0 1rem;
  298. display:flex;
  299. justify-content:space-between;
  300. align-items:center;
  301. gap:1rem;
  302. background:var(--ColorPosts);
  303. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  304. z-index:99999;
  305. }
  306.  
  307. .header-left {
  308. display:flex;
  309. justify-content:flex-start;
  310. align-items:center;
  311. gap:.5rem;
  312. }
  313. a.htitle {
  314. display:flex;
  315. justify-content:flex-start;
  316. align-items:center;
  317. gap:.5rem;
  318. }
  319. .himg {
  320. width:2.15rem;
  321. height:2.15rem;
  322. padding:2.5px;
  323. display:flex;
  324. justify-content:center;
  325. align-items:center;
  326. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  327. border-radius:100%;
  328. }
  329. .himg img {
  330. width:100%;
  331. height:100%;
  332. border-radius:100%;
  333. }
  334. a.htitle b {
  335. font-family:var(--TitleFont), sans-serif;
  336. font-size:1.1em;
  337. font-weight:bold;
  338. white-space:nowrap;
  339. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  340. -webkit-background-clip:text;
  341. -webkit-text-fill-color:transparent;
  342. }
  343.  
  344. a.mainlink {
  345. position:relative;
  346. font-weight:500;
  347. color:var(--ColorTitle);
  348. text-shadow:1px 1px var(--ColorOpaquePosts);
  349. white-space:nowrap;
  350. line-height:120%;
  351. display:inline-block;
  352. position:relative;
  353. }
  354. a.mainlink:after {
  355. content: '';
  356. position:absolute;
  357. bottom:0;
  358. left:0;
  359. width:100%;
  360. height:50%;
  361. opacity:.5;
  362. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  363. transform:scaleX(0);
  364. transform-origin:right;
  365. transition:transform 0.5s ease-out;
  366. z-index:-1;
  367. }
  368. a.mainlink:hover:after {
  369. transform:scaleX(1);
  370. transform-origin:left;
  371. }
  372.  
  373. .header-right {
  374. display:flex;
  375. justify-content:flex-ends;
  376. align-items:center;
  377. gap:.5rem;
  378. }
  379.  
  380. /*-- sidebar buttons --*/
  381. a#sidebarbutton {
  382. display:none;
  383. justify-content:center;
  384. align-items:center;
  385. cursor:help;
  386. }
  387. a#sidebarbutton:hover {transform:scale(1.05);}
  388. a#sidebarbutton i {
  389. font-size:1.3em;
  390. color:var(--ColorTitle);
  391. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  392. background-clip:text;
  393. -webkit-background-clip:text;
  394. transition:ease-in-out .4s;
  395. }
  396. a#sidebarbutton:hover i, body.sidebar-click a#sidebarbutton i {color:transparent;}
  397.  
  398. /* SCROLL TO TOP */
  399. a#totop {
  400. display:none;
  401. justify-content:center;
  402. align-items:center;
  403. cursor:help;
  404. }
  405. a#totop i {
  406. font-size:1.4em;
  407. color:var(--ColorTitle);
  408. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  409. background-clip:text;
  410. -webkit-background-clip:text;
  411. transition:ease-in-out .4s;
  412. }
  413. a#totop:hover i {
  414. color:transparent;
  415. -webkit-animation-duration: 2.5s;
  416. animation-duration: 2.5s;
  417. -webkit-animation-fill-mode: both;
  418. animation-fill-mode: both;
  419. -webkit-animation-timing-function: ease-in-out;
  420. animation-timing-function: ease-in-out;
  421. animation-iteration-count:1;
  422. -webkit-animation-iteration-count:1;
  423. animation-name:totop;
  424. -moz-animation-name:totop;
  425. }
  426.  
  427. @keyframes totop {
  428. 0% {
  429. -webkit-transform: translateY(0px);
  430. -ms-transform: translateY(0px);
  431. transform: translateY(0px)
  432. }
  433. 10% {
  434. -webkit-transform: translateY(-3px);
  435. -ms-transform: translateY(-3px);
  436. transform: translateY(-3px)
  437. }
  438. 20% {
  439. -webkit-transform: translateY(0px);
  440. -ms-transform: translateY(0px);
  441. transform: translateY(0px)
  442. }
  443. 30% {
  444. -webkit-transform: translateY(-3px);
  445. -ms-transform: translateY(-3px);
  446. transform: translateY(-3px)
  447. }
  448. 40% {
  449. -webkit-transform: translateY(0px);
  450. -ms-transform: translateY(0px);
  451. transform: translateY(0px)
  452. }
  453. 50% {
  454. -webkit-transform: translateY(0px);
  455. -ms-transform: translateY(0px);
  456. transform: translateY(0px)
  457. }
  458. 60% {
  459. -webkit-transform: translateY(0px);
  460. -ms-transform: translateY(0px);
  461. transform: translateY(0px)
  462. }
  463. 70% {
  464. -webkit-transform: translateY(-3px);
  465. -ms-transform: translateY(-3px);
  466. transform: translateY(-3px)
  467. }
  468. 80% {
  469. -webkit-transform: translateY(0px);
  470. -ms-transform: translateY(0px);
  471. transform: translateY(0px)
  472. }
  473. 90% {
  474. -webkit-transform: translateY(-3px);
  475. -ms-transform: translateY(-3px);
  476. transform: translateY(-3px)
  477. }
  478. 100% {
  479. -webkit-transform: translateY(0px);
  480. -ms-transform: translateY(0px);
  481. transform: translateY(0px)
  482. }
  483. }
  484.  
  485. /* DAY/NIGHT */
  486. button#theme-toggle {
  487. position:relative;
  488. outline:none;
  489. border:none;
  490. background:none;
  491. padding:0;
  492. display:flex;
  493. justify-content:center;
  494. align-items:center;
  495. cursor:help;
  496. }
  497.  
  498. button#theme-toggle span {
  499. justify-content:center;
  500. align-items:center;
  501. -webkit-transition: all 0.4s;
  502. -moz-transition: all 0.4s;
  503. -ms-transition: all 0.4s;
  504. -o-transition: all 0.4s;
  505. transition: all 0.4s;
  506. }
  507.  
  508. button#theme-toggle i {
  509. font-size:1.3em;
  510. color:var(--ColorTitle);
  511. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  512. background-clip:text;
  513. -webkit-background-clip:text;
  514. transition:ease-in-out .4s;
  515. }
  516. button#theme-toggle:hover i {
  517. color:transparent;
  518. -webkit-animation-duration: .75s;
  519. animation-duration: .75s;
  520. -webkit-animation-fill-mode: both;
  521. animation-fill-mode: both;
  522. -webkit-animation-timing-function: ease-in-out;
  523. animation-timing-function: ease-in-out;
  524. animation-iteration-count:1;
  525. -webkit-animation-iteration-count:1;
  526. animation-name:daynight;
  527. -moz-animation-name:daynight;
  528. }
  529.  
  530. @keyframes daynight {
  531. 50% {
  532. -webkit-transform: scaleX(-1);
  533. -ms-transform: scaleX(-1);
  534. transform: scaleX(-1);
  535. }
  536. }
  537.  
  538. /* TUMBLR CONTROLS */
  539. a#controlsbutton {
  540. display:flex;
  541. justify-content:center;
  542. align-items:center;
  543. cursor:help;
  544. }
  545. a#controlsbutton i {
  546. font-size:1.35em;
  547. color:var(--ColorTitle);
  548. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  549. background-clip:text;
  550. -webkit-background-clip:text;
  551. transition:ease-in-out .4s;
  552. }
  553. a#controlsbutton:hover i {
  554. color:transparent;
  555. -webkit-animation-duration: 1.5s;
  556. animation-duration: 1.5s;
  557. -webkit-animation-fill-mode: both;
  558. animation-fill-mode: both;
  559. -webkit-animation-timing-function: ease-in-out;
  560. animation-timing-function: ease-in-out;
  561. animation-iteration-count:1;
  562. -webkit-animation-iteration-count:1;
  563. animation-name:tumblrcontrols;
  564. -moz-animation-name:tumblrcontrols;
  565. }
  566. body.controls-click a#controlsbutton i {color:transparent;}
  567.  
  568. @keyframes tumblrcontrols {
  569. 45% {
  570. -webkit-transform: rotate(180deg);
  571. -ms-transform: rotate(180deg);
  572. transform: rotate(180deg);
  573. }
  574. 55% {
  575. -webkit-transform: rotate(180deg);
  576. -ms-transform: rotate(180deg);
  577. transform: rotate(180deg);
  578. }
  579. 100% {
  580. -webkit-transform: rotate(360deg);
  581. -ms-transform: rotate(360deg);
  582. transform: rotate(360deg);
  583. }
  584. }
  585.  
  586. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  587. transform:scale(.75);
  588. margin-top:2rem;
  589. opacity:0;
  590. visibility:hidden;
  591. z-index:999999999!important;
  592. }
  593.  
  594. body.controls-click iframe.tmblr-iframe {
  595. opacity:1.0;
  596. visibility:visible;
  597. -webkit-transition: all 0.5s;
  598. -moz-transition: all 0.5s;
  599. -ms-transition: all 0.5s;
  600. -o-transition: all 0.5s;
  601. transition: all 0.5s;
  602. }
  603.  
  604. /*--- CREDIT: DO NOT TOUCH ---*/
  605. a.credit {
  606. display:flex;
  607. justify-content:center;
  608. align-items:center;
  609. z-index:99999;
  610. }
  611. a.credit i {
  612. font-size:1.4em;
  613. color:var(--ColorTitle);
  614. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  615. background-clip:text;
  616. -webkit-background-clip:text;
  617. transition:ease-in-out .4s;
  618. }
  619. a.credit:hover i {
  620. color:transparent;
  621. -webkit-animation-duration: 2s;
  622. animation-duration: 2s;
  623. -webkit-animation-fill-mode: both;
  624. animation-fill-mode: both;
  625. -webkit-animation-timing-function: ease-in-out;
  626. animation-timing-function: ease-in-out;
  627. animation-iteration-count:infinite;
  628. -webkit-animation-iteration-count:infinite;
  629. animation-name: bounce;
  630. -moz-animation-name: bounce;
  631. }
  632.  
  633. @keyframes bounce {
  634. 0% {
  635. -webkit-transform: translateY(0px);
  636. -ms-transform: translateY(0px);
  637. transform: translateY(0px)
  638. }
  639. 25% {
  640. -webkit-transform: translateY(-3px);
  641. -ms-transform: translateY(-3px);
  642. transform: translateY(-3px)
  643. }
  644. 50% {
  645. -webkit-transform: translateY(0px);
  646. -ms-transform: translateY(0px);
  647. transform: translateY(0px)
  648. }
  649. 75% {
  650. -webkit-transform: translateY(-3px);
  651. -ms-transform: translateY(-3px);
  652. transform: translateY(-3px)
  653. }
  654. 100% {
  655. -webkit-transform: translateY(0px);
  656. -ms-transform: translateY(0px);
  657. transform: translateY(0px)
  658. }
  659. }
  660.  
  661. /* MAIN CONTENT */
  662.  
  663. main {
  664. width:100%;
  665. display:flex;
  666. justify-content:center;
  667. }
  668.  
  669. section {
  670. width:100%;
  671. padding:4rem 1rem 1rem calc(250px + 3rem);
  672. display:flex;
  673. justify-content:center;
  674. }
  675. .icon-wrap {}
  676.  
  677. /*--- SIDEBAR ---*/
  678. .sidebar {
  679. position:fixed;
  680. top:3rem;
  681. left:0;
  682. bottom:0;
  683. width:calc(250px + 2rem);
  684. height:calc(100vh - 3rem);
  685. overflow-y:auto;
  686. padding:1rem 1rem .5rem 1rem;
  687. display:flex;
  688. flex-direction:column;
  689. align-items:center;
  690. gap:.75rem;
  691. background:var(--ColorSidebar);
  692. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  693. z-index:999;
  694. }
  695. .sidebar::-webkit-scrollbar {
  696. width:1.5px;
  697. height:1.5px;
  698. background:transparent;
  699. }
  700. .sidebar::-webkit-scrollbar-track {
  701. margin-top:2px;
  702. margin-bottom:2px;
  703. background:transparent;
  704. }
  705. .sidebar::-webkit-scrollbar-thumb {
  706. background:var(--ColorOpaqueAccentOne);
  707. border-radius:none;
  708. }
  709.  
  710. .sidebar-top {
  711. width:100%;
  712. display:flex;
  713. flex-direction:column;
  714. background:var(--ColorPosts);
  715. border-radius:var(--Corners);
  716. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  717. }
  718. .sb-img {
  719. position:relative;
  720. width:100%;
  721. max-height:200px;
  722. display:flex;
  723. justify-content:center;
  724. align-items:center;
  725. }
  726. .sb-img img {
  727. width:100%;
  728. height:100%;
  729. object-fit:cover;
  730. border-radius:var(--Corners) var(--Corners) 0 0;
  731. }
  732.  
  733. a.main-title {
  734. width:fit-content;
  735. line-height:130%;
  736. padding:.5rem;
  737. display:flex;
  738. flex-direction:column;
  739. }
  740. a.main-title b {
  741. font-family:var(--TitleFont), sans-serif;
  742. font-size:1em;
  743. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  744. -webkit-background-clip:text;
  745. -webkit-text-fill-color:transparent;
  746. }
  747. a.main-title i {
  748. font-size:.95em;
  749. font-style:normal;
  750. color:var(--ColorText);
  751. transition:ease-in-out .4s;
  752. }
  753. a.main-title:hover i {color:var(--ColorTitle);}
  754.  
  755. /* search bar */
  756. .searchbar {
  757. width:100%;
  758. padding:.5rem;
  759. display:flex;
  760. justify-content:flex-start;
  761. align-items:center;
  762. gap:.25rem;
  763. background:var(--ColorBackground);
  764. box-shadow:inset 2px -2px 4px var(--ColorPosts);
  765. border-radius:0 0 var(--Corners) var(--Corners);
  766. }
  767. .searchbar i {
  768. font-size:1.1em;
  769. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  770. -webkit-background-clip:text;
  771. -webkit-text-fill-color:transparent;
  772. }
  773. .search {
  774. width:100%;
  775. }
  776. .search .query {
  777. border:0;
  778. outline:0;
  779. font-family:var(--BodyFont), sans-serif;
  780. width:100%;
  781. font-size:.975em;
  782. font-weight:normal;
  783. color:var(--ColorText);
  784. text-transform:lowercase;
  785. letter-spacing:.04rem;
  786. line-height:120%;
  787. word-wrap:break-word;
  788. background:transparent;
  789. }
  790.  
  791. .search .query::-webkit-input-placeholder {color:inherit; opacity:.85;}
  792. .search .query:-moz-placeholder {color:inherit; opacity:.85;}
  793. .search .query::-moz-placeholder {color:inherit; opacity:.85;}
  794. .search .query:-ms-input-placeholder {color:inherit; opacity:.85;}
  795.  
  796. input:focus::-webkit-input-placeholder {color:transparent; text-shadow:none;}
  797. input:focus:-moz-placeholder {color:transparent; text-shadow:none;}
  798. input:focus::-moz-placeholder {color:transparent; text-shadow:none;}
  799. input:focus:-ms-input-placeholder {color:transparent; text-shadow:none;}
  800.  
  801. /* sidebar titles */
  802. .sb-title {
  803. position:relative;
  804. width:100%;
  805. line-height:130%;
  806. display:flex;
  807. justify-content:space-between;
  808. align-items:center;
  809. gap:1rem;
  810. padding:.5rem;
  811. border-radius:var(--Corners) var(--Corners) 0 0;
  812. z-index:1;
  813. }
  814. .sb-title:after {
  815. content:'';
  816. position:absolute;
  817. top:0;
  818. left:0;
  819. width:100%;
  820. height:100%;
  821. opacity:.75;
  822. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  823. border-radius:var(--Corners) var(--Corners) 0 0;
  824. z-index:-1;
  825. }
  826. .sb-title b {
  827. color:var(--ColorAccentText);
  828. text-shadow:0 1px rgba(0,0,0,.1);
  829. }
  830. .sb-title i {
  831. font-size:1.2em;
  832. color:var(--ColorAccentText);
  833. text-shadow:0 1px rgba(0,0,0,.1);
  834. }
  835.  
  836. /*--- RULES ---*/
  837. .rules {
  838. width:100%;
  839. display:flex;
  840. flex-direction:column;
  841. background:var(--ColorPosts);
  842. border-radius:var(--Corners);
  843. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  844. }
  845. .sb-rules {
  846. width:100%;
  847. padding:.5rem;
  848. display:flex;
  849. flex-direction:column;
  850. gap:.35rem;
  851. }
  852. .sb-rules li {
  853. line-height:120%;
  854. display:flex;
  855. justify-content:flex-start;
  856. align-items:flex-start;
  857. gap:.35rem;
  858. }
  859. .sb-rules i {
  860. font-size:1.125em;
  861. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  862. -webkit-background-clip:text;
  863. -webkit-text-fill-color:transparent;
  864. }
  865.  
  866. /*--- FILTERS ---*/
  867. .sort {
  868. width:100%;
  869. background:var(--ColorPosts);
  870. border-radius:var(--Corners);
  871. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  872. }
  873.  
  874. .filtersubtitle {width:100%; margin-bottom:.25rem;}
  875. .filtersubtitle b {
  876. white-space:nowrap;
  877. border-bottom:1.5px solid var(--ColorBorders);
  878. }
  879.  
  880. /* filterboxes */
  881. .filterbox ul {
  882. width:100%;
  883. margin:0;
  884. padding:.5rem;
  885. display:flex;
  886. flex-wrap:wrap;
  887. gap:.15rem .75rem;
  888. }
  889. .filterbox.two ul {gap:.15rem 1rem; border-top:1px solid var(--ColorBorders);}
  890.  
  891. .filterbox a {position:relative; z-index:1;}
  892. .filterbox a:after {
  893. content:'';
  894. position:absolute;
  895. bottom:2px;
  896. left:0;
  897. width:100%;
  898. height:.55rem;
  899. opacity:0;
  900. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  901. z-index:-1;
  902. -webkit-transition: all 0.4s;
  903. -moz-transition: all 0.4s;
  904. -ms-transition: all 0.4s;
  905. -o-transition: all 0.4s;
  906. transition: all 0.4s;
  907. }
  908. .filterbox a:hover:after {opacity:.5;}
  909. .filterbox a.selected:after {opacity:.5;}
  910.  
  911. .filterbox span {
  912. font-size:.95em;
  913. font-weight:normal;
  914. color:var(--ColorText);
  915. text-shadow:1px 1px var(--ColorOpaquePosts);
  916. line-height:100%;
  917. -webkit-transition: all 0.4s;
  918. -moz-transition: all 0.4s;
  919. -ms-transition: all 0.4s;
  920. -o-transition: all 0.4s;
  921. transition: all 0.4s;
  922. }
  923. .filterbox a:hover span {color:var(--ColorTitle);}
  924. .filterbox a.selected span {font-weight:bold; color:var(--ColorTitle);}
  925.  
  926. /*--- REQUEST STATUS ---*/
  927. .status {
  928. width:100%;
  929. display:flex;
  930. flex-direction:column;
  931. background:var(--ColorPosts);
  932. border-radius:var(--Corners);
  933. box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
  934. }
  935. .sb-status {
  936. width:100%;
  937. padding:.5rem;
  938. display:flex;
  939. flex-direction:column;
  940. gap:.35rem;
  941. }
  942. .sb-status li {
  943. line-height:120%;
  944. display:flex;
  945. justify-content:flex-start;
  946. align-items:flex-start;
  947. gap:.35rem;
  948. }
  949. .sb-status i {font-size:1.25em;}
  950. .sb-status li.on i {
  951. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  952. -webkit-background-clip:text;
  953. -webkit-text-fill-color:transparent;
  954. }
  955. .sb-status li.off i {color:var(--ColorText); opacity:.3;}
  956.  
  957. /*--- ICONS ---*/
  958. .icon {
  959. width:85px;
  960. height:85px;
  961. margin-bottom:10px;
  962. display:flex;
  963. justify-content:center;
  964. align-items:center;
  965. }
  966. .icon img {
  967. width:100%;
  968. height:100%;
  969. object-fit:cover;
  970. border-radius:var(--Corners);
  971. }
  972.  
  973. /*---- RESPONSIVENESS ---*/
  974. @media only screen and (max-width: 750px) {
  975. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none!important;}
  976. tumblr_controls, .tmblr-iframe{display:none!important;}
  977.  
  978. a.htitle {display:none;}
  979.  
  980. a#sidebarbutton {display:flex;}
  981. .sidebar {position:fixed; left:-100%;}
  982. body.sidebar-click .sidebar {left:0;}
  983.  
  984. section {width:100%; padding:4rem 2rem 2rem 2rem;}
  985. }
  986.  
  987. {CustomCSS}
  988.  
  989. </style>
  990. </head>
  991.  
  992. <!----- HTML ----->
  993. <body>
  994.  
  995. <main><!-- main container -->
  996.  
  997. <!--- HEADER --->
  998. <header>
  999. <div class="header-left">
  1000. <a id="sidebarbutton" title="toggle sidebar"><i class="ti ti-layout-sidebar-left-expand"></i></a>
  1001. <a class="htitle" href="/"><div class="himg"><img src="{PortraitURL-128}"></div><b>{Title}</b></a>
  1002.  
  1003. <!--================ (OPTIONAL) EDIT HERE: HEADER LINKS ====================
  1004.  
  1005. - if you want to add more header links you can! i recommend adding no more than three depending on how long they are
  1006.  
  1007. FORMAT:
  1008. <a class="mainlink" href="[link url]">[link name]</a>
  1009.  
  1010. - [bracketed text] is what you can change, delete the brackets
  1011.  
  1012. =========================================================================-->
  1013. <a class="mainlink" href="/">home</a>
  1014. <a class="mainlink" href="/ask">ask</a>
  1015. <a class="mainlink" href="/archive">archive</a>
  1016.  
  1017. </div><!-- all header links above this line -->
  1018. <div class="header-right">
  1019. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
  1020. <!-- day/night -->
  1021. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1022. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1023. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1024. </button>
  1025. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1026. <!-- CREDIT: DO NOT TOUCH -->
  1027. <a class="credit" href="//phantomcodes.tumblr.com" title="custom page by sage"><i class="ti ti-ghost-2"></i></a>
  1028. </div>
  1029. </header><!-- header ends -->
  1030.  
  1031. <!-- SIDEBAR -->
  1032. <div class="sidebar">
  1033.  
  1034. <div class="sidebar-top">
  1035. <!--====================== EDIT HERE: SIDEBAR IMAGE ========================
  1036.  
  1037. FORMAT:
  1038. <div class="sb-img"><img src="[image url]"></div>
  1039.  
  1040. - [bracketed text] is what you can change, delete the brackets
  1041.  
  1042. =========================================================================-->
  1043. <div class="sb-img"><img src=""></div>
  1044.  
  1045. <a class="main-title" href="/"><b>icons page</b><i>@{Name}</i></a>
  1046. <!-- search bar -->
  1047. <div class="searchbar">
  1048. <i class="ti ti-search"></i>
  1049. <form class="search" action="javascript:return false">
  1050. <input type="text" class="query" placeholder="search blog . . .">
  1051. </form>
  1052. </div><!-- // .searchbar -->
  1053. </div><!-- // .sidebar-top -->
  1054.  
  1055. <div class="rules"><!-- rules -->
  1056. <div class="sb-title"><b>rules</b><i class="ti ti-list-details"></i></div>
  1057. <div class="sb-rules">
  1058. <!--========================== EDIT HERE: RULES ============================
  1059.  
  1060. FORMAT:
  1061. <li><i class="ti ti-[icon-name]"></i><span>[rule text]</span></li>
  1062.  
  1063. - [bracketed text] is what you can change, delete the brackets
  1064.  
  1065. =========================================================================-->
  1066. <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
  1067. <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
  1068. <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
  1069. <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
  1070. </div><!-- // .sb-rules - all rules above this line -->
  1071. </div><!-- // .rules -->
  1072.  
  1073. <div class="sort"><!-- filters -->
  1074. <div class="sb-title"><b>sort by</b><i class="ti ti-sort-descending"></i></div>
  1075. <!--========================== EDIT HERE: FILTERS ==========================
  1076.  
  1077. 1. FILTERBOX
  1078.  
  1079. - this is if you want to add an entire new filter section
  1080.  
  1081. FORMAT:
  1082. <div class="filterbox [three]">
  1083. <ul class="filter option-set exclusive" data-filter-group="group[3]">
  1084.  
  1085. <div class="filtersubtitle"><b>[filer section name]</b></div>
  1086.  
  1087. <a href="#" data-filter-value="" class="selected" id="allplus">
  1088. <span>all</span></a>
  1089.  
  1090. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1091. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1092. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1093.  
  1094. </ul>
  1095. </div>
  1096.  
  1097. 2. INDIVIDUAL FILTERS
  1098.  
  1099. - make sure each filter name is between <span></span>, example: <span>filter 1</span>
  1100.  
  1101. - 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
  1102.  
  1103. FORMAT:
  1104. <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
  1105.  
  1106. - [bracketed text] is what you can change, delete the brackets
  1107.  
  1108. =========================================================================-->
  1109.  
  1110. <div class="filterbox one"><!-- filterbox one -->
  1111. <ul class="filter option-set exclusive" data-filter-group="group1">
  1112.  
  1113. <div class="filtersubtitle"><b>colors</b></div>
  1114.  
  1115. <a href="#" data-filter-value="" class="selected" id="allplus">
  1116. <span>all</span></a>
  1117.  
  1118. <a href="#" data-filter-value=".f1"><span>color 1</span></a>
  1119. <a href="#" data-filter-value=".f2"><span>color 2</span></a>
  1120. <a href="#" data-filter-value=".f3"><span>color 3</span></a>
  1121. <a href="#" data-filter-value=".f4"><span>color 4</span></a>
  1122.  
  1123. </ul><!-- // all filterbox one filters above this line -->
  1124. </div><!-- // .filterbox.one -->
  1125.  
  1126. <div class="filterbox two"><!-- filterbox two -->
  1127. <ul class="filter option-set exclusive" data-filter-group="group2">
  1128.  
  1129. <div class="filtersubtitle"><b>alphabetical</b></div>
  1130.  
  1131. <a href="#" data-filter-value="" class="selected">
  1132. <span>all</span></a>
  1133.  
  1134. <a href="#" data-filter-value=".ae"><span>a - e</span></a>
  1135. <a href="#" data-filter-value=".fj"><span>f - j</span></a>
  1136. <a href="#" data-filter-value=".ko"><span>k - o</span></a>
  1137. <a href="#" data-filter-value=".pt"><span>p - t</span></a>
  1138. <a href="#" data-filter-value=".uz"><span>u - z</span></a>
  1139.  
  1140. </ul><!-- // all filterbox two filters above this line -->
  1141. </div><!-- // .filterbox.two -->
  1142.  
  1143. <!--==================== all filterboxes above this line ================-->
  1144. </div><!-- // .sort -->
  1145.  
  1146. <div class="status"><!-- request status -->
  1147. <div class="sb-title"><b>request status</b><i class="ti ti-mailbox"></i></div>
  1148. <div class="sb-status">
  1149. <!--====================== EDIT HERE: STATUS ===============================
  1150.  
  1151. FORMAT:
  1152. <li class="[on/off]"><i class="ti ti-toggle-[right/left]"></i><span>[status text]</span></li>
  1153.  
  1154. - [bracketed text] is what you can change, delete the brackets
  1155. - for the status to be on change the class to "on" and the toggle to right
  1156. - for the status to be off change the class to "off" and the toggle to left
  1157.  
  1158. =========================================================================-->
  1159. <li class="on"><i class="ti ti-toggle-right"></i><span>status on</span></li>
  1160. <li class="on"><i class="ti ti-toggle-right"></i><span>status on</span></li>
  1161. <li class="off"><i class="ti ti-toggle-left"></i><span>status off</span></li>
  1162. <li class="off"><i class="ti ti-toggle-left"></i><span>status off</span></li>
  1163. </div><!-- // .sb-status - all statuses above this line -->
  1164. </div><!-- // .status -->
  1165.  
  1166. </div><!-- sidebar ends -->
  1167.  
  1168. <section><!-- section -->
  1169. <div class="icon-wrap">
  1170. <!--========================================================================
  1171. EDIT HERE: ICONS
  1172.  
  1173. GENERAL FORMAT:
  1174. <div class="icon [filter values]">
  1175. <img src="[image url]">
  1176. </div>
  1177.  
  1178. - [bracketed] text is what you change, delete the brackets
  1179.  
  1180. =========================================================================-->
  1181. <div class="icon f1 f3 ae ko uz">
  1182. <img src="">
  1183. </div>
  1184.  
  1185. <!--==================== all icons above this line ================-->
  1186. </div><!-- // .icon-wrap -->
  1187. </section><!-- // section -->
  1188.  
  1189. </main><!-- end of main container -->
  1190.  
  1191. <script>
  1192.  
  1193. // tooltips
  1194. tippy('[title]', {
  1195. theme: 'custom',
  1196. arrow: false,
  1197. followCursor: true,
  1198. delay: 100,
  1199. placement: 'top',
  1200. offset: "0, 10",
  1201. zIndex: 9999999999,
  1202. maxWidth: 400,
  1203.  
  1204. content(reference) {
  1205. const title = reference.getAttribute('title');
  1206. reference.removeAttribute('title');
  1207. return title;
  1208. },
  1209. });
  1210.  
  1211. // sidebar popup
  1212. $(document).ready(function(){
  1213. $('a#sidebarbutton').click(function(){
  1214. $('body').toggleClass('sidebar-click');
  1215. $('a#sidebarbutton i').toggleClass("ti-layout-sidebar-left-expand-filled");
  1216. });
  1217. });
  1218.  
  1219. //filters
  1220. $(document).ready(function() {
  1221. var $container = $(".icon-wrap"); // the container with all the elements to filter inside
  1222. var filters = {}; //should be outside the scope of the filtering function
  1223. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  1224. var $grid = $container.isotope({
  1225. itemSelector: ".icon", // the elements to filter
  1226. masonry: {
  1227. columnWidth:85,
  1228. gutter: 10,
  1229. fitWidth: true,
  1230. horizontalOrder: true
  1231. }
  1232. });
  1233. $('.icon-wrap').isotope({
  1234. transitionDuration: '0.8s',
  1235. hiddenStyle: {
  1236. opacity: 0
  1237. },
  1238. visibleStyle: {
  1239. opacity: 1
  1240. }
  1241. })
  1242. $(".option-set a").click(function(e) {
  1243. var $this = $(this); // cache the clicked link
  1244. var filterAttr = "data-filter-value";
  1245. var filterValue = $this.attr(filterAttr); // cache the filter
  1246. var $optionSet = $this.parents(".option-set"); // cache the parent element
  1247. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  1248. var filterGroup = filters[group];
  1249. if (!filterGroup) {
  1250. filterGroup = filters[group] = [];
  1251. }
  1252. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  1253. var activeClass = "selected", // the class for active links
  1254. exclClass = "exclusive"; // the class for exclusive groups
  1255. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  1256. var comboFilter = getComboFilter(filters);
  1257. $grid.isotope({
  1258. filter: comboFilter
  1259. });
  1260. $this.toggleClass(activeClass);
  1261. e.preventDefault();
  1262. });
  1263. });
  1264.  
  1265. // welcome popup
  1266. $(document).ready(function(){
  1267. $('a#welcomebutton').click(function(){
  1268. $('body').toggleClass('welcome-click');
  1269. });
  1270. });
  1271.  
  1272. // tumblr controls
  1273. $(document).ready(function(){
  1274. $('a#controlsbutton').click(function(){
  1275. $('body').toggleClass('controls-click');
  1276. });
  1277. });
  1278.  
  1279. // tab click
  1280. $(document).ready(function(){
  1281. $('.moreinfo').hide();
  1282. $('.tab.info').click(function() {
  1283. $('tab').toggleClass('more-click');
  1284. $(this).closest('.folder').find('.moreinfo').slideToggle(0);
  1285. $(this).toggleClass('more-click');
  1286. return false;
  1287. });
  1288. });
  1289.  
  1290. // searchbar
  1291. $(document).ready(function(){
  1292. $('a#searchbutton').click(function(){
  1293. $('body').toggleClass('search-click');
  1294. });
  1295. });
  1296. $(document).ready(function(){
  1297. $('.search').submit(function(event){
  1298. var value = $('input:first').val();
  1299. location.replace('http://{Name}.tumblr.com/search/' + value);
  1300. });
  1301. });
  1302.  
  1303. // scroll to top
  1304. $(document).ready(function(){
  1305. $('a#totop').click(function(){
  1306. $('html, body').animate({scrollTop : 0},800);
  1307. return false;
  1308. });
  1309. });
  1310.  
  1311. var mybutton = document.getElementById("totop");
  1312. window.onscroll = function() {scrollFunction()};
  1313.  
  1314. function scrollFunction() {
  1315. if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
  1316. mybutton.style.display = "flex";
  1317. } else {
  1318. mybutton.style.display = "none";
  1319. }
  1320. }
  1321.  
  1322. // day/night mode
  1323. const toggle = document.getElementById("theme-toggle");
  1324.  
  1325. toggle.onclick = function () {
  1326. // add class to html and make transition snappy
  1327. document.documentElement.classList.add("theme-transition");
  1328. // alright lets retrive the info from data-theme
  1329. let currentTheme = document.documentElement.getAttribute("data-theme");
  1330. // if it's dark already, let's go into the light
  1331. let targetTheme = "light";
  1332. // but if it is light let's toggle dark mode
  1333. if (currentTheme === "light") {
  1334. targetTheme = "dark";
  1335. }
  1336. // ok now that theme has been toggled, get rid of snappy transition
  1337. window.setTimeout(function () {
  1338. document.documentElement.classList.remove("theme-transition");
  1339. }, 50);
  1340. // we're going to save our theme preference now
  1341. document.documentElement.setAttribute("data-theme", targetTheme);
  1342. localStorage.setItem("theme", targetTheme);
  1343. };
  1344.  
  1345. </script>
  1346.  
  1347. </body>
  1348. </html>
  1349.  
Advertisement
Add Comment
Please, Sign In to add comment