Skip to content

Override theme gem styling for footer and institute footer #245

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

Merged
merged 4 commits into from
Oct 21, 2025
Merged

Override theme gem styling for footer and institute footer #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce19e17
Bringing over institute and library footer parials from theme gem
djanelle-mit Oct 20, 2025
7e78e9b
Overrode styles from mitlib-style for footer and institute footer
djanelle-mit Oct 20, 2025
44e4a0a
Centralized focus styling into mixin and applied to footer interactiv…
djanelle-mit Oct 20, 2025
2c69b15
Clean up comments in effects partial
djanelle-mit Oct 20, 2025
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
14 changes: 11 additions & 3 deletions app/assets/stylesheets/partials/_effects.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// ----------------------------------------------------
// CENTRALIZED LOCATION FOR ANIMATIONS AND TRANSITIONS
// ----------------------------------------------------
// --------------------------------------------------------------
// CENTRALIZED LOCATION FOR ANIMATIONS, TRANSITIONS, AND OUTLINES
// --------------------------------------------------------------

// ANIMATION

Expand All @@ -9,3 +9,11 @@
text-decoration: none; // Included as fallback if text-decoration-color isn't supported
text-decoration: underline transparent;
}

// OUTLINE

@mixin set-focus-outline() {
*:focus-visible {
outline: 2px solid $color-focus-dark;
}
}
4 changes: 1 addition & 3 deletions app/assets/stylesheets/partials/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.institute-bar, .libraries-header {
*:focus-visible {
outline: 2px solid $color-focus-dark;
}
@include set-focus-outline();
}

.institute-bar {
Expand Down
85 changes: 83 additions & 2 deletions app/assets/stylesheets/partials/_layouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// GLOBAL LAYOUT STYLING
.wrap-gridband, .wrap-notice, .wrap-header,
.wrap-header-local, .wrap-breadcrumb, .wrap-content,
.wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim, .wrapper {
Expand All @@ -22,14 +23,94 @@

}

.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height

.wrapper {
margin: 0 auto;
}

// HEADER STYLING
.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height

.hidden-md {
@media (max-width: $bp-screen-md) {
display: none;
}
}

// FOOTER STYLES

.wrap-outer-footer, .wrap-outer-footer-institute {
@include set-focus-outline();
}


.wrap-footer.footer-slim {
padding-top: 32px;
padding-bottom: 32px;
}

.wrap-footer .identity {
margin-top: 0;
align-items: center;
}

.wrap-footer .wrap-logo-lib {
margin-right: 48px;

.logo-mit-lib {
display: block;
}
}

.wrap-footer.footer-slim .wrap-middle .wrap-policies {
padding-top: 0;
margin-left: 0;

nav {
display: flex;
gap: 32px;

a {
font-size: 1.5rem;
color: $color-gray-300;
}
}

}

// Adjust styles for navigation when on smaller screens
@media (max-width: $bp-screen-md) {
.wrap-footer.footer-slim .identity {
margin-bottom: 0;
}

.wrap-footer.footer-slim .wrap-middle .wrap-policies {
border-top: none;

nav {
gap: 24px;
}
}
}

.wrap-footer-institute {
padding-top: 16px;
padding-bottom: 16px;

.footer-info-institute {
align-items: center;
color: $color-gray-300;
}

a.link-logo-mit img {
max-width: unset;
}

.license {
font-size: 1.3rem;

a {
color: $color-gray-300;
}
}

}
17 changes: 17 additions & 0 deletions app/views/layouts/_institute_footer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="wrap-outer-footer-institute layout-band">
<div class="wrap-footer-institute">
<footer class="footer-info-institute" aria-label="MIT footer" role="contentinfo">
<a class="link-logo-mit" href="https://www.mit.edu">
<span class="sr">MIT</span>
<img
src="https://cdn.libraries.mit.edu/files/branding/local/mit_lockup_std-three-line_rgb_white.svg"
alt="MIT logo"
width="105"
/>
</a>

<div class="license">Content created by the MIT Libraries, <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC</a> unless otherwise noted. <a href="https://libraries.mit.edu/research-support/notices/copyright-notify/">Notify us about copyright concerns</a>.
Copy link
Member

@JPrevost JPrevost Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is somewhat outside the scope of this PR as it is carrying forward wording from before, However, much of what we display is metadata from other systems and very little of it is explicitly licensed CC-BY-NC and we never otherwise note that. This probably only belongs on the WordPress site and maybe LibGuides. We can land this as-is now, but I'd prefer we also open a ticket to explicitly review it with the intent of removal.

Copy link
Contributor Author

@djanelle-mit djanelle-mit Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JPrevost Makes sense... would this be a PW ticket or a USE ticket?

Copy link
Member

@JPrevost JPrevost Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@djanelle-mit let's make it USE as it is where our main focus is right now and the change I am suggesting is in USE UI. Thanks!

</div>
</footer><!-- end .footer-info-institute -->
</div>
</div>
29 changes: 29 additions & 0 deletions app/views/layouts/_libraries_footer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="wrap-outer-footer layout-band">
<div class="wrap-footer footer-slim">
<div class="footer-main" aria-label="MIT Libraries footer">
<div class="identity">
<div class="wrap-logo-lib">
<a href="https://libraries.mit.edu" class="logo-mit-lib">
<span class="sr">MIT Libraries home</span>
<img
src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg"
alt="MIT Libraries logo"
width="80"
/>
</a>
</div>

<div class="wrap-middle">
<div class="wrap-policies">
<nav aria-label="MIT Libraries policy menu">
<a href="https://libraries.mit.edu/privacy" class="link-sub">Privacy</a>
<a href="https://libraries.mit.edu/permissions" class="link-sub">Permissions</a>
<a href="https://libraries.mit.edu/accessibility" class="link-sub">Accessibility</a>
<a href="https://libraries.mit.edu/contact" class="link-sub">Contact us</a>
</nav>
</div>
</div>
</div><!-- end .identity -->
</div>
</div>
</div>