page one: intentions — description

<!DOCTYPE html PUBLIC>

<!------------------------------------------------------

      intentions @ aureacor

    - isotope filter from https://isotope.metafizzy.co/
    - icons from fontawesome
    - do not remove credit
    - do not remove credit

-------------------------------------------------------->
  <title>{title}</title>

    <head>

<style type="text/css">

:root {
  --font: libre baskerville;
  --background: #F9F6F0;
  --link: #4a4643;
  --buttonhover: #000;
  --hover: #8a7f76;

  --charactername: #4a4643;
  --subtitle: #4a4643;
  --desc: #4a4643;
  --border: #4a4643;

  --buttonchecked: black;
  --buttonunchecked: #8a7f76;
  --filterborder: #4a4643;

  --width: 250px;
  --height: 410px;
  --imgmove: -35px;

}

/*  NOTES
1. image is 250 x 350
2. change height to 315px here for a square muse
3. try not to change the width below 200px unless you know how to change the proper settings
4. change "imgmove" depending on what you like most, higher negative number means it'll move up higher. I suggest -35px for square images
5. don't exceed 4 lines of description next unless you change the "--imgmove" px as well. doing so will change the image.  */


 /* CONTAINERS */

::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */ }

* { box-sizing: border-box; }
body {  background: var(--background); height: 100%; }

a {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform:uppercase;
  font-weight: 600;
  position: relative;
  color: var(--link);
  text-decoration: none;
}

.container {
    margin-top: 45px;
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "side-information characters";
}

.side-information {
    grid-area: side-information;
    padding-left: 70px;
    margin-top: 60px;
    position: fixed;
    width: 20%;
    min-width: 190px;
  }

.side-information h1 {
    font-family: var(--font);
    font-size: 45px;
    word-break: break-word;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0px 0px 7px 0px;
}

.sideinfo {margin-top: 20px;}
.sideinfo p {
    font-family: var(--font);
    font-size: 12px;
    line-height: 22px;
}
.sideinfo b {
    font-family: var(--font);
    font-size: 10px;
    line-height: 22px;
    letter-spacing: 1px;
}

.filters { margin-top: 55px;}

.characters {
     display: flex;
     grid-area: characters;
     margin-top: 60px;
     margin-left: 100px;
     margin-bottom: 30px;
}
.character:hover { cursor: pointer; }

#back a {
    color: var(--link);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.7px;
    transition: 0.3s ease all;
}

#back a:hover {color: var(--hover); transition: 0.3s ease all; }


/* ---- button activity ---- */

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button:hover {  color: var(--buttonhover);  transition: 0.3s ease all;}
.button.is-checked {  color: var(--buttonchecked);}

.button {
  color: var(--buttonunchecked);
  background: var(--background);
  padding: 2px 15px 2px 0px;
  display: inline-block;
  border: none;
  border-radius: 7px;
  margin: 5px;
  font-family: sans-serif;
  font-size: 14.5px;
  cursor: pointer;
  transition: 0.3s ease all;
  font-family: var(--font);
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.ui-group {  margin-bottom: 30px; }
.ui-group .button-group {  display: inline-block;}

.ui-group h3 {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: -1px;
  border-bottom: 1px solid var(--filterborder);
  padding-bottom: 6px;
}


/* ---- MUSE  ---- */

.muse * {  transition: 0.3s ease all; }
.muse:hover { cursor: pointer;}

.muse {
  margin-left: 50px;
  margin-bottom: 60px;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.muse img {
  width: var(--width);
  height: calc(var(--height) - 65px);
  object-fit: cover;
  display: block;
}

.muse h3 {
  color: var(--charactername);
  font-family: var(--font);
  font-weight: 400;
  line-height: 28px;
  font-size: 22px;
  letter-spacing: 1.1px;
  margin: 0;
  text-transform: uppercase;
  padding: 8px 0px 0px;
  word-break: break-word;

}

.muse h1 {
  color: var(--subtitle);
  font-family: var(--font);
  margin: -3px 0px 0px 0px;
  padding: 0px 0px 10px;
  line-height: 25px;
  font-weight: 500;
  font-size: 15px;
  font-style: italic;
  word-break: break-all;

}

/* ---- active muse styling  ---- */
.focus-content p {padding-left: 10px; border-left: 1px solid black;}
.muse.selected p {  margin-top: -25px;}
.muse.selected h1 {color: transparent;     transition: 0.2s ease all; }

#one .muse.selected img {  margin-top: calc(var(--imgmove) - 2px);}
#two .muse.selected img {  margin-top:  calc(var(--imgmove) - 20px);}
#three .muse.selected img {  margin-top:  calc(var(--imgmove) - 38px);}
#four .muse.selected img {  margin-top: calc(var(--imgmove) - 57px);}


.muse p {
  margin-bottom: -8px;
  color: var(--desc);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.5;
  font-size: 12.5px;
  letter-spacing: 1.5 px;
  line-height: 18px;
}


.muse a { margin-top: -100px; padding: 0px; transition: 0.3s ease all; }
.muse a:hover {  color: var(--hover);  transition: 0.3s ease all; }
#muselinks {margin-top: 20px;}



/* ---- CREDIT ---- */

.credit { position: fixed;     bottom: 0.7em;    right: 1em; }
.credit a {font-size: 10px; text-decoration: none; transition: 0.3s ease all;}

</style>
</head>
<body>

<div class="container">
<div class="side-information">


<h1>masterlist</h1>
<div id="back"><a href="/"><i class="fa-solid fa-arrow-left-long"></i> return</i></a> </div>
<div class="sideinfo">
    <p>Please double-check all the information provided on this page before using a face claim and cast characters appropriately. If you see something wrong or broken, or would like a role added, message us. </p>
    <p><b> LAST UPDATED </b>: march 22, 2022</p>
</div>

<!--  INSTRUCTIONS : PLEASE READ
 1. You can add as many filters buttons & filter groups as you want.
 2. Do not delete the "all" button -->


<div class="filters">
  <div class="ui-group">
    <h3>availability</h3>
    <div class="button-group js-radio-button-group" data-filter-group="color">
      <button class="button is-checked" data-filter="">all</button>
      <button class="button" data-filter=".open">open</button>
      <button class="button" data-filter=".closed">closed</button>

    </div>
  </div>


  <div class="ui-group">
    <h3>year</h3>
    <div class="button-group js-radio-button-group" data-filter-group="size">
      <button class="button is-checked" data-filter="">all</button>
      <button class="button" data-filter=".filter1">filter 1</button>
      <button class="button" data-filter=".filter2">filter 2</button>
      <button class="button" data-filter=".filter3">filter 3</button>
      <button class="button" data-filter=".filter4">filter 4</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>status</h3>
    <div class="button-group js-radio-button-group" data-filter-group="shape">
      <button class="button is-checked" data-filter="">all</button>
      <button class="button" data-filter=".filter01">filter 01</button>
    </div>
  </div>


</div>
</div>


  <div class="characters">

 <!-- MUSES GO BELOW HERE. Go to /intentions/guide for a detailed guide.-->

<div id="one">  <!-- change "one" to the number of lines your desc has. -->
<div class="muse item open filter1 1 filter01">
     <img src="https://i.imgur.com/xDUIk1v.png"/>
     <h3>name</h3>
     <h1>subtitle</h1>
         <div class="focus-content">
              <p>Lorem ipsum dolor sit amet.</p>
              <div id="muselinks">
              <a href="/">bio</a> /
              <a href="/">tag</a>
</div></div></div></div>


     <div id="two">
<div class="muse item open filter2">
<img src="https://i.imgur.com/xDUIk1v.png"/>
     <h3>name</h3>
     <h1>subtitle</h1>
         <div class="focus-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tellus suscipit. </p>
              <div id="muselinks">
              <a href="/">bio</a> /
              <a href="/">tag</a>
</div></div></div></div>


     <div id="three">
<div class="muse item closed filter4 filter01">
<img src="https://i.imgur.com/xDUIk1v.png"/>
     <h3>name</h3>
     <h1>subtitle</h1>
         <div class="focus-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at tellus suscipit, auctor eros arom. </p>
              <div id="muselinks">
              <a href="/">bio</a> /
              <a href="/">tag</a>
</div></div></div></div>


     <div id="four">
<div class="muse item closed filter3 filter01">
<img src="https://i.imgur.com/xDUIk1v.png"/>
     <h3>name</h3>
     <h1>subtitle</h1>
         <div class="focus-content">
              <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>
              <div id="muselinks">
              <a href="/">bio</a> /
              <a href="/">tag</a>
</div></div></div></div>

 <!----- MUSES GO ABOVE THIS LINE , DO NOT TOUCH ANYTHING BELOW ------>


</div>
<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>
<script type="text/javascript">
      $(".muse").click(function(){
    $('.muse').not(this).removeClass('selected');
    $(this).toggleClass('selected')

});
</script>
<script src="https://kit.fontawesome.com/7a02f4ca01.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

<script type="text/javascript">
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.characters').isotope({
  itemSelector: '.item'
});

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function( event ) {
  var $button = $( event.currentTarget );
  // get group key
  var $buttonGroup = $button.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $button.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function( event ) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $( event.currentTarget );
    $button.addClass('is-checked');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}


</script>
 <!-----end filter scripts------>


</body>


</html>