IULD8-1236: Update Rivet footer for blog and libweb

[jameswilson]

Changes from the previous codepens and the blogs-dev and the rivet-components examples include:

Proposed changes here: https://codepen.io/jameswilson/pen/MWZwOEd

1.- Refactored the tooltip functionality for improved tab navigation, accessibility, and look/feel theming. I’ve adopted the Rivet custom class approach with rvt-c-tooltip. This can be used generically on the site for Resource Access icons.

Before:

<div class="rvt-icon tooltip" aria-describedby="icon description" data-tooltip="Resource available to authorized IU Bloomington users (on or off campus)">  
  <div aria-hidden="true" data-rvt-icon-svg="" class="rvt-icon">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" id="rvt-icon-lock-closed"><path d="M9 10a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0v-1Z"></path><path d="M7 0a3 3 0 0 0-3 3v2a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2V3a3 3 0 0 0-3-3H7Zm3 5H6V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2Zm-6 9V7h8v7H4Z"></path></svg>
  </div>
  <span role="tooltip" class="tooltip-info visually-hidden">
    Resource available to authorized IU Bloomington users (on or off campus)</span>
  </span>  
  <a target="_blank" rel="noopener noreferrer" href="https://libraries.indiana.edu/databases/onesearch">OneSearch@IU</a>
</div>

After:

<div class="rvt-flex">
  <a href="/databases/onesearch">OneSearch@IU</a>
  <span class="rvt-c-tooltip">
    <svg role="img" tabindex="0" aria-label="access level" aria-description="Resource available to authorized IU Bloomington users (on or off campus)" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" class="rvt-icon-lock-closed"><path d="M9 10a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0v-1Z"></path><path d="M7 0a3 3 0 0 0-3 3v2a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2V3a3 3 0 0 0-3-3H7Zm3 5H6V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2Zm-6 9V7h8v7H4Z"></path></svg>
    <span role="tooltip" aria-hidden="true">
      Resource available to authorized IU Bloomington users (on or off campus)
    </span>
  </span>
</div>

.rvt-footer-resources {
  .rvt-flex > a {
    flex-grow: 1;
  }

  a.rvt-button {
    margin-top: 8px;
    background-color: #ffffff;
    border: #ffffff;
    color: #990000;

    &:hover {
      background-color: #ffAA00;
      border: #ffaa00;
      color: #990000;
    }
  }
}

.rvt-footer-resources__heading {
  display:inline-block;
}

.rvt-footer-resources__list-item svg {
  // Match font size of footer resource list item links.
  font-size: 0.875rem;
}

.rvt-c-tooltip {
  position: relative;
  cursor: pointer;
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  
  a + & {
    order: -1;
  }

  [role="tooltip"] {
    position: absolute;
    top: 1.5em;
    left: 1rem;
    font-size: 0.75rem;
    padding: .25rem .5rem;
    line-height: 1.4;
    visibility: hidden;
    display: inline-block;
    color: #243142;
    background: #fff;
    box-shadow: 0 .25rem .5rem rgb(36, 49, 66, .16);
    opacity: 0;
    border-radius: .25rem;
    transition: opacity 0.1s ease-out;
    z-index: 99;
    text-align: center;
    min-width: 14em;
  }
  
  a:focus-visible + &,
  &:focus-within,
  &:hover {
    [role="tooltip"] {
      opacity: 1;
      visibility: visible;
    }
  }
  
  svg {
    height: 1em;
    width: 1em;
    color: #A0ABB4;
    
    &:focus {
      outline: 0.125rem solid #328bb8;
      outline-offset: 0.125rem;
      
      .rvt-footer-resources & {
        outline-color: #fff;
      }
    }
  }
}

2.- I’ve overhauled the multi-column layout so that the Footer Resources lists stack properly on mobile. I’m using the Rivet nested grid approach to ensure the two columns stack down into what looks like a single column on mobile, and have pulled the button down to the bottom of each two-col list.

3.- Fixed a list alignment issue in the 4-column footer resources lists on desktop and tablet. The tooltip access icons were what was causing the height to be thrown off, fixed with css: svg { height: 1em; width: 1em; }