From 676759ae7982d999f0b0884f1d5929d1bed58890 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 3 Feb 2026 08:55:37 -0500 Subject: [PATCH 1/4] first draft of navigation bar styling --- src/app/styles/mit-theme.scss | 68 ++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/src/app/styles/mit-theme.scss b/src/app/styles/mit-theme.scss index fc2a3acf..3d9f9464 100644 --- a/src/app/styles/mit-theme.scss +++ b/src/app/styles/mit-theme.scss @@ -16,4 +16,70 @@ html { .custom-nde-theme { @include mat.all-component-colors(m3-theme.$light-theme); @include mat.system-level-colors(m3-theme.$light-theme); -} \ No newline at end of file +} + +//=================== +// MITL DS VARIABLES +//=================== +$color-white: #fff; + +$color-gray-400: #B3B3B3; +$color-gray-975: #1A1A1A; + +//=================== +// MAIN NAVIGATION +//=================== + +// Override Navigation Container +.container[_ngcontent-ng-c1837336355] .top-bar[_ngcontent-ng-c1837336355] { + background-color: $color-gray-975 !important; + padding: 0 !important; +} + +// Override Language Selector +.lang-drop-down[_ngcontent-ng-c1893398133] .custom-lang-dropdown[_ngcontent-ng-c1893398133] { + color: $color-gray-400; +} + + +header.top-bar { + + .header-container { + background: url("https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg") no-repeat -48px -250px; + padding: 32px 0 !important; + + .main-menu-container { + justify-content: flex-end; + + ul { + + li { + + a { + color: $color-white; + font-size: 1.125rem; + text-transform: none; + padding-left: 16px; + padding-right: 16px; + } + + mat-divider { + display: none; + } + + } + + } + + } + + nde-user-panel { + flex-basis: auto !important; + } + } + + .mat-icon svg path { + color: $color-gray-400; + } +} + From 35f0bc1bdd5f8a081b9ce58abd636a09153a44db Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 3 Feb 2026 10:51:53 -0500 Subject: [PATCH 2/4] Styles of search box on homepage styling --- src/app/styles/mit-theme.scss | 88 ++++++++++++++++++++++++++++++++++- 1 file changed, 87 insertions(+), 1 deletion(-) diff --git a/src/app/styles/mit-theme.scss b/src/app/styles/mit-theme.scss index 3d9f9464..49ec8ef7 100644 --- a/src/app/styles/mit-theme.scss +++ b/src/app/styles/mit-theme.scss @@ -22,10 +22,27 @@ html { // MITL DS VARIABLES //=================== $color-white: #fff; +$color-black: #000; $color-gray-400: #B3B3B3; +$color-gray-600: #666666; $color-gray-975: #1A1A1A; +$color-red-600: #E50000; + +//=================== +// EFFECTS +//=================== +@mixin hoverOutline { + outline: 2px solid $color-gray-600 !important; + outline-offset: 2px !important; +} + +@mixin focusOutline { + outline: 2px solid #00C8FF !important; + outline-offset: 2px !important; +} + //=================== // MAIN NAVIGATION //=================== @@ -41,7 +58,6 @@ $color-gray-975: #1A1A1A; color: $color-gray-400; } - header.top-bar { .header-container { @@ -67,6 +83,10 @@ header.top-bar { display: none; } + button.show-more-btn { + color: $color-white; + } + } } @@ -83,3 +103,69 @@ header.top-bar { } } +//=================== +// SEARCH CONTAINERS (Homepage and Child Pages) +//=================== + +//Override homepage search container height +.container[_ngcontent-ng-c1837336355] .custom-search-bar-container[_ngcontent-ng-c1837336355] { + height: auto !important; +} + +// Override search box wrapper +.search-bar-container[_ngcontent-ng-c133002507] .search-bar-wrapper[_ngcontent-ng-c133002507] { + background-color: transparent !important; + border: none !important; + padding-left: 0 !important; +} + +div.search-container { + + .search-bar-container > .flex-row { + align-items: center; + } + + div.top-bar-background-image, .general-search-header-background { + background-image: none !important; + background-color: $color-black; + + .background-overlay { background-color: $color-black !important;} + } + + .custom-search-bar-container > h2 { + display: none; + } + + .search_box_container {gap: 4px;} + + // Search form element styling + #search-dropdown-container-button-scopes-dropdown, #main-search-bar, button.search-btn { + border-radius: 0px !important; + height: 46px; + + &:hover { + @include hoverOutline; + } + + &:focus-visible { + @include focusOutline; + } + } + + #search-dropdown-container-button-scopes-dropdown, #main-search-bar { + border: none; + background-color: $color-white; + padding: 0 20px; + } + + button.search-btn { + background-color: $color-red-600; + color: $color-white; + width: 46px; + + svg { + fill: $color-white; + } + } + +} \ No newline at end of file From 9c15707b52ae66c3c43dc80fd5eb873a7edeb1bf Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 3 Feb 2026 15:06:42 -0500 Subject: [PATCH 3/4] Added custom footer and institute bar --- src/app/styles/mit-theme.scss | 146 ++++++++++++++++++++++-- src/assets/header-footer/footer_en.html | 28 +++++ src/assets/header-footer/header_en.html | 7 ++ 3 files changed, 174 insertions(+), 7 deletions(-) create mode 100644 src/assets/header-footer/footer_en.html create mode 100644 src/assets/header-footer/header_en.html diff --git a/src/app/styles/mit-theme.scss b/src/app/styles/mit-theme.scss index 49ec8ef7..862d95d1 100644 --- a/src/app/styles/mit-theme.scss +++ b/src/app/styles/mit-theme.scss @@ -14,8 +14,23 @@ html { // Set default theme colors for NDE .custom-nde-theme { - @include mat.all-component-colors(m3-theme.$light-theme); - @include mat.system-level-colors(m3-theme.$light-theme); + // @include mat.all-component-colors(m3-theme.$light-theme); + // @include mat.system-level-colors(m3-theme.$light-theme); +} + +//=================== +// HELPERS +//=================== +.sr { + border: 0 none; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; } //=================== @@ -24,9 +39,16 @@ html { $color-white: #fff; $color-black: #000; -$color-gray-400: #B3B3B3; -$color-gray-600: #666666; -$color-gray-975: #1A1A1A; +$color-gray-100: #F2F2F2; +$color-gray-200: #e6e6e6; +$color-gray-300: #ccc; +$color-gray-400: #b3b3b3; +$color-gray-500: #999; +$color-gray-600: #808080; +$color-gray-700: #666; +$color-gray-900: #333; +$color-gray-950: #1a1a1a; +$color-gray-975: #191919; $color-red-600: #E50000; @@ -43,6 +65,50 @@ $color-red-600: #E50000; outline-offset: 2px !important; } +@mixin text-decoration-animation { + transition: text-decoration 150ms ease; + text-decoration: none; // Included as fallback if text-decoration-color isn't supported + text-decoration: underline transparent; +} + +//=================== +// INSTITUTE BAR +//=================== + +.institute-bar { + background-color: $color-gray-900; + + .wrapper { + display: flex; + padding-top: 16px; + padding-bottom: 16px; + width: clamp(1088px,85%,1368px); + margin: 0 auto; + } + + .link-logo-mit { height: 24px; } // Sets link around logo to match logo height + + nav { + flex: 1; + display: flex; + gap: 24px; + justify-content: flex-end; + + a { + color: $color-gray-300; + font-size: 1.5rem; + padding-top: 2px; + @include text-decoration-animation; + + &:hover { + text-decoration: underline; + } + } + } + +} + + //=================== // MAIN NAVIGATION //=================== @@ -103,9 +169,9 @@ header.top-bar { } } -//=================== +//=============================================== // SEARCH CONTAINERS (Homepage and Child Pages) -//=================== +//=============================================== //Override homepage search container height .container[_ngcontent-ng-c1837336355] .custom-search-bar-container[_ngcontent-ng-c1837336355] { @@ -168,4 +234,70 @@ div.search-container { } } +} + +//=============================================== +// FOOTERS (Libraries and Institute) +//=============================================== + +footer { + letter-spacing: 0; + + .wrapper { + padding: 16px 0; + width: clamp(1088px,85%,1368px); + margin: 0 auto; + } + + .libraries-footer { + background-color: $color-gray-975; + + .wrapper { + background: url("https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg") no-repeat 10% center; + display: flex; + padding: 32px 0; + } + + a.logo-mit-lib { + height: 32px; + margin-right: 48px; + } + + nav { + + display: flex; + gap: 32px; + + a { + color: $color-gray-300; + font-size: 0.9375rem; + @include text-decoration-animation; + + &:hover { + text-decoration: underline; + } + } + + } + } + + .institute-footer { + background-color: $color-gray-900; + color: $color-gray-300; + font-size: 0.75rem; + + .wrapper { + display: flex; + gap: 32px; + } + + .link-logo-mit img { + height: 24px; + } + + a { + + color: $color-gray-300; + } + } } \ No newline at end of file diff --git a/src/assets/header-footer/footer_en.html b/src/assets/header-footer/footer_en.html new file mode 100644 index 00000000..a764a4ec --- /dev/null +++ b/src/assets/header-footer/footer_en.html @@ -0,0 +1,28 @@ + \ No newline at end of file diff --git a/src/assets/header-footer/header_en.html b/src/assets/header-footer/header_en.html new file mode 100644 index 00000000..dff625e5 --- /dev/null +++ b/src/assets/header-footer/header_en.html @@ -0,0 +1,7 @@ +
+
+ MIT Logo + MIT logo + +
+
\ No newline at end of file From 358ed8f1152719a2da898fffa6e976422fbae4d4 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Wed, 4 Feb 2026 11:06:05 -0500 Subject: [PATCH 4/4] Responsive behavior and fully finished nav and footer and search boxes git status --- src/app/styles/mit-theme.scss | 84 +++++++++++++++++++++++++++++++---- 1 file changed, 76 insertions(+), 8 deletions(-) diff --git a/src/app/styles/mit-theme.scss b/src/app/styles/mit-theme.scss index 862d95d1..6590c628 100644 --- a/src/app/styles/mit-theme.scss +++ b/src/app/styles/mit-theme.scss @@ -18,6 +18,23 @@ html { // @include mat.system-level-colors(m3-theme.$light-theme); } +// Helper to mimic Primo responsive container widths +@mixin applyPrimoContainerWidths { + width: clamp(1088px,85%,1368px); + + @media (min-width: 960px) and (max-width: 1279.98px) { + width: clamp(912px,85%,1088px); + } + + @media only screen and (min-width: 600px) and (max-width: 959.98px) { + width: clamp(288px,88.42544317%,848px); + } + + @media only screen and (max-width: 599.98px) { + width: 100%; + } +} + //=================== // HELPERS //=================== @@ -82,8 +99,14 @@ $color-red-600: #E50000; display: flex; padding-top: 16px; padding-bottom: 16px; - width: clamp(1088px,85%,1368px); margin: 0 auto; + + @include applyPrimoContainerWidths; + + @media (max-width: 600px) { + padding-left: 16px; + padding-right: 16px; + } } .link-logo-mit { height: 24px; } // Sets link around logo to match logo height @@ -174,18 +197,24 @@ header.top-bar { //=============================================== //Override homepage search container height -.container[_ngcontent-ng-c1837336355] .custom-search-bar-container[_ngcontent-ng-c1837336355] { +.container[_ngcontent-ng-c1837336355] .custom-search-bar-container[_ngcontent-ng-c1837336355], .general-search-header[_ngcontent-ng-c1773182704] { height: auto !important; } // Override search box wrapper -.search-bar-container[_ngcontent-ng-c133002507] .search-bar-wrapper[_ngcontent-ng-c133002507] { +.search-bar-container[_ngcontent-ng-c133002507] .search-bar-wrapper[_ngcontent-ng-c133002507], .search_box_container[_ngcontent-ng-c4036046928] { background-color: transparent !important; border: none !important; padding-left: 0 !important; } -div.search-container { +// Adjust vertical padding of search container +.top-bar-container, .general-search-header{ + padding-top: 24px !important; + padding-bottom: 24px !important; +} + +div.search-container, nde-search-box-presenter { .search-bar-container > .flex-row { align-items: center; @@ -205,7 +234,7 @@ div.search-container { .search_box_container {gap: 4px;} // Search form element styling - #search-dropdown-container-button-scopes-dropdown, #main-search-bar, button.search-btn { + #search-dropdown-container-button-scopes-dropdown, #search-dropdown-container-button-, #main-search-bar, button.search-btn { border-radius: 0px !important; height: 46px; @@ -236,6 +265,11 @@ div.search-container { } +// Child page search headers +nde-general-search-header { + h1.title {display: none;} +} + //=============================================== // FOOTERS (Libraries and Institute) //=============================================== @@ -245,8 +279,9 @@ footer { .wrapper { padding: 16px 0; - width: clamp(1088px,85%,1368px); margin: 0 auto; + + @include applyPrimoContainerWidths; } .libraries-footer { @@ -255,7 +290,8 @@ footer { .wrapper { background: url("https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg") no-repeat 10% center; display: flex; - padding: 32px 0; + padding-top: 32px; + padding-bottom: 32px; } a.logo-mit-lib { @@ -267,10 +303,14 @@ footer { display: flex; gap: 32px; + align-items: center; a { color: $color-gray-300; + height: 1em; + line-height: 1em; font-size: 0.9375rem; + @include text-decoration-animation; &:hover { @@ -300,4 +340,32 @@ footer { color: $color-gray-300; } } -} \ No newline at end of file + +} + +// Responsive behavior +@media (max-width: 600px) { + + footer .wrapper, .institute-bar .wrapper { + padding-left: 16px; + padding-right: 16px; + } + + footer .libraries-footer .wrapper { + flex-direction: column; + gap: 24px; + } +} + +@media (max-width: 450px) { + footer .libraries-footer .wrapper { + + nav { + flex-direction: column; + align-items: start; + gap: 16px; + } + + } +} +