Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IULD8-1236: Update Rivet footer for blog and libweb #17

Open
wants to merge 1 commit into
base: navigation-overhaul-libweb
Choose a base branch
from
+286 −228
Open

IULD8-1236: Update Rivet footer for blog and libweb #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 107 additions & 105 deletions prod/blogs/footer.html
View file
Open in desktop
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
Open in desktop
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