API tools faq
paste
Advertisement
aureacor

page three: nausea

aureacor
Nov 6th, 2022 (edited)
6,372
2
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.75 KB | None | 2 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!------------------------------------------------------
  3.  
  4. nausea @ aureacor
  5.  
  6. - do not remove credit
  7. - do not use as a base
  8.  
  9. - magnusthemes istotope combination filtering
  10. - metafizzy istotope
  11. - fontawesome icons
  12. - inspired by index47
  13.  
  14. -------------------------------------------------------->
  15.  
  16.     <link rel="icon" type="image/png" href="{Favicon}">
  17.     <title>{title}</title>
  18.    
  19.     <style type="text/css">
  20.  
  21. /*------------------ GENERAL SETTINGS  ------------------*/
  22.  
  23. :root {
  24. --fontone: times; /* main title, muse desc, muse title top */
  25. --fontthree: arial; /* flter, side description,  muse title bottom  */
  26.  
  27. --fontsize-one: 9.5px;  /* muse description  */
  28. --fontsize-two: 11px;  /* filter  */
  29. --fontsize-three: 13px;  /* muse title */
  30. --fontsize-four: 15px;  /* main title */
  31.  
  32. /* change image dimensions */
  33. --height: 375px;
  34. --width: 255px;
  35. --marbot: 50px; /* space beneath each muse */
  36.  
  37. /* general color settings */
  38. --bg: #fffefb;
  39. --text: #fff;
  40. --text-two: #000;
  41. --accent-one: #a6841c;
  42. --accent-two: #a1997d;
  43. --border: #d1d1d1;
  44.  
  45. --rightsize: 83%;
  46. --leftsize: 17%;
  47.  
  48. --gs: grayscale(100%); /* change to 0% if you don't want your image to be gray scale ater clicking on a character*/
  49. }
  50.  
  51. /*------------------  HEADER   -----------------*/
  52.  
  53. header { width: 100%; height: 100%; }
  54.  
  55. .right {
  56.     width: var(--rightsize);
  57.     display: flex;
  58.     justify-content: center;
  59.     align-items: center;
  60.     flex-wrap: wrap;
  61.     padding: 25px 15px 25px 15px;
  62.     border-bottom: 1px solid var(--border);
  63.     border-left: 1px solid var(--border);
  64. }
  65.  
  66. .left {
  67.     width: var(--leftsize);
  68.     height: 100%;
  69.     border-bottom: 1px solid var(--border);
  70.     display: flex;
  71.     justify-content: center;
  72.     align-items: center;
  73. }
  74.  
  75. .left a {
  76.     font: 4px var(--fontthree);
  77.     font-weight: 400;
  78.     letter-spacing: 1px;
  79.     text-transform: uppercase;
  80. }
  81.  
  82. .stay {
  83.     background: var(--bg);
  84.     position: fixed;
  85.     width: 100%;
  86.     z-index: 999;
  87.     top: 0;
  88.     height: 100px;
  89.     display: flex;
  90. }
  91.  
  92. .filter {
  93.     margin-right: 25px;
  94.     color: var(--text-two);
  95.     font-family: var(--fontthree);
  96.     letter-spacing: 1px;
  97.     text-align: center;
  98.     }
  99.  
  100. .filter li, .filter li a {
  101.     display: inline-block;
  102.     margin-right: 3px;
  103.     color: var(--text-two);
  104.     font-size: var(--fontsize-two);
  105. }
  106.  
  107. .filter li a:hover {color: var(--accent-one);}
  108.  
  109. #gname {
  110.     display: inline-block;
  111.     font-size: var(--fontsize-one);
  112.     text-transform: uppercase;
  113.     letter-spacing: 1.25px;
  114.     font-family: var(--fontthree);
  115.     font-weight: 600;
  116. }
  117.  
  118.  
  119. #gname::after {
  120.     content: "✶";
  121.     font-size: 8px;
  122.     position: relative;
  123.     top: -1px;
  124.     margin: 0px 8px;
  125.     color: var(--border);
  126. }
  127.  
  128.  
  129. /*--------------------- PAGE TITLE ---------------------*/
  130.  
  131. .title {
  132.     position: absolute;
  133.     left: 0px;
  134.     width: var(--leftsize);
  135.     height: 100%;
  136.     min-width: 100px;
  137.     padding-right: 20px;
  138. }
  139.  
  140. .title h1 {  
  141.     top: 1000px;
  142.     position: relative;
  143.     top: 190px;
  144.     color: var(--text-two);
  145.     font-size: var(--fontsize-four);
  146.     font-family: var(--fontone);
  147.     text-transform: uppercase;
  148.     letter-spacing: 6px;
  149.     word-break: break-word;
  150.     margin-bottom: 0px;
  151.     margin-left: 40px;
  152. }
  153.  
  154. .title p {
  155.     position: relative;
  156.     text-transform: uppercase;
  157.     top: 200px;
  158.     font-family: arial;
  159.     font-size: 8px;
  160.     letter-spacing: 1.2px;
  161.     text-transform: uppercase;
  162.     line-height: 18px;
  163.     color: var(--text-two);
  164.     margin-top: 0px;
  165.     margin-left: 40px;
  166. }
  167.  
  168.  
  169. /*---------------- MUSE SECTION  ----------------*/
  170.  
  171. .container {
  172.     width: var(--rightsize);
  173.     right: 0;
  174.     position: absolute;
  175.     padding: 100px 75px 25px 10px;
  176. }
  177.  
  178. .grid { margin:50px auto 0px; }
  179.  
  180. .muse {
  181.     background:  #0a0a0a;
  182.     height: var(--height);
  183.     width: var(--width);
  184.     margin-bottom: var(--marbot);
  185.     transition: .5s ease;
  186. }
  187.  
  188. img {
  189.     height: var(--height);
  190.     width: var(--width);
  191.     opacity:0.9;
  192.     transition: .5s ease;
  193.     object-fit: cover;
  194. }
  195. /*-------------------- MUSE NAME  ---------------------*/
  196.  
  197. .bottomtext {
  198.     color: var(--text);
  199.     display: flex;
  200.     justify-content: space-between;
  201.     position: absolute;
  202.     bottom: 0px;
  203.     transition: .5s ease;
  204.     width: 100%;
  205.     height: 65px;
  206. }
  207.  
  208. .mtitle {
  209.     margin: auto;
  210.     text-align: center;
  211.     width: 75%;
  212. }
  213.  
  214. .mtitle h1 {
  215.     font-family: var(--fontthree);
  216.     font-size: var(--fontsize-three);
  217.     font-weight: 700;
  218.     text-transform: uppercase;
  219.     letter-spacing: 1.5px;
  220.     line-height: 135%;
  221.     margin-top: 3px;
  222. }
  223.  
  224. .mtitle h2 {
  225.     font-family: var(--fontone);
  226.     text-transform: lowercase;
  227.     font-style: italic;
  228.     font-size: 7px;
  229.     font-weight: 400;
  230.     letter-spacing: 1px;
  231. }
  232.  
  233. /*--------------- MUSE DESCRIPTION ---------------*/
  234.  
  235. .overlay {
  236.     background-color: rgb(43 43 43 / 66%);
  237.             /* image effect, must be rbg, the % is how
  238.             transparent the overlay will be */
  239.     position: absolute;
  240.     height: 100%;
  241.     top: 0; bottom: 0; left: 0; right: 0;
  242.     opacity: 0;
  243.     transition: .5s ease;
  244.     mix-blend-mode: difference;
  245.             /* delete this if you don't wont the image
  246.             effect after clicking on an image */
  247. }
  248.  
  249. .text {
  250.     font-size: 20px;
  251.     text-align: center;
  252.     position: absolute;
  253.     top: 50%; left: 50%;
  254.     overflow: scroll;
  255.     opacity: 0;
  256.     width: 70%;
  257.     max-height: 50%;
  258.     transition: .5s ease;
  259.     -webkit-transform: translate(-50%, -50%);
  260.     -ms-transform: translate(-50%, -50%);  
  261.     transform: translate(-50%, -50%);
  262.     -ms-overflow-style: none;  /* IE and Edge */
  263.     scrollbar-width: none;  /* Firefox */
  264. }
  265.  
  266. .text::-webkit-scrollbar {
  267. display: none;
  268. }
  269.  
  270. .text p, .bio a {
  271.     font-family: var(--fontone);
  272.     font-size: var(--fontsize-one);
  273.     color: var(--text);
  274.     letter-spacing: 1.2px;
  275.     text-transform: lowercase;
  276.     line-height: 17px;
  277.     transition: .5s ease;
  278. }
  279.  
  280. .bio {
  281.     width: var(--width);
  282.     position: absolute;
  283.     bottom: 20px;
  284.     text-align: center;
  285.     opacity: 0;
  286.     transition: .5s ease;
  287. }
  288.  
  289. .bio a:hover {color: var(--accent-one);}
  290. .bio a:not(:last-child):after {
  291.     content: "/";
  292.     margin: 0px 9px 0px 10px;
  293.     color: white;
  294. }
  295.  
  296. /*-------------------  DO NOT TOUCH  -------------------*/
  297.  
  298. * {  margin: 0 ;  padding: 0 ;  box-sizing: border-box; }
  299. * a { color: var(--text-two); text-decoration: none; transition: 0.5s ease;}
  300. * a:hover { color: var(--accent-one); }
  301. body { background: var(--bg); }
  302. body > iframe:first-child { display: none !important; }
  303. ::-webkit-scrollbar {display: none; }
  304. .c { position: fixed;     bottom: 0.7em;    right: 1em; color: red; }
  305. .c a {font-size: 10px; text-decoration: none; transition: 0.3s ease all; color: var(--text-two);}
  306. b {color: var(--accent-two); text-transform: uppercase; font-size: calc(var(--fontsize-one) - 2px);}
  307. u { text-decoration: none; border-bottom: 1px solid var(--accent-two); }
  308.  
  309. .muse:hover { cursor: crosshair;}
  310. .muse.selected img{ opacity: 0.3; transition: .5s ease; filter: var(--gs); }
  311. .muse.selected .bottomtext{ opacity: 0; transition: .5s ease; }
  312. .muse.selected .overlay { opacity: 1; }
  313. .muse.selected .text{ opacity: 1; }
  314. .muse.selected .bio {opacity: 1;}
  315. .filter li a.selected{color:var(--accent-one);}
  316. </style>   
  317.  
  318.  
  319. <!---------------- START ACTUAL PAGE  ------------------->
  320.  
  321. <body><div class="stay"> <div class="left"><a href="/">
  322.         <h1> BACK </h1>
  323.  </a></div><div class="right">
  324.  
  325. <!--------------------- FILTERS ------------------------
  326.  
  327. ⭐️ ADD FILTER GROUPS
  328. - Add filter groups by copying  all text from <ul... [to] </ul>
  329.    - Change name of "data-filter-group"
  330.        - It doesn't have to follow any sort of scheme so long
  331.          as it does not have the same name as another group
  332.          
  333.  
  334. ⭐️ ADD FILTER ITEMS TO GROUP
  335. - Add filters within a group by copying text from <li> to </li>
  336.    - Change "data-filter-value" to your filter name
  337.        - e.g. .open OR .o
  338.        
  339.           <li><a href="#" data-filter-value=".OPEN"> open </a></li>
  340.           <li><a href="#" data-filter-value=".O"> open </a></li>
  341.          
  342. - Try not to add too many filter groups, otherwise it'll look a bit wonky
  343.    
  344.    
  345.    
  346.     ⭐️ ADD FILTER ITEMS TO MUSE
  347. - Add filter tag to a muse by adding it to the div class
  348. - Do NOT delete the "muse" name
  349.  
  350.        - <div class="muse open romantic four aa">
  351.        - <div class="muse closed enemy one bb">
  352.  
  353.  
  354.    
  355. -------------------------------------------------------->
  356.  
  357. <ul class="filter option-set exclusive" data-filter-group="group-one">
  358. <p id="gname"> AVAILABILITY </p>
  359.     <li><a href="#" data-filter-value="" class="selected"> all </a></li>
  360.     <li><a href="#" data-filter-value=".open"> open </a></li>
  361.     <li><a href="#" data-filter-value=".closed"> closed </a></li>
  362. </ul>
  363.  
  364. <ul class="filter option-set exclusive" data-filter-group="group-two">
  365. <p id="gname"> RELATIONSHIP </p>
  366.     <li><a href="#" data-filter-value="" class="selected">all</a></li>
  367.     <li><a href="#" data-filter-value=".enemy"> enemy </a></li>
  368.     <li><a href="#" data-filter-value=".friend"> friend </a></li>
  369.     <li><a href="#" data-filter-value=".romantic"> romantic </a></li>
  370. </ul>
  371.  
  372. <ul class="filter option-set exclusive" data-filter-group="group-three">
  373. <p id="gname"> FILTER THREE  </p>
  374.     <li><a href="#" data-filter-value="" class="selected">all</a></li>
  375.     <li><a href="#" data-filter-value=".one"> one </a></li>
  376.     <li><a href="#" data-filter-value=".two"> two </a></li>
  377.     <li><a href="#" data-filter-value=".three"> three </a></li>
  378.     <li><a href="#" data-filter-value=".four"> four </a></li>
  379. </ul>
  380.  
  381. <ul class="filter option-set exclusive" data-filter-group="group-four">
  382. <p id="gname"> FILTER FOUR </p>
  383.     <li><a href="#" data-filter-value="" class="selected">all</a></li>
  384.     <li><a href="#" data-filter-value=".aa"> one </a></li>
  385.     <li><a href="#" data-filter-value=".bb"> two </a></li>
  386.     <li><a href="#" data-filter-value=".cc"> three </a></li>
  387.     <li><a href="#" data-filter-value=".dd"> four </a></li>
  388. </ul>
  389.  
  390.  
  391.  
  392. </div></div>
  393. <!---------------  TITLE --------------->
  394.  
  395. <div class="title">
  396.  
  397.         <h1> main title  </h1>
  398.         <p> put some text here </p>
  399.        
  400. </div><div class="container"><div class="grid">
  401.  
  402. <!------------  ADD MUSES --------------->
  403.  
  404. <div class="muse open romantic four aa">
  405.     <img src="https://i.imgur.com/xDUIk1v.png">
  406. <div class="bottomtext"><div class="mtitle">
  407.         <h2>   subtitle  </h1>
  408.         <h1>  character name  </h1>
  409. </div></div><div class="overlay"></div><div class="text">
  410.         <p> quote here </p>
  411. </div><div class="bio">
  412.         <a href="/"> link one </a>
  413.         <a href="/"> link two  </a>
  414. </div></div>
  415.  
  416.  
  417. <div class="muse closed enemy one bb">
  418.     <img src="https://i.imgur.com/xDUIk1v.png">
  419. <div class="bottomtext"><div class="mtitle">
  420.         <h2>   subtitle  </h1>
  421.         <h1>  character name  </h1>
  422. </div></div><div class="overlay"></div><div class="text">
  423.         <p> quote here </p>
  424. </div><div class="bio">
  425.         <a href="/"> link one </a>
  426.         <a href="/"> link two  </a>
  427. </div></div>
  428.  
  429.  
  430. <div class="muse open friend three cc">
  431.     <img src="https://i.imgur.com/xDUIk1v.png">
  432. <div class="bottomtext"><div class="mtitle">
  433.         <h2>   subtitle  </h1>
  434.         <h1>  character name  </h1>
  435. </div></div><div class="overlay"></div><div class="text">
  436.         <p> quote here </p>
  437. </div><div class="bio">
  438.         <a href="/"> link one </a>
  439.         <a href="/"> link two  </a>
  440. </div></div>
  441.  
  442.  
  443. <div class="muse closed romantic four dd">
  444.     <img src="https://i.imgur.com/xDUIk1v.png">
  445. <div class="bottomtext"><div class="mtitle">
  446.         <h2>   subtitle  </h1>
  447.         <h1>  character name  </h1>
  448. </div></div><div class="overlay"></div><div class="text">
  449.         <p> quote here </p>
  450. </div><div class="bio">
  451.         <a href="/"> link one </a>
  452.         <a href="/"> link two  </a>
  453. </div></div>
  454.  
  455.  
  456.  
  457. <!----------------- DO NOT DELETE ------------------>
  458.  
  459. </div></div><div class="c"><script src="https://kit.fontawesome.com/7a02f4ca01.js" crossorigin="anonymous"></script>
  460. <a href="https://aureacor.tumblr.com" title="aureacor"><i class="fa-solid fa-heart"></i></a></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script><script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script><script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script><script src="/path/to/masonry.pkgd.min.js"></script>
  461.  
  462. <script type="text/javascript">
  463. $(".muse").click(function(){
  464. $('.muse').not(this).removeClass('selected');
  465. $(this).toggleClass('selected')
  466. });
  467. </script>
  468. <script>
  469. $(document).ready(function() {
  470. var $container = $(".grid");
  471. var filters = {};
  472. var $grid = $container.isotope({
  473. itemSelector: ".muse",
  474. transitionDuration: '0s',
  475. masonry: {
  476. gutter: 60,
  477. horizontalOrder: true,
  478. fitWidth: true,
  479. percentPosition: false,
  480. }
  481. });
  482. $(".option-set a").mousedown(function(e) {
  483. var $this = $(this);
  484. var filterAttr = "data-filter-value";
  485. var filterValue = $this.attr(filterAttr);
  486. var $optionSet = $this.parents(".option-set");
  487. var group = $optionSet.attr("data-filter-group");
  488. var filterGroup = filters[group];
  489. if (!filterGroup) {
  490. filterGroup = filters[group] = [];
  491. }
  492. var $selectAll = $optionSet.find('a['+filterAttr+'=""]');
  493. var activeClass = "selected",
  494. exclClass = "exclusive";
  495. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  496. var comboFilter = getComboFilter(filters);
  497. $grid.isotope({
  498. filter: comboFilter
  499. });
  500. $this.toggleClass(activeClass);
  501. e.preventDefault();
  502. });
  503. });
  504. </script> </body> </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!