API tools faq
paste
Guest User

common sentiments - abicodes

a guest
Jan 7th, 2023
5,448
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.17 KB | None | 0 0
raw download clone embed print report
  1. <link rel="icon" type="image/png" href="{Favicon}">
  2. <title>{title}</title>
  3.  
  4. <style type="text/css">/*
  5.  
  6. coded by @abicodes!
  7. please don't remove credit, claim as your own, or use as a base!
  8.  
  9. - basic isotope combination filtering setup from: https://codepen.io/desandro/pen/eYNEpQ
  10. - metafizzy istotope
  11. - phosphor icons
  12. - google fonts + fontshare
  13. */
  14.  
  15. /****************************************
  16. Variables
  17. *****************************************/
  18.  
  19. :root{
  20. /*
  21.  
  22. background colors
  23.  
  24. - edit color1, color2, and color3 to change the gradient combination!
  25. - alternatively, edit only color1 and go to the background section for a mono-color background*/
  26. --color1: #e3b4b3;
  27. --color2: #b8cad6;
  28. --color3: #abd1cd;
  29.  
  30.  
  31. /* colors
  32.  
  33. - edit light + dark to change the text + line colors
  34. - accent changes link hover color + button hover color*/
  35.  
  36. --transparent: rgba(0,0,0,0);
  37. --light: #f0f0f0;
  38. --light-transparent:rgba(240, 240, 240, .4);
  39. --dark: #141414;
  40. --dark-transparent: rgba(20, 20, 20, .7);
  41. --accent:rgba(145, 181, 177, .5);
  42.  
  43. /* fonts*/
  44. --headerfont:'Clash Grotesk', sans-serif;
  45. --bodyfont:'Montserrat', sans-serif;
  46. --accentfont: 'Inconsolata', monospace;
  47.  
  48. /* font sizes*/
  49. --largest-font:2.3rem; /*large sidebar font*/
  50. --large-font:1.4rem; /*character name font*/
  51. --medium-font: .85rem; /*body font*/
  52. --small-font:.75rem; /*character blurb + buttons*/
  53.  
  54. /* sidebar width*/
  55. --sidebar-width:260px;
  56.  
  57. /* image height + width*/
  58. --height:430px;
  59. --width:230px;
  60. --gap:35px; /*gap between characters*/
  61.  
  62. /*background gradients
  63.  
  64. - i wouldn't recommend playing with the actual gradient code, if you can help it! however, if you want a solid background, replace the below with:
  65.  
  66. "--background: "var(--background-texture), var(--color1);"
  67.  
  68. and make sure to change the color1 variable to the color that you would like the background to be!*/
  69.  
  70. --background:
  71. var(--background-texture),
  72. var(--color2-gradient),
  73. var(--color3-gradient2),
  74. var(--color2-gradient3),
  75. var(--color1-gradient2),
  76. var(--color2-gradient2),
  77. var(--color3-gradient),
  78. var(--color3-gradient3),
  79. var(--color1-gradient);
  80.  
  81. --color1-gradient:
  82. linear-gradient(to right,
  83. var(--color1) 0%,
  84. var(--transparent) 100%);
  85. --color1-gradient2:
  86. radial-gradient(circle at bottom right,
  87. var(--color1),
  88. var(--transparent) 50%);
  89. --color2-gradient:
  90. radial-gradient(circle at bottom left,
  91. var(--color2) 0%,
  92. var(--transparent) 70%);
  93. --color2-gradient2:
  94. radial-gradient(circle at 60% center,
  95. var(--color2) 0%,
  96. var(--transparent) 55%);
  97. --color2-gradient3:
  98. radial-gradient(circle at 100% center,
  99. var(--color2) 0%,
  100. var(--transparent) 30%);
  101. --color3-gradient:
  102. radial-gradient(circle at top right,
  103. var(--color3),
  104. var(--transparent) 100%);
  105. --color3-gradient2:
  106. radial-gradient(circle at center left,
  107. var(--color3),
  108. var(--transparent) 25%);
  109. --color3-gradient3:
  110. radial-gradient(circle at 60% bottom,
  111. var(--color3),
  112. var(--transparent) 75%);
  113.  
  114. --background-texture: url('https://img.nickpic.host/56Mk0X.png');
  115.  
  116. }
  117.  
  118. body{
  119. margin: 0px !important;
  120. background: var(--background);
  121. color: var(--dark);
  122. font: var(--medium-font) var(--bodyfont);
  123. text-size-adjust: none;
  124. position: relative;
  125. background-attachment: fixed;
  126. }
  127.  
  128. a{
  129. text-decoration: none;
  130. color: inherit;
  131. transition: .3s ease;
  132. }
  133.  
  134. a:hover{
  135. color: var(--accent);
  136. }
  137.  
  138. /****************************************
  139. Sidebar
  140. *****************************************/
  141.  
  142. .sidebar{
  143. width: var(--sidebar-width);
  144. height: calc(100vh - 80px);
  145. position: fixed;
  146. top: 40px;
  147. border-right: 1.5px solid var(--dark);
  148. padding: 20px 30px;
  149. box-sizing: border-box;
  150. }
  151.  
  152. .sidebar span span{
  153. font-family: var(--headerfont);
  154. text-transform: lowercase;
  155. font-size: var(--largest-font);
  156. font-weight: bold;
  157. }
  158.  
  159. .sidebar a{
  160. display: flex;
  161. align-items: center;
  162. text-transform: uppercase;
  163. letter-spacing: .5px;
  164. gap: 10px;
  165. font-size: var(--small-font);
  166. }
  167.  
  168. /****************************************
  169. Button styling
  170. *****************************************/
  171.  
  172. .button-set{
  173. text-align: right;
  174. margin-bottom: 20px;
  175. }
  176.  
  177. .filter-title{
  178. text-transform: uppercase;
  179. font-weight: bold;
  180. letter-spacing: .5px;
  181. margin-bottom: 5px;
  182. font-size: var(--small-font);
  183. }
  184.  
  185. .button {
  186. display: inline-block;
  187. padding: 0.5em 1.0em;
  188. background: var(--transparent);
  189. color: var(--dark);
  190. font-family: var(--accentfont);
  191. font-size: var(--small-font);
  192. cursor: pointer;
  193. border: 1px solid var(--dark);
  194. border-radius: 20px;
  195. margin-bottom: 3px;
  196. }
  197.  
  198. .button:hover {
  199. background-color: var(--accent);
  200. }
  201.  
  202. .button:active,
  203. .button.is-checked {
  204. background-color: var(--dark-transparent);
  205. color: var(--light);
  206. }
  207.  
  208. .button:active {
  209. }
  210.  
  211. /****************************************
  212. Main Section
  213. *****************************************/
  214. .grid{
  215. margin-left: calc(var(--sidebar-width) + 40px);
  216. margin-right: 35px;
  217. margin-top: 30px;
  218. margin-bottom: 30px;
  219. position: relative;
  220. }
  221. /****************************************
  222. Character Info
  223. *****************************************/
  224.  
  225. .character-box{width: var(--width); height: calc(var(--height) + 45px); border-bottom: 1.5px solid var(--dark);
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: space-between;
  229. margin-right: var(--gap);
  230. margin-bottom: var(--gap);}
  231.  
  232. .hover-container{
  233. height: var(--height);
  234. width: var(--width);
  235. overflow: hidden;
  236. position: relative;
  237. }
  238.  
  239. .char-img{
  240. height: var(--height);
  241. width: var(--width);
  242. background-size: cover;
  243. transition: 1s ease;
  244. }
  245.  
  246. .hover-container:hover .char-img{
  247. filter: blur(5px) grayscale(100%) brightness(70%);
  248. transition: 1s ease;
  249. }
  250.  
  251. .char-name{
  252. text-transform: uppercase;
  253. font-family: var(--headerfont);
  254. font-size: var(--large-font);
  255. margin-bottom: 9px;
  256. font-weight: 800;
  257. letter-spacing: .5px;
  258. }
  259. /****************************************
  260. Character Info - Hover
  261. *****************************************/
  262.  
  263. .char-hover{
  264. height: var(--height);
  265. width: var(--width);
  266. background: var(--background-texture), var(--dark-transparent);
  267. position: absolute;
  268. top: 0px;
  269. color: var(--light);
  270. display: grid;
  271. grid-template-rows: 45px 1fr 45px;
  272. transition: .5s ease;
  273. opacity: 0;
  274. }
  275.  
  276. .hover-container:hover .char-hover{
  277. opacity: 1;
  278. transition: .5s ease;
  279. }
  280.  
  281. .char-info{
  282. border-bottom: 1.5px solid var(--light-transparent);
  283. }
  284.  
  285. .char-blurb{
  286. text-transform: uppercase;
  287. display: flex;
  288. padding: 20px 30px;
  289. letter-spacing: .5px;
  290. font-weight: 300;
  291. align-items: center;
  292. justify-content: center;
  293. font-size: var(--small-font);
  294. text-align: justify;
  295. text-align-last: center;
  296. line-height: 1.5;
  297. flex-direction: column;
  298. }
  299.  
  300. .char-links{
  301. border-top: 1.5px solid var(--light-transparent);
  302. }
  303.  
  304. .char-info, .char-links{
  305. padding: 0px 10px;
  306. display: flex;
  307. text-transform: uppercase;
  308. font-family: var(--accentfont);
  309. letter-spacing: .5px;
  310. align-items: center;
  311. justify-content: center;
  312. gap: 10px;
  313. }
  314.  
  315. /****************************************
  316. Credit
  317. *****************************************/
  318.  
  319. .credit{
  320. position: fixed;
  321. bottom: 20px;
  322. right: 20px;
  323. font-size: var(--large-font);
  324. }</style>
  325.  
  326. <!-- scripts -->
  327. <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  328. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.5/isotope.pkgd.js"></script>
  329.  
  330.  
  331. <!-- fonts -->
  332. <link rel="preconnect" href="https://fonts.googleapis.com">
  333. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  334. <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,600;1,700&family=Prata&display=swap" rel="stylesheet">
  335. <link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@1&display=swap" rel="stylesheet">
  336. <script src="https://unpkg.com/phosphor-icons"></script>
  337.  
  338. <!-- beginning of code -->
  339. <div class = "sidebar">
  340. <!-- change title here -->
  341. <span><span>Abi's<br>muses</span><br><p>
  342.  
  343. <!-- put link returning to blog here -->
  344. <a href = "/"><i class="ph-caret-left"></i> return home</a>
  345. </span>
  346. <div class="filters">
  347.  
  348.  
  349. <!-- TO ADD FILTER GROUPS
  350. - add filter groups by copying all text from the start to the end of the "button-set" div class. the start + end are also marked in the code!
  351. - make sure to change the initial filter to a new element
  352.  
  353. ex: <div class="button-group js-radio-button-group" data-filter-group="status">
  354.  
  355. ex: <div class="button-group js-radio-button-group" data-filter-group="role">
  356.  
  357.  
  358. TO ADD FILTER ITEMS IN GROUP
  359. - add filters within a group by copying text from <button> to </button> and then change "data-filter" to your filter name
  360.  
  361. ex: <button class="button" data-filter=".hollow">hollow</button>
  362.  
  363. <ex:button class="button" data-filter=".hallowed">hallowed</button>
  364.  
  365.  
  366. TO ADD FILTER CLASSES TO CHARACTERS
  367. - add filter tag to a character by adding it to the div class for character-box, where noted
  368.  
  369. ex: <div class = "character-box hallowed knight open a">
  370.  
  371. ex: ex: <div class = "character-box hollow pawn closed b">
  372. -->
  373.  
  374. <!-- filter set start -->
  375. <div class="button-set">
  376. <div class = "filter-title">status</div>
  377. <div class="button-group js-radio-button-group" data-filter-group="status">
  378. <button class="button is-checked" data-filter="">all</button>
  379. <button class="button" data-filter=".open">open</button>
  380. <button class="button" data-filter=".closed">closed</button>
  381. </div></div>
  382. <!-- filter set end -->
  383.  
  384. <!-- filter set start -->
  385. <div class="button-set">
  386. <div class = "filter-title">allegiance</div>
  387. <div class="button-group js-radio-button-group" data-filter-group="allegiance">
  388. <button class="button is-checked" data-filter="">all</button>
  389. <button class="button" data-filter=".hollow">hollow</button>
  390. <button class="button" data-filter=".hallowed">hallowed</button>
  391. </div>
  392. </div>
  393. <!-- filter set end -->
  394.  
  395. <!-- filter set start -->
  396. <div class="button-set">
  397. <div class = "filter-title">role</div>
  398. <div class="button-group js-radio-button-group" data-filter-group="role">
  399. <button class="button is-checked" data-filter="">all</button>
  400. <button class="button" data-filter=".pawn">pawn</button>
  401. <button class="button" data-filter=".knight">knight</button>
  402. <button class="button" data-filter=".bishop">bishop</button>
  403. <button class="button" data-filter=".rook">rook</button>
  404. </div>
  405. </div>
  406. <!-- filter set end -->
  407.  
  408. <!-- filter set start -->
  409. <div class="button-set">
  410. <div class = "filter-title">misc filter</div>
  411. <div class="button-group js-radio-button-group" data-filter-group="misc">
  412. <button class="button is-checked" data-filter="">all</button>
  413. <button class="button" data-filter=".a">one</button>
  414. <button class="button" data-filter=".b">two</button>
  415. <button class="button" data-filter=".c">three</button>
  416. <button class="button" data-filter=".d">four</button>
  417. <button class="button" data-filter=".e">five</button>
  418. </div>
  419. </div>
  420. <!-- filter set end -->
  421.  
  422.  
  423. </div>
  424. </div>
  425. <div class="grid">
  426.  
  427. <!-- start of character -->
  428. <!-- here is where you edit the isotope filter classes -->
  429. <div class = "character-box open hollow pawn a">
  430. <div class = "hover-container">
  431. <!-- change the url below to the image that you want! -->
  432. <div class = "char-img" style = "background-image: url('https://i.imgur.com/OEWF1FE.png');">
  433. </div>
  434. <div class = "char-hover">
  435. <!-- place to put a short character description of some sort below! -->
  436. <div class = "char-info">the catabolist</div>
  437. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  438. <div class = "char-blurb">I'll find the sacred buried in me And I will cut it while everyone is watching<p> (it will not be enough)</div>
  439. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  440. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  441. </div></div>
  442. <div class = "char-name">mordred</div>
  443. </div>
  444. <!-- end of character -->
  445.  
  446. <!-- start of character -->
  447. <!-- here is where you edit the isotope filter classes -->
  448. <div class = "character-box closed hallowed knight b">
  449. <div class = "hover-container">
  450. <!-- change the url below to the image that you want! -->
  451. <div class = "char-img" style = "background-image: url('https://i.imgur.com/W0j0lVR.png');">
  452. </div>
  453. <div class = "char-hover">
  454. <!-- place to put a short character description of some sort below! -->
  455. <div class = "char-info">the honed</div>
  456. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  457. <div class = "char-blurb">To the kindness of strangers and their kitchen floors.
  458. How the pain grows sweet and the blood dries burnt orange</div>
  459. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  460. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  461. </div></div>
  462. <div class = "char-name">lancelot</div>
  463. </div>
  464. <!-- end of character -->
  465.  
  466. <!-- start of character -->
  467. <!-- here is where you edit the isotope filter classes -->
  468. <div class = "character-box open hollow rook c">
  469. <div class = "hover-container">
  470. <!-- change the url below to the image that you want! -->
  471. <div class = "char-img" style = "background-image: url('https://i.imgur.com/gQrZQcU.png');">
  472. </div>
  473. <div class = "char-hover">
  474. <!-- place to put a short character description of some sort below! -->
  475. <div class = "char-info">the percipent</div>
  476. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  477. <div class = "char-blurb">Reason’s a tease,
  478. Drank up all that hemlock, here I am just reading the leaves</div>
  479. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  480. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  481. </div></div>
  482. <div class = "char-name">nimue</div>
  483. </div>
  484. <!-- end of character -->
  485.  
  486. <!-- start of character -->
  487. <!-- here is where you edit the isotope filter classes -->
  488. <div class = "character-box closed hollow bishop d">
  489. <div class = "hover-container">
  490. <!-- change the url below to the image that you want! -->
  491. <div class = "char-img" style = "background-image: url('https://i.imgur.com/oC1wJ9W.png');">
  492. </div>
  493. <div class = "char-hover">
  494. <!-- place to put a short character description of some sort below! -->
  495. <div class = "char-info">the architect</div>
  496. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  497. <div class = "char-blurb">It's a sacrificial violence, all those passed over in silence then cast out with the blame</div>
  498. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  499. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  500. </div></div>
  501. <div class = "char-name">merlin</div>
  502. </div>
  503. <!-- end of character -->
  504.  
  505. <!-- start of character -->
  506. <!-- here is where you edit the isotope filter classes -->
  507. <div class = "character-box open hallowed pawn e">
  508. <div class = "hover-container">
  509. <!-- change the url below to the image that you want! -->
  510. <div class = "char-img" style = "background-image: url('https://i.imgur.com/WEqfFbC.png');">
  511. </div>
  512. <div class = "char-hover">
  513. <!-- place to put a short character description of some sort below! -->
  514. <div class = "char-info">the attached</div>
  515. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  516. <div class = "char-blurb">I know I said I would be Caesar Or else I would be nothing<p>
  517. But I will settle for being right</div>
  518. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  519. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  520. </div></div>
  521. <div class = "char-name">isolde</div>
  522. </div>
  523. <!-- end of character -->
  524.  
  525. <!-- start of character -->
  526. <!-- here is where you edit the isotope filter classes -->
  527. <div class = "character-box open hallowed knight a">
  528. <div class = "hover-container">
  529. <!-- change the url below to the image that you want! -->
  530. <div class = "char-img" style = "background-image: url('https://i.imgur.com/h7cDzoa.png');">
  531. </div>
  532. <div class = "char-hover">
  533. <!-- place to put a short character description of some sort below! -->
  534. <div class = "char-info">the seeker</div>
  535. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  536. <div class = "char-blurb">Oh what am I waiting for?<p>
  537. A spell to be cast or for it to be broken?<p>
  538. At the very last some wild ghost from my past come to split me wide open?</div>
  539. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  540. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  541. </div></div>
  542. <div class = "char-name">galahad</div>
  543. </div>
  544. <!-- end of character -->
  545.  
  546. <!-- start of character -->
  547. <!-- here is where you edit the isotope filter classes -->
  548. <div class = "character-box open hollow rook b">
  549. <div class = "hover-container">
  550. <!-- change the url below to the image that you want! -->
  551. <div class = "char-img" style = "background-image: url('https://i.imgur.com/aOelDkp.png');">
  552. </div>
  553. <div class = "char-hover">
  554. <!-- place to put a short character description of some sort below! -->
  555. <div class = "char-info">the wayward</div>
  556. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  557. <div class = "char-blurb">We are alone in this together</div>
  558. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  559. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  560. </div></div>
  561. <div class = "char-name">elaine</div>
  562. </div>
  563. <!-- end of character -->
  564.  
  565. <!-- start of character -->
  566. <!-- here is where you edit the isotope filter classes -->
  567. <div class = "character-box closed hallowed bishop c">
  568. <div class = "hover-container">
  569. <!-- change the url below to the image that you want! -->
  570. <div class = "char-img" style = "background-image: url('https://i.imgur.com/NkIFknV.png');">
  571. </div>
  572. <div class = "char-hover">
  573. <!-- place to put a short character description of some sort below! -->
  574. <div class = "char-info">the dying</div>
  575. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  576. <div class = "char-blurb">every star is a possible death</div>
  577. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  578. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  579. </div></div>
  580. <div class = "char-name">the fisher king</div>
  581. </div>
  582. <!-- end of character -->
  583.  
  584. <!-- start of character -->
  585. <!-- here is where you edit the isotope filter classes -->
  586. <div class = "character-box open hollow knight d">
  587. <div class = "hover-container">
  588. <!-- change the url below to the image that you want! -->
  589. <div class = "char-img" style = "background-image: url('https://i.imgur.com/sbdPvLx.png');">
  590. </div>
  591. <div class = "char-hover">
  592. <!-- place to put a short character description of some sort below! -->
  593. <div class = "char-info">the telepresence</div>
  594. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  595. <div class = "char-blurb">Can we wait for the summer again?<p>
  596. Can we hold out for summer again?<p>Will we ever be whole again?</div>
  597. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  598. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  599. </div></div>
  600. <div class = "char-name">guinevere</div>
  601. </div>
  602. <!-- end of character -->
  603.  
  604. <!-- start of character -->
  605. <!-- here is where you edit the isotope filter classes -->
  606. <div class = "character-box closed hollow pawn e">
  607. <div class = "hover-container">
  608. <!-- change the url below to the image that you want! -->
  609. <div class = "char-img" style = "background-image: url('https://i.imgur.com/TvOiVrG.png');">
  610. </div>
  611. <div class = "char-hover">
  612. <!-- place to put a short character description of some sort below! -->
  613. <div class = "char-info">the executive</div>
  614. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  615. <div class = "char-blurb">I began hearing these voices in the dial tone<p>
  616. And they come to me now though I dismembered my phone</div>
  617. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  618. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  619. </div></div>
  620. <div class = "char-name">morgan</div>
  621. </div>
  622. <!-- end of character -->
  623.  
  624. <!-- start of character -->
  625. <!-- here is where you edit the isotope filter classes -->
  626. <div class = "character-box closed hallowed pawn a">
  627. <div class = "hover-container">
  628. <!-- change the url below to the image that you want! -->
  629. <div class = "char-img" style = "background-image: url('https://i.imgur.com/z0LthhG.png');">
  630. </div>
  631. <div class = "char-hover">
  632. <!-- place to put a short character description of some sort below! -->
  633. <div class = "char-info">the empath</div>
  634. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  635. <div class = "char-blurb">Don't shake the nest, don't speak the lie</div>
  636. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  637. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  638. </div></div>
  639. <div class = "char-name">sir kay</div>
  640. </div>
  641. <!-- end of character -->
  642.  
  643. <!-- start of character -->
  644. <!-- here is where you edit the isotope filter classes -->
  645. <div class = "character-box closed hallowed knight b">
  646. <div class = "hover-container">
  647. <!-- change the url below to the image that you want! -->
  648. <div class = "char-img" style = "background-image: url('https://i.imgur.com/gOLUdAi.png');">
  649. </div>
  650. <div class = "char-hover">
  651. <!-- place to put a short character description of some sort below! -->
  652. <div class = "char-info">the denotation</div>
  653. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  654. <div class = "char-blurb">What goes up, goes up in flames</div>
  655. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  656. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  657. </div></div>
  658. <div class = "char-name">arthur</div>
  659. </div>
  660. <!-- end of character -->
  661.  
  662. <!-- start of character -->
  663. <!-- here is where you edit the isotope filter classes -->
  664. <div class = "character-box closed hollow knight c">
  665. <div class = "hover-container">
  666. <!-- change the url below to the image that you want! -->
  667. <div class = "char-img" style = "background-image: url('https://i.imgur.com/eGTBkgy.png');">
  668. </div>
  669. <div class = "char-hover">
  670. <!-- place to put a short character description of some sort below! -->
  671. <div class = "char-info">the mnemologist</div>
  672. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  673. <div class = "char-blurb">Hollowed out of all my fabled insides<p>
  674. Occam shave me down to primal truth— return me to the womb</div>
  675. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  676. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  677. </div></div>
  678. <div class = "char-name">gawain</div>
  679. </div>
  680. <!-- end of character -->
  681.  
  682. <!-- start of character -->
  683. <!-- here is where you edit the isotope filter classes -->
  684. <div class = "character-box open hollow knight d">
  685. <div class = "hover-container">
  686. <!-- change the url below to the image that you want! -->
  687. <div class = "char-img" style = "background-image: url('https://i.imgur.com/ayA3shH.png');">
  688. </div>
  689. <div class = "char-hover">
  690. <!-- place to put a short character description of some sort below! -->
  691. <div class = "char-info">the futurist</div>
  692. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  693. <div class = "char-blurb">All that being and nothingness, on the same möbius strip</div>
  694. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  695. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  696. </div></div>
  697. <div class = "char-name">tristan</div>
  698. </div>
  699. <!-- end of character -->
  700.  
  701. <!-- start of character -->
  702. <!-- here is where you edit the isotope filter classes -->
  703. <div class = "character-box open hallowed bishop e">
  704. <div class = "hover-container">
  705. <!-- change the url below to the image that you want! -->
  706. <div class = "char-img" style = "background-image: url('https://i.imgur.com/2xcz5BZ.png');">
  707. </div>
  708. <div class = "char-hover">
  709. <!-- place to put a short character description of some sort below! -->
  710. <div class = "char-info">the onomastic</div>
  711. <!-- you can put a blurb or a character quote into the class below; it'll take a lot, but don't go too long -->
  712. <div class = "char-blurb">Mirror to my left, and mirror to my right,
  713. A void stretching out on either side<p>
  714. Is it your face or mine?</div>
  715. <!-- this is where you can put links or another bit of info: add as little or as much as you want -->
  716. <div class = "char-links"><a href = "">link</a>-<a href = "">link</a></div>
  717. </div></div>
  718. <div class = "char-name">bedivere</div>
  719. </div>
  720. <!-- end of character -->
  721.  
  722.  
  723. </div>
  724.  
  725. <div class = "credit"><a href = "https://abicodes.tumblr.com/" title = "© abi codes"><i class="ph-sparkle-fill"></i></a></div>
  726.  
  727. <script>// init Isotope
  728. var $grid = $('.grid').isotope({
  729. itemSelector: '.character-box'
  730. });
  731.  
  732. // store filter for each group
  733. var filters = {};
  734.  
  735. $('.filters').on( 'click', '.button', function( event ) {
  736. var $button = $( event.currentTarget );
  737. // get group key
  738. var $buttonGroup = $button.parents('.button-group');
  739. var filterGroup = $buttonGroup.attr('data-filter-group');
  740. // set filter for group
  741. filters[ filterGroup ] = $button.attr('data-filter');
  742. // combine filters
  743. var filterValue = concatValues( filters );
  744. // set filter for Isotope
  745. $grid.isotope({ filter: filterValue });
  746. });
  747.  
  748. // change is-checked class on buttons
  749. $('.button-group').each( function( i, buttonGroup ) {
  750. var $buttonGroup = $( buttonGroup );
  751. $buttonGroup.on( 'click', 'button', function( event ) {
  752. $buttonGroup.find('.is-checked').removeClass('is-checked');
  753. var $button = $( event.currentTarget );
  754. $button.addClass('is-checked');
  755. });
  756. });
  757.  
  758. // flatten object by concatting values
  759. function concatValues( obj ) {
  760. var value = '';
  761. for ( var prop in obj ) {
  762. value += obj[ prop ];
  763. }
  764. return value;
  765. }</script>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!