Skip to content

Commit

Permalink
IULD8-1236: Update Rivet footer for blog and libweb
Browse files Browse the repository at this point in the history
  • Loading branch information
@jameswilson
jameswilson committed Aug 24, 2023
1 parent ddca3ae commit 3f37c14
Show file tree
Hide file tree
Showing 3 changed files with 286 additions and 228 deletions.
212 changes: 107 additions & 105 deletions prod/blogs/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,115 +35,117 @@ <h2 class="rvt-sr-only" id="social-heading">Social media</h2>
<h2 class="rvt-sr-only" id="resources-heading">Additional resources</h2>
<div class="rvt-container-lg">
<div class="rvt-row">
<!-- Address -->
<div class="rvt-cols-3-md">
<div class="rvt-cols-6-md">
<h3 class="rvt-footer-resources__heading">Featured Databases</h3>
<ul class="rvt-footer-resources__list">

<li class="rvt-footer-resources__list-item">
<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>
</li>
<li class="rvt-footer-resources__list-item">

<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/googlescholar">Google Scholar</a>
<div class="rvt-row">
<div class="rvt-cols-6-lg">
<ul class="rvt-footer-resources__list rvt-m-top-none rvt-m-bottom-none">
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/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>
</li>
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/databases/googlescholar">Google Scholar</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>
</li>
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/databases/jstor">JSTOR</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>
</li>
</ul>
</div>
</li>

<li class="rvt-footer-resources__list-item">
<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/jstor">JSTOR</a>
</div>
</li>
<li>
<a class="rvt-c-button__footer rvt-button--plain" target="_blank" rel="noopener noreferrer" href="https://libraries.indiana.edu/databases">All Databases</a>
</li>
</ul>
</div>
<div class="rvt-cols-3-md">
<!-- added "second-column" class to match vertical spacing of column one -->
<ul class="rvt-footer-resources__list second-column">
<li class="rvt-footer-resources__list-item">
<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/worldcat">WorldCAT</a>
</div>
</li>
<li class="rvt-footer-resources__list-item">
<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/nexisuni">Nexis Uni</a>
<div class="rvt-cols-6-lg">
<ul class="rvt-footer-resources__list rvt-m-top-none rvt-m-bottom-none">
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/databases/worldcat">WorldCAT</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>
</li>
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/databases/nexisuni">Nexis Uni</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>
</li>
<li class="rvt-footer-resources__list-item">
<div class="rvt-flex">
<a target="_blank" href="https://libraries.indiana.edu/databases/hathitrust">HathiTrust Digital Library</a>
<span class="rvt-c-tooltip">
<svg role="img" tabindex="0" aria-label="access level" aria-description="Resource available without restriction" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" class="rvt-icon-globe"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm4.17-1a16.97 16.97 0 0 1 .624-3.67l.14-.488A6.005 6.005 0 0 0 2.083 7H4.17Zm0 2H2.083a6.005 6.005 0 0 0 2.85 4.159l-.139-.489A17 17 0 0 1 4.17 9Zm3.07 4.952a6.059 6.059 0 0 0 1.52 0l.523-1.831c.292-1.023.473-2.07.543-3.121H6.174c.07 1.052.251 2.098.543 3.12l.524 1.832ZM6.175 7h3.652a15 15 0 0 0-.543-3.12L8.76 2.048a6.057 6.057 0 0 0-1.518 0l-.524 1.831A15 15 0 0 0 6.174 7Zm5.032 5.67-.14.489A6.005 6.005 0 0 0 13.917 9H11.83a17.004 17.004 0 0 1-.624 3.67Zm0-9.34c.343 1.202.551 2.433.624 3.67h2.087a6.005 6.005 0 0 0-2.85-4.158l.139.488Z"></path></svg>
<span role="tooltip" aria-hidden="true">
Resource available without restriction
</span>
</span>
</div>
</li>
</ul>
</div>
</li>
<li class="rvt-footer-resources__list-item">
<div class="rvt-icon tooltip" aria-describedby="icon description" data-tooltip="Resource available without restriction">
<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-globe"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm4.17-1a16.97 16.97 0 0 1 .624-3.67l.14-.488A6.005 6.005 0 0 0 2.083 7H4.17Zm0 2H2.083a6.005 6.005 0 0 0 2.85 4.159l-.139-.489A17 17 0 0 1 4.17 9Zm3.07 4.952a6.059 6.059 0 0 0 1.52 0l.523-1.831c.292-1.023.473-2.07.543-3.121H6.174c.07 1.052.251 2.098.543 3.12l.524 1.832ZM6.175 7h3.652a15 15 0 0 0-.543-3.12L8.76 2.048a6.057 6.057 0 0 0-1.518 0l-.524 1.831A15 15 0 0 0 6.174 7Zm5.032 5.67-.14.489A6.005 6.005 0 0 0 13.917 9H11.83a17.004 17.004 0 0 1-.624 3.67Zm0-9.34c.343 1.202.551 2.433.624 3.67h2.087a6.005 6.005 0 0 0-2.85-4.158l.139.488Z">
</path></svg> </div>
<span role="tooltip" class="tooltip-info visually-hidden">Resource available without restriction</span>
</span>
<a target="_blank" rel="noopener noreferrer" href="https://libraries.indiana.edu/databases/hathitrust">HathiTrust Digital Library</a>
</div>
</li>
</ul>
</div>
<a class="rvt-button rvt-button--small rvt-c-button__footer rvt-button--plain" href="https://libraries.indiana.edu/databases">All Databases</a>
</div>
<!-- Categorized list of resource links -->
<div class="rvt-cols-3-md">
<div class="rvt-cols-6-md">
<h3 class="rvt-footer-resources__heading">IU Bloomington Libraries</h3>
<ul class="rvt-footer-resources__list">
<li class="rvt-footer-resources__list-item">
<a href="https://libraries.indiana.edu/spaces">Spaces</a>
</li>
<li class="rvt-footer-resources__list-item">
<a href="https://libraries.indiana.edu/staff">Our Staff & Departments</a>
</li>
<li class="rvt-footer-resources__list-item">
<a target="_blank" rel="noopener noreferrer" href="https://blogs.libraries.indiana.edu/"> IU Libraries Blogs</a>
</li>
<li>
<a class="rvt-c-button__footer rvt-button--plain" target="_blank" rel="noopener noreferrer" href="https://give.myiu.org/givenow?account=I320004179%2CP370008414%2CI320004210&sc=IU21GAN1IUOTGNWE00024&utm_source=Indiana_University&utm_medium=referral&utm_campaign=give_now&utm_content=IU21GAN1IUOTGNWE00024">Give Now</a>
</li>
</ul>
</div>
<!-- Categorized list of resource links -->
<div class="rvt-cols-3-md">
<!-- added "second-column" class to match vertical spacing of column one -->
<ul class="rvt-footer-resources__list second-column">
<li class="rvt-footer-resources__list-item">
<a href="https://libraries.indiana.edu/contact-us">Contact Us</a>
</li>
<li class="rvt-footer-resources__list-item">
<a target="_blank" rel="noopener noreferrer" href="https://indiana.sharepoint.com/sites/iub-libraries/SitePages/Home.aspx">Intranet SharePoint (Staff login)</a>
</li>
<li class="rvt-footer-resources__list-item">
<a href="https://libraries.indiana.edu/login">Website (Staff login)</a>
</li>
</ul>
<div class="rvt-row">
<div class="rvt-cols-6-lg">
<ul class="rvt-footer-resources__list rvt-m-top-none rvt-m-bottom-none">
<li class="rvt-footer-resources__list-item">
<a target="_blank" href="https://libraries.indiana.edu/spaces">Spaces</a>
</li>
<li class="rvt-footer-resources__list-item">
<a target="_blank" href="https://libraries.indiana.edu/staff">Our Staff & Departments</a>
</li>
<li class="rvt-footer-resources__list-item">
<a href="https://blogs.libraries.indiana.edu/">IU Libraries Blogs</a>
</li>
</ul>
</div>
<div class="rvt-cols-6-lg">
<ul class="rvt-footer-resources__list rvt-m-top-none rvt-m-bottom-none">
<li class="rvt-footer-resources__list-item">
<a target="_blank" href="https://libraries.indiana.edu/contact-us">Contact Us</a>
</li>
<li class="rvt-footer-resources__list-item">
<a target="_blank" rel="noopener noreferrer" href="https://indiana.sharepoint.com/sites/iub-libraries/SitePages/Home.aspx">Intranet SharePoint (Staff login)</a>
</li>
<li class="rvt-footer-resources__list-item">
<a target="_blank" href="https://libraries.indiana.edu/login">Website (Staff login)</a>
</li>
</ul>
</div>
</div>
<a class="rvt-button rvt-button--small rvt-c-button__footer rvt-button--plain" target="_blank" rel="noopener noreferrer" href="https://give.myiu.org/givenow?account=I320004179%2CP370008414%2CI320004210&sc=IU21GAN1IUOTGNWE00024&utm_source=Indiana_University&utm_medium=referral&utm_campaign=give_now&utm_content=IU21GAN1IUOTGNWE00024">Give Now</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -172,4 +174,4 @@ <h3 class="rvt-footer-resources__heading">IU Bloomington Libraries</h3>
</ul>
</div>
</div>
</footer>
</footer>
89 changes: 72 additions & 17 deletions prod/libweb/footer/css/rivet-footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1338,26 +1338,81 @@
}
}

.rvt-icon,
rvt-icon {
display: inline-flex;
.rvt-footer-resources .rvt-flex > a {
flex-grow: 1;
}

.rvt-icon>svg,
rvt-icon>svg,
rvt-icon:not(:defined)::before {
height: 1rem;
width: 1rem;
.rvt-footer-resources a.rvt-button {
margin-top: 8px;
background-color: #fff;
border: #fff;
color: #900;
}

rvt-icon:not(:defined)::before {
content: '';
display: block;
.rvt-footer-resources a.rvt-button:hover {
background-color: #fa0;
border: #fa0;
color: #900;
}

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

.rvt-footer-resources__list-item svg {
font-size: 0.875rem;
}

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

a + .rvt-c-tooltip {
order: -1;
}

rvt-icon [data-sensor] {
position: absolute;
transition: z-index 0.001ms step-start;
visibility: hidden;
z-index: var(--rvt-icon);
}
.rvt-c-tooltip [role=tooltip] {
position: absolute;
top: 1.5em;
left: 1rem;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
line-height: 1.4;
visibility: hidden;
display: inline-block;
color: #243142;
background: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(36, 49, 66, 0.16);
opacity: 0;
border-radius: 0.25rem;
transition: opacity 0.1s ease-out;
z-index: 99;
text-align: center;
min-width: 14em;
}

a:focus-visible + .rvt-c-tooltip [role=tooltip],
.rvt-c-tooltip:focus-within [role=tooltip],
.rvt-c-tooltip:hover [role=tooltip] {
opacity: 1;
visibility: visible;
}

.rvt-c-tooltip svg {
height: 1em;
width: 1em;
color: #a0abb4;
}

.rvt-c-tooltip svg:focus {
outline: 0.125rem solid #328bb8;
outline-offset: 0.125rem;
}

.rvt-footer-resources .rvt-c-tooltip svg:focus {
outline-color: #fff;
}
Loading

0 comments on commit 3f37c14

Please sign in to comment.