Skip to content

Commit 1761ded

Browse files
djanelle-mitdjanelle-mit
committed
First pass of creating new header style
1 parent e8ac04e commit 1761ded

File tree

8 files changed

+150
-27
lines changed

8 files changed

+150
-27
lines changed

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import "libraries-main";
66
@import "partials/_variables";
77
@import "partials/_alerts";
8+
@import "partials/_effects";
89
@import "partials/_filters";
910
@import "partials/_global_alerts";
1011
@import "partials/_header";

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// ----------------------------------------------------
2+
// CENTRALIZED LOCATION FOR ANIMATIONS AND TRANSITIONS
3+
// ----------------------------------------------------
4+
5+
// ANIMATION
6+
7+
@mixin text-decoration-animation( $speed ) {
8+
transition: text-decoration #{$speed} ease;
9+
text-decoration: none; // Included as fallback if text-decoration-color isn't supported
10+
text-decoration: underline transparent;
11+
}

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

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,94 @@
1+
.institute-bar, .libraries-header {
2+
*:focus-visible {
3+
outline: 2px solid $color-focus-dark;
4+
}
5+
}
6+
17
.institute-bar {
28
background-color: $color-gray-900;
3-
4-
.wrap-header {
5-
background: none;
6-
9+
10+
.wrapper {
11+
display: flex;
712
padding-top: 16px;
813
padding-bottom: 16px;
914
}
1015

11-
}
16+
.link-logo-mit { height: 24px; } // Sets link around logo to match logo height
17+
18+
nav {
19+
flex: 1;
20+
display: flex;
21+
gap: 24px;
22+
justify-content: flex-end;
23+
24+
a {
25+
color: $color-gray-300;
26+
font-size: 1.5rem;
27+
padding-top: 2px;
28+
@include text-decoration-animation(150ms);
29+
30+
&:hover {
31+
text-decoration: underline;
32+
}
33+
}
34+
}
35+
36+
}
37+
38+
.libraries-header {
39+
background-color: $color-black;
40+
41+
.wrapper {
42+
background: url("https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg") no-repeat -48px -250px;
43+
padding-top: 32px;
44+
padding-bottom: 32px;
45+
}
46+
47+
.navigation-bar {
48+
display: flex;
49+
50+
> h1 {
51+
display: flex;
52+
align-items: center;
53+
gap: 24px;
54+
}
55+
}
56+
57+
.divider {
58+
width: 1px;
59+
height: 28px;
60+
background-color: $color-gray-700;
61+
}
62+
63+
.platform-name {
64+
color: $color-white;
65+
font-size: 2.4rem;
66+
@include text-decoration-animation(150ms);
67+
68+
&:hover {
69+
text-decoration: underline;
70+
color: $color-white;
71+
}
72+
}
73+
74+
.main-navigation {
75+
flex: 1;
76+
display: flex;
77+
gap: 32px;
78+
justify-content: flex-end;
79+
align-self: center;
80+
81+
a {
82+
color: $color-white;
83+
font-size: 1.8rem;
84+
font-weight: $fw-medium;
85+
@include text-decoration-animation(150ms);
86+
87+
&:hover {
88+
text-decoration: underline;
89+
color: $color-white;
90+
}
91+
}
92+
}
93+
}
94+

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.wrap-gridband, .wrap-notice, .wrap-header,
22
.wrap-header-local, .wrap-breadcrumb, .wrap-content,
3-
.wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim {
3+
.wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim, .wrapper {
44

55
// Ensures the container is actually 1280px when space is available
66
max-width: calc(#{$container-max-width} + (#{$edge-padding-tablet} * 2));
@@ -22,6 +22,12 @@
2222

2323
}
2424

25+
.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height
26+
27+
.wrapper {
28+
margin: 0 auto;
29+
}
30+
2531
.hidden-md {
2632
@media (max-width: $bp-screen-md) {
2733
display: none;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.turbo-progress-bar {
2-
background: linear-gradient(to right, #000, #fff);
3-
height: 75px;
2+
background: linear-gradient(to right, $color-gray-900, $color-red-500);
3+
height: 6px;
44
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
// GRAY
66
$color-gray-200: #e6e6e6;
7+
$color-gray-300: #ccc;
78
$color-gray-400: #b3b3b3;
89
$color-gray-500: #999 ;
910
$color-gray-700: #666;
@@ -15,6 +16,10 @@ $color-gray-975: #191919;
1516
$color-red-500: #ff0000;
1617
$color-red-600: #e50000;
1718

19+
// CYAN
20+
$color-cyan-500: #00C8FF;
21+
$color-cyan-700: #00A0CC;
22+
1823
// SEMANTIC COLORS
1924
$color-black: #000;
2025
$color-white: #fff;
@@ -24,6 +29,9 @@ $color-text-secondary: $color-gray-700;
2429
$color-text-placeholder: $color-gray-500;
2530
$color-text-disabled: $color-gray-400;
2631

32+
$color-focus: $color-cyan-700;
33+
$color-focus-dark: $color-cyan-500;
34+
2735
// ----------------------------
2836
// #TYPOGRAPHY
2937
// ----------------------------
@@ -41,6 +49,7 @@ $fs-xxxlarge: 4.2rem; // unused by default
4149
$fs-xxxxlarge: 5.2rem;
4250

4351
$fw-normal: 400;
52+
$fw-medium: 500;
4453
$fw-semibold: 600;
4554
$fw-bold: 700;
4655

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

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,39 @@
11
<div class="institute-bar">
2-
<div class="wrap-header">
2+
<div class="wrapper">
33
<a class="link-logo-mit" href="https://www.mit.edu"><span class="sr">MIT Logo</span>
44
<img src="https://cdn.libraries.mit.edu/files/branding/local/mit_logo_std_rgb_white.svg" height="24" alt="MIT logo" >
55
</a>
6+
<nav>
7+
<a href="#">Libraries Home</a>
8+
<a href="#">Hours & Locations</a>
9+
<a href="#">Ask Us</a>
10+
<a href="#">Account</a>
11+
</nav>
612
</div>
713
</div>
8-
<div class="wrap-outer-header layout-band <%= 'reasons' if params[:rainbows] %>">
9-
<div class="wrap-header">
10-
<header class="header-site header-slim" role="banner">
11-
<div class="wrap-header-core">
12-
<h1 class="name-site group nav-logo">
13-
<a href="https://libraries.mit.edu/" class="logo-mit-lib">
14-
<span class="sr">MIT Libraries home</span>
15-
<img src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg" height="35" alt="MIT Libraries logo">
16-
</a>
17-
<% if ENV['PLATFORM_NAME'] %>
18-
<a href="/" class="platform-name"><%= ENV.fetch('PLATFORM_NAME') %></a>
14+
<div class="libraries-header">
15+
<div class="wrapper">
16+
<header class="navigation-bar">
17+
<h1>
18+
<a href="https://libraries.mit.edu/" class="logo-mit-lib">
19+
<span class="sr">MIT Libraries Homepage</span>
20+
<img src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg" height="40" alt="MIT Libraries logo">
21+
</a>
22+
<% if ENV['PLATFORM_NAME'] %>
23+
<span class="divider"></span>
24+
<a href="/" class="platform-name"><%= ENV.fetch('PLATFORM_NAME') %></a>
25+
<% end %>
26+
</h1>
27+
<nav class="main-navigation" aria-label="Main navigation">
28+
<%= nav_link_to("Home", root_path) %>
29+
<% if Flipflop.enabled?(:gdt) %>
30+
<div class="wrap-gis-links">
31+
<%= nav_link_to("GIS at MIT", "https://libraries.mit.edu/gis") %>
32+
<span class="nav-divider" aria-hidden="true">|</span>
33+
<%= nav_link_to("Ask GIS", "https://libraries.mit.edu/ask-gis") %>
34+
</div>
1935
<% end %>
20-
</h1>
21-
</div>
36+
</nav>
2237
</header>
23-
</div>
24-
</div>
38+
</div>
39+
</div>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@
1111
<%= render partial: "layouts/global_alert" %>
1212

1313
<%= render partial: "layouts/site_header" %>
14-
15-
<%= render partial: "layouts/site_nav" %>
16-
14+
1715
<div class="wrap-outer-content layout-band">
1816
<div class="wrap-content">
1917
<%= render partial: "layouts/flash" %>

0 commit comments

Comments
 (0)