Skip to content

Commit 53c2be7

Browse files
djanelle-mitdjanelle-mit
authored
Merge pull request #245 from MITLibraries/use-81
Override theme gem styling for footer and institute footer
2 parents bba7bc8 + 2c69b15 commit 53c2be7

File tree

5 files changed

+141
-8
lines changed

5 files changed

+141
-8
lines changed

‎app/assets/stylesheets/partials/_effects.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
// ----------------------------------------------------
2-
// CENTRALIZED LOCATION FOR ANIMATIONS AND TRANSITIONS
3-
// ----------------------------------------------------
1+
// --------------------------------------------------------------
2+
// CENTRALIZED LOCATION FOR ANIMATIONS, TRANSITIONS, AND OUTLINES
3+
// --------------------------------------------------------------
44

55
// ANIMATION
66

@@ -9,3 +9,11 @@
99
text-decoration: none; // Included as fallback if text-decoration-color isn't supported
1010
text-decoration: underline transparent;
1111
}
12+
13+
// OUTLINE
14+
15+
@mixin set-focus-outline() {
16+
*:focus-visible {
17+
outline: 2px solid $color-focus-dark;
18+
}
19+
}

‎app/assets/stylesheets/partials/_header.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.institute-bar, .libraries-header {
2-
*:focus-visible {
3-
outline: 2px solid $color-focus-dark;
4-
}
2+
@include set-focus-outline();
53
}
64

75
.institute-bar {

‎app/assets/stylesheets/partials/_layouts.scss‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// GLOBAL LAYOUT STYLING
12
.wrap-gridband, .wrap-notice, .wrap-header,
23
.wrap-header-local, .wrap-breadcrumb, .wrap-content,
34
.wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim, .wrapper {
@@ -22,14 +23,94 @@
2223

2324
}
2425

25-
.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height
26-
2726
.wrapper {
2827
margin: 0 auto;
2928
}
3029

30+
// HEADER STYLING
31+
.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height
32+
3133
.hidden-md {
3234
@media (max-width: $bp-screen-md) {
3335
display: none;
3436
}
3537
}
38+
39+
// FOOTER STYLES
40+
41+
.wrap-outer-footer, .wrap-outer-footer-institute {
42+
@include set-focus-outline();
43+
}
44+
45+
46+
.wrap-footer.footer-slim {
47+
padding-top: 32px;
48+
padding-bottom: 32px;
49+
}
50+
51+
.wrap-footer .identity {
52+
margin-top: 0;
53+
align-items: center;
54+
}
55+
56+
.wrap-footer .wrap-logo-lib {
57+
margin-right: 48px;
58+
59+
.logo-mit-lib {
60+
display: block;
61+
}
62+
}
63+
64+
.wrap-footer.footer-slim .wrap-middle .wrap-policies {
65+
padding-top: 0;
66+
margin-left: 0;
67+
68+
nav {
69+
display: flex;
70+
gap: 32px;
71+
72+
a {
73+
font-size: 1.5rem;
74+
color: $color-gray-300;
75+
}
76+
}
77+
78+
}
79+
80+
// Adjust styles for navigation when on smaller screens
81+
@media (max-width: $bp-screen-md) {
82+
.wrap-footer.footer-slim .identity {
83+
margin-bottom: 0;
84+
}
85+
86+
.wrap-footer.footer-slim .wrap-middle .wrap-policies {
87+
border-top: none;
88+
89+
nav {
90+
gap: 24px;
91+
}
92+
}
93+
}
94+
95+
.wrap-footer-institute {
96+
padding-top: 16px;
97+
padding-bottom: 16px;
98+
99+
.footer-info-institute {
100+
align-items: center;
101+
color: $color-gray-300;
102+
}
103+
104+
a.link-logo-mit img {
105+
max-width: unset;
106+
}
107+
108+
.license {
109+
font-size: 1.3rem;
110+
111+
a {
112+
color: $color-gray-300;
113+
}
114+
}
115+
116+
}

‎app/views/layouts/_institute_footer.html.erb‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="wrap-outer-footer-institute layout-band">
2+
<div class="wrap-footer-institute">
3+
<footer class="footer-info-institute" aria-label="MIT footer" role="contentinfo">
4+
<a class="link-logo-mit" href="https://www.mit.edu">
5+
<span class="sr">MIT</span>
6+
<img
7+
src="https://cdn.libraries.mit.edu/files/branding/local/mit_lockup_std-three-line_rgb_white.svg"
8+
alt="MIT logo"
9+
width="105"
10+
/>
11+
</a>
12+
13+
<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>.
14+
</div>
15+
</footer><!-- end .footer-info-institute -->
16+
</div>
17+
</div>

‎app/views/layouts/_libraries_footer.html.erb‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="wrap-outer-footer layout-band">
2+
<div class="wrap-footer footer-slim">
3+
<div class="footer-main" aria-label="MIT Libraries footer">
4+
<div class="identity">
5+
<div class="wrap-logo-lib">
6+
<a href="https://libraries.mit.edu" class="logo-mit-lib">
7+
<span class="sr">MIT Libraries home</span>
8+
<img
9+
src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg"
10+
alt="MIT Libraries logo"
11+
width="80"
12+
/>
13+
</a>
14+
</div>
15+
16+
<div class="wrap-middle">
17+
<div class="wrap-policies">
18+
<nav aria-label="MIT Libraries policy menu">
19+
<a href="https://libraries.mit.edu/privacy" class="link-sub">Privacy</a>
20+
<a href="https://libraries.mit.edu/permissions" class="link-sub">Permissions</a>
21+
<a href="https://libraries.mit.edu/accessibility" class="link-sub">Accessibility</a>
22+
<a href="https://libraries.mit.edu/contact" class="link-sub">Contact us</a>
23+
</nav>
24+
</div>
25+
</div>
26+
</div><!-- end .identity -->
27+
</div>
28+
</div>
29+
</div>

0 commit comments

Comments
 (0)