API tools faq
paste
aureacor

page one: intentions

aureacor
Mar 19th, 2022 (edited)
9,344
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!------------------------------------------------------
  4.  
  5.      intentions @ aureacor
  6.  
  7.    - isotope filter from https://isotope.metafizzy.co/
  8.    - icons from fontawesome
  9.    - do not remove credit
  10.    - do not remove credit
  11.  
  12. -------------------------------------------------------->
  13.   <title>{title}</title>
  14.    
  15.     <head>
  16.  
  17. <style type="text/css">
  18.  
  19. :root {
  20.   --font: libre baskerville;
  21.   --background: #F9F6F0;
  22.   --link: #4a4643;
  23.   --buttonhover: #000;
  24.   --hover: #8a7f76;
  25.    
  26.   --charactername: #4a4643;
  27.   --subtitle: #4a4643;
  28.   --desc: #4a4643;
  29.   --border: #4a4643;
  30.  
  31.   --filtertitle: black;
  32.   --buttonchecked: black;
  33.   --buttonunchecked: #8a7f76;
  34.   --filterborder: #4a4643;
  35.    
  36.   --width: 250px;
  37.   --height: 410px;
  38.   --imgmove: -35px;
  39.  
  40. }
  41.  
  42. /*  NOTES
  43. 1. image is 250 x 350
  44. 2. change height to 315px here for a square muse
  45. 3. try not to change the width below 200px unless you know how to change the proper settings
  46. 4. change "imgmove" depending on what you like most, higher negative number means it'll move up higher. I suggest -35px for square images
  47. 5. don't exceed 4 lines of description next unless you change the "--imgmove" px as well. doing so will change the image.  */
  48.  
  49.  
  50.  /* CONTAINERS */
  51.  
  52. ::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */ }
  53.  
  54. * { box-sizing: border-box; }
  55. body {  background: var(--background); height: 100%; }
  56.  
  57. a {
  58.   font-size: 12px;
  59.   letter-spacing: 1px;
  60.   text-transform:uppercase;
  61.   font-weight: 600;
  62.   position: relative;
  63.   color: var(--link);
  64.   text-decoration: none;
  65. }
  66.  
  67. .container {  
  68.     margin-top: 45px;
  69.     display: grid;
  70.     grid-template-columns: 0.2fr 0.8fr;
  71.     grid-template-rows: 1fr;
  72.     grid-auto-columns: 1fr;
  73.     grid-auto-rows: 1fr;
  74.     gap: 0px 0px;
  75.     grid-auto-flow: row;
  76.     grid-template-areas:
  77.     "side-information characters";
  78. }
  79.  
  80. .side-information {
  81.     grid-area: side-information;
  82.     padding-left: 70px;
  83.     margin-top: 60px;
  84.     position: fixed;
  85.     width: 20%;
  86.     min-width: 190px;
  87.   }
  88.  
  89. .side-information h1 {
  90.     font-family: var(--font);
  91.     font-size: 45px;
  92.     word-break: break-word;
  93.     text-transform: uppercase;
  94.     font-weight: 400;
  95.     letter-spacing: 1px;
  96.     margin: 0px 0px 7px 0px;
  97. }
  98.    
  99. .filters { margin-top: 70px;}
  100.  
  101. .characters {
  102.      display: flex;
  103.      grid-area: characters;
  104.      margin-top: 60px;
  105.      margin-left: 100px;
  106.      margin-bottom: 30px;
  107. }
  108. .character:hover { cursor: pointer; }
  109.  
  110. #back a {
  111.     color: var(--link);
  112.     font-size: 10px;
  113.     font-weight: 500;
  114.     letter-spacing: 0.7px;
  115.     padding-bottom: 3px;
  116.     transition: 0.3s ease all;
  117. }
  118.  
  119. #back a:hover {color: var(--hover); transition: 0.3s ease all; }
  120.  
  121.  
  122. /* ---- button activity ---- */
  123.  
  124. .button-group .button {
  125.   float: left;
  126.   border-radius: 0;
  127.   margin-left: 0;
  128.   margin-right: 1px;
  129. }
  130.  
  131. .button:hover {  color: var(--buttonhover);  transition: 0.3s ease all;}
  132. .button.is-checked {  color: var(--buttonchecked);}
  133.  
  134. .button {
  135.   color: var(--buttonunchecked);
  136.   background: var(--background);
  137.   padding: 2px 15px 2px 0px;
  138.   display: inline-block;
  139.   border: none;
  140.   border-radius: 7px;
  141.   margin: 5px;
  142.   font-family: sans-serif;
  143.   font-size: 14.5px;
  144.   cursor: pointer;
  145.   transition: 0.3s ease all;
  146.   font-family: var(--font);
  147. }
  148.  
  149. .button-group:after {
  150.   content: '';
  151.   display: block;
  152.   clear: both;
  153. }
  154.  
  155. .ui-group {  margin-bottom: 30px; }
  156. .ui-group .button-group {  display: inline-block;}
  157.  
  158. .ui-group h3 {
  159.   color: var(--filtertitle);
  160.   font-family: var(--font);
  161.   font-size: 13px;
  162.   font-weight: 400;
  163.   letter-spacing: 1px;
  164.   text-transform: uppercase;
  165.   margin-bottom: -1px;
  166.   border-bottom: 1px solid var(--filterborder);
  167.   padding-bottom: 6px;
  168. }
  169.  
  170.  
  171. /* ---- MUSE  ---- */
  172.  
  173. .muse * {  transition: 0.3s ease all; }
  174. .muse:hover { cursor: pointer;}
  175.  
  176. .muse {
  177.   margin-left: 50px;
  178.   margin-bottom: 60px;
  179.   width: var(--width);
  180.   height: var(--height);
  181.   overflow: hidden;
  182.   border-bottom: 1px solid var(--border);
  183. }
  184.  
  185. .muse img {
  186.   width: var(--width);
  187.   height: calc(var(--height) - 65px);
  188.   object-fit: cover;
  189.   display: block;
  190. }
  191.  
  192. .muse h3 {
  193.   color: var(--charactername);
  194.   font-family: var(--font);
  195.   font-weight: 400;
  196.   line-height: 28px;
  197.   font-size: 22px;
  198.   letter-spacing: 1.1px;
  199.   margin: 0;
  200.   text-transform: uppercase;
  201.   padding: 8px 0px 0px;
  202.   word-break: break-word;
  203.  
  204. }
  205.  
  206. .muse h1 {
  207.   color: var(--subtitle);
  208.   font-family: var(--font);
  209.   margin: -3px 0px 0px 0px;
  210.   padding: 0px 0px 10px;
  211.   line-height: 25px;
  212.   font-weight: 500;
  213.   font-size: 15px;
  214.   font-style: italic;
  215.   word-break: break-all;
  216.  
  217. }
  218.  
  219. /* ---- active muse styling  ---- */
  220. .focus-content p {padding-left: 10px; border-left: 1px solid black;}
  221. .muse.selected p {  margin-top: -25px;}
  222. .muse.selected h1 {color: transparent;     transition: 0.2s ease all; }
  223.  
  224. #one .muse.selected img {  margin-top: calc(var(--imgmove) - 2px);}
  225. #two .muse.selected img {  margin-top:  calc(var(--imgmove) - 20px);}
  226. #three .muse.selected img {  margin-top:  calc(var(--imgmove) - 38px);}
  227. #four .muse.selected img {  margin-top: calc(var(--imgmove) - 57px);}  
  228.  
  229.  
  230. .muse p {
  231.   margin-bottom: -8px;
  232.   color: var(--desc);
  233.   font-family: var(--font);
  234.   font-weight: 300;
  235.   line-height: 1.5;
  236.   font-size: 12.5px;
  237.   letter-spacing: 1.5 px;
  238.   line-height: 18px;
  239. }
  240.  
  241.  
  242. .muse a { margin-top: -100px; padding: 0px; transition: 0.3s ease all; }
  243. .muse a:hover {  color: var(--hover);  transition: 0.3s ease all; }
  244. #muselinks {margin-top: 20px;}
  245.  
  246.  
  247.  
  248. /* ---- CREDIT ---- */
  249.  
  250. .credit { position: fixed;     bottom: 0.7em;    right: 1em; }
  251. .credit a {font-size: 10px; text-decoration: none; transition: 0.3s ease all;}
  252.  
  253. </style>
  254. </head>
  255. <body>
  256.  
  257. <div class="container">
  258. <div class="side-information">
  259.  
  260. <h1>masterlist</h1>
  261. <div id="back"><a href="/"><i class="fa-solid fa-arrow-left-long"></i> return</i></a></div>
  262.  
  263. <!--  INSTRUCTIONS : PLEASE READ
  264. 1. You can add as many filters buttons & filter groups as you want.
  265. 2. Do not delete the "all" button -->
  266.  
  267.  
  268. <div class="filters">
  269.   <div class="ui-group">
  270.     <h3>availability</h3>
  271.     <div class="button-group js-radio-button-group" data-filter-group="color">
  272.       <button class="button is-checked" data-filter="">all</button>
  273.       <button class="button" data-filter=".open">open</button>
  274.       <button class="button" data-filter=".closed">closed</button>
  275.  
  276.     </div>
  277.   </div>
  278.  
  279.  
  280.   <div class="ui-group">
  281.     <h3>year</h3>
  282.     <div class="button-group js-radio-button-group" data-filter-group="size">
  283.       <button class="button is-checked" data-filter="">all</button>
  284.       <button class="button" data-filter=".filter1">filter 1</button>
  285.       <button class="button" data-filter=".filter2">filter 2</button>
  286.       <button class="button" data-filter=".filter3">filter 3</button>
  287.       <button class="button" data-filter=".filter4">filter 4</button>
  288.     </div>
  289.   </div>
  290.  
  291.   <div class="ui-group">
  292.     <h3>status</h3>
  293.     <div class="button-group js-radio-button-group" data-filter-group="shape">
  294.       <button class="button is-checked" data-filter="">all</button>
  295.       <button class="button" data-filter=".filter01">filter 01</button>
  296.     </div>
  297.   </div>
  298.  
  299.  
  300. </div>
  301. </div>
  302.  
  303.  
  304.   <div class="characters">
  305.  
  306.  <!-- MUSES GO BELOW HERE. Go to /intentions/guide for a detailed guide.-->
  307.  
  308. <div id="one">  <!-- change "one" to the number of lines your desc has. -->
  309. <div class="muse item open filter1 1 filter01">
  310.      <img src="https://i.imgur.com/xDUIk1v.png"/>
  311.      <h3>name</h3>
  312.      <h1>subtitle</h1>
  313.          <div class="focus-content">
  314.               <p>Lorem ipsum dolor sit amet.</p>
  315.               <div id="muselinks">
  316.               <a href="/">bio</a> /
  317.               <a href="/">tag</a>
  318. </div></div></div></div>
  319.  
  320.  
  321.      <div id="two">
  322. <div class="muse item open filter2">
  323. <img src="https://i.imgur.com/xDUIk1v.png"/>
  324.      <h3>name</h3>
  325.      <h1>subtitle</h1>
  326.          <div class="focus-content">
  327.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tellus suscipit. </p>
  328.               <div id="muselinks">
  329.               <a href="/">bio</a> /
  330.               <a href="/">tag</a>
  331. </div></div></div></div>
  332.  
  333.  
  334.      <div id="three">
  335. <div class="muse item closed filter4 filter01">
  336. <img src="https://i.imgur.com/xDUIk1v.png"/>
  337.      <h3>name</h3>
  338.      <h1>subtitle</h1>
  339.          <div class="focus-content">
  340.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tellus suscipit, auctor eros arom. </p>
  341.               <div id="muselinks">
  342.               <a href="/">bio</a> /
  343.               <a href="/">tag</a>
  344. </div></div></div></div>
  345.  
  346.  
  347.      <div id="four">
  348. <div class="muse item closed filter3 filter01">
  349. <img src="https://i.imgur.com/xDUIk1v.png"/>
  350.      <h3>name</h3>
  351.      <h1>subtitle</h1>
  352.          <div class="focus-content">
  353.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tellus suscipit, auctor eros a, pharetra felis. Aenean dictum ut lorem ac consequat. </p>
  354.               <div id="muselinks">
  355.               <a href="/">bio</a> /
  356.               <a href="/">tag</a>
  357. </div></div></div></div>
  358.  
  359.  <!----- MUSES GO ABOVE THIS LINE , DO NOT TOUCH ANYTHING BELOW ------>
  360.  
  361.  
  362. </div>
  363. <div class="credit"><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/2.1.1/jquery.min.js"></script>
  364. <script type="text/javascript">
  365.       $(".muse").click(function(){
  366.     $('.muse').not(this).removeClass('selected');
  367.     $(this).toggleClass('selected')
  368.  
  369. });
  370. </script>
  371. <script src="https://kit.fontawesome.com/7a02f4ca01.js" crossorigin="anonymous"></script>
  372. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  373. <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
  374.  
  375. <script type="text/javascript">
  376. // external js: isotope.pkgd.js
  377.  
  378. // init Isotope
  379. var $grid = $('.characters').isotope({
  380.   itemSelector: '.item'
  381. });
  382.  
  383. // store filter for each group
  384. var filters = {};
  385.  
  386. $('.filters').on( 'click', '.button', function( event ) {
  387.   var $button = $( event.currentTarget );
  388.   // get group key
  389.   var $buttonGroup = $button.parents('.button-group');
  390.   var filterGroup = $buttonGroup.attr('data-filter-group');
  391.   // set filter for group
  392.   filters[ filterGroup ] = $button.attr('data-filter');
  393.   // combine filters
  394.   var filterValue = concatValues( filters );
  395.   // set filter for Isotope
  396.   $grid.isotope({ filter: filterValue });
  397. });
  398.  
  399. // change is-checked class on buttons
  400. $('.button-group').each( function( i, buttonGroup ) {
  401.   var $buttonGroup = $( buttonGroup );
  402.   $buttonGroup.on( 'click', 'button', function( event ) {
  403.     $buttonGroup.find('.is-checked').removeClass('is-checked');
  404.     var $button = $( event.currentTarget );
  405.     $button.addClass('is-checked');
  406.   });
  407. });
  408.  
  409. // flatten object by concatting values
  410. function concatValues( obj ) {
  411.   var value = '';
  412.   for ( var prop in obj ) {
  413.     value += obj[ prop ];
  414.   }
  415.   return value;
  416. }
  417.  
  418.  
  419. </script>
  420.  <!-----end filter scripts------>
  421.  
  422.  
  423. </body>
  424.  
  425.  
  426. </html>
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!