Update site masthead, banner variant

SU-SWS · Mar 25, 2024 · 7b6109c · 7b6109c
1 parent a2640d4
commit 7b6109c
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 73 deletions.
diff --git a/c_sharp_subtheme.libraries.yml b/c_sharp_subtheme.libraries.yml
@@ -90,8 +90,8 @@ allpages:
   css:
     theme:
       dist/css/main.css: { }
-  # js:
-  #   src/js/c_sharp_subtheme.behaviors.js: { }
-  # dependencies:
-  #   - core/jquery
-  #   - core/once
+  js:
+    src/js/c_sharp_subtheme.behaviors.js: { }
+  dependencies:
+    - core/jquery
+    - core/once
diff --git a/decoupled-menu/dist/islands/main-menu.island.umd.js b/decoupled-menu/dist/islands/main-menu.island.umd.js
diff --git a/decoupled-menu/src/main-menu.island.tsx b/decoupled-menu/src/main-menu.island.tsx
@@ -33,7 +33,8 @@ const MenuWrapper = styled.div<{ open?: boolean }>`
 
 const TopList = styled.ul`
   flex-wrap: wrap;
-  justify-content: flex-end;
+  // justify-content: flex-end;
+  justify-content: flex-start;
   list-style: none;
   margin: 0;
   background: #2e2d29;
@@ -42,13 +43,20 @@ const TopList = styled.ul`
 
   @media (min-width: 992px) {
     display: flex;
+    // justify-content: flex-start;
     background: transparent;
     padding: 0;
     font-size: 19px;
     height: 100%;
     width: 100%;
-
-  }
+    // container-type: size;
+
+  //   @container (min-height: 200px) {
+  //     a {
+  //       padding: 1.6rem 0;
+  //     }
+  //   }
+  // }
 `
 
 const MobileMenuButton = styled.button`
@@ -58,7 +66,7 @@ const MobileMenuButton = styled.button`
   box-shadow: none;
   background: transparent;
   border: 0;
-  border-bottom: 2px solid transparent;
+  // border-bottom: 1px solid transparent;
   color: #2e2d29;
   padding: 0;
   display: flex;
@@ -67,7 +75,7 @@ const MobileMenuButton = styled.button`
   font-size: 1.6rem;
 
   &:hover, &:focus {
-    border-bottom: 2px solid #2e2d29;
+    // border-bottom: 1px solid #2e2d29;
     background: transparent;
     color: #2e2d29;
     box-shadow: none;
@@ -114,7 +122,7 @@ const SearchContainer = styled.div`
     justify-content: center;
     background: none;
     color: #b1040e;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
     border-radius: 999px;
     aspect-ratio: 1;
     padding: 0;
@@ -204,7 +212,7 @@ const Button = styled.button`
   color: #ffffff;
   background: #b1040e;
   border: none;
-  border-bottom: 1px solid transparent;
+  border-bottom: 2px solid transparent;
   padding: 0;
   margin: 0 0 -4px;
   box-shadow: none;
@@ -216,7 +224,7 @@ const Button = styled.button`
 
   &:hover, &:focus {
     box-shadow: none;
-    border-bottom: 1px solid #b1040e;
+    border-bottom: 2px solid #b1040e;
     background: #f4f4f4;
     color: #000000;
   }
@@ -226,10 +234,12 @@ const Button = styled.button`
     color: #2e2d29;
     background: transparent;
     border-radius: 0;
-    align-self: center;
+    // align-self: center;
+    width: auto;
+    margin-left: 1rem;
 
     &:hover, &:focus {
-      border-bottom: 1px solid #2e2d29;
+      border-bottom: 2px solid #2e2d29;
       color: #2e2d29;
       background: transparent;
     }
@@ -249,14 +259,15 @@ const MenuItemContainer = styled.div<{ level?: number }>`
     margin-bottom: ${props => props.level === 0 ? "6px" : ""};
     height: 100%;
     margin-bottom: 0;
-    align-items: end;
+    // align-items: end;
+    align-items: unset;
   }
 `
 
 const MenuLink = styled.a<{ isCurrent?: boolean, inTrail?: boolean, level?: number }>`
   color: #ffffff;
   font-weight: 500;
-  font-family: Roboto;
+  font-family: Roboto Slab;
   text-decoration: none;
   padding: 16px 0 16px 16px;
   transition: all 0.2s ease-in-out;
@@ -272,7 +283,9 @@ const MenuLink = styled.a<{ isCurrent?: boolean, inTrail?: boolean, level?: numb
   @media (min-width: 992px) {
     // color: #b1040e;
     color: #2e2d29;
-    padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 5.2rem 0"};
+    padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "1.6rem 0"};
+    // padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 2rem 0"};
+    // margin-top: ${({level}) => level != 0 ? "16px 0 16px 16px" : "1.5rem"};
     border-bottom: ${({level, inTrail, isCurrent}) => level === 0 ? (isCurrent ? "6px solid #007C7E" : (inTrail ? "6px solid #b6b1a9" : "6px solid transparent")) : ""};
     border-left: ${({level, isCurrent}) => level != 0 ? (isCurrent ? "6px solid #007C7E" : "6px solid transparent") : "none"};
     // margin-bottom: ${({level, inTrail, isCurrent}) => level === 0 ? (isCurrent ? "-6px" : (inTrail ? "-6px" : "-6px")) : ""};
@@ -285,6 +298,22 @@ const MenuLink = styled.a<{ isCurrent?: boolean, inTrail?: boolean, level?: numb
       border-left: ${({level}) => level != 0 ? "6px solid #2e2d29" : "none"};
     }
   }
+
+  // @media (min-width: 1200px) {
+  //   // padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 5.2rem 0"};
+  //   padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 4.7rem 0"};
+  // }
+
+  // @media (min-width: 1500px) {
+  //   // padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 5.2rem 0"};
+  //   padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 4.7rem 0"};
+  // }
+
+  @media (min-width: 1396px) {
+    // padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 5.2rem 0"};
+    padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "0 0 4.7rem 0"};
+    margin-top: ${({level}) => level != 0 ? "16px 0 16px 16px" : "1.5rem"};
+  }
 `
 
 const NoLink = styled.span<{ level?: number }>`
@@ -294,7 +323,10 @@ const NoLink = styled.span<{ level?: number }>`
   padding: 16px 0 16px 16px;
 
   @media (min-width: 992px) {
-    color: #b1040e;
+    // color: #b1040e;
+    color: #2e2d29;
+    font-weight: 500;
+    font-family: Roboto Slab;
     padding: ${({level}) => level != 0 ? "16px 0 16px 16px" : "16px 0"};
   }
 `
@@ -413,6 +445,7 @@ const MenuItem = ({title, url, items, expanded, level = 0}: { title: string, url
                 transform: submenuOpen ? "rotate(180deg)" : "",
                 transition: "transform 0.2s ease-in-out",
                 width: "16px",
+                marginTop: "1.5rem",
               }}
               />
             </Button>

diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/src/js/c_sharp_subtheme.behaviors.js b/src/js/c_sharp_subtheme.behaviors.js
@@ -1,11 +1,16 @@
-(function ($, once) {
-    'use strict';
-    Drupal.behaviors.csharpSubtheme = {
-      // attach: function (context) {
-      //   const searchIcon = $('<i />', { class: 'fas fa-search'});
-      //   const menuSearchLink = $('<a>', { class: 'menu-search-link', 'href': '/search', 'aria-label': 'Go to search page' }).prepend(searchIcon);
-      //   $('.su-multi-menu', context).append(menuSearchLink);
-      // }
-    };
+// (function ($, once) {
+//     'use strict';
+//     Drupal.behaviors.csharpSubtheme = {
+//       attach: function (context) {
+//         const searchIcon = $('<i />', { class: 'fas fa-search'});
+//         // const menuSearchLink = $('<a>', { class: 'menu-search-link', 'href': '/search', 'aria-label': 'Go to search page' });
+//         const menuSearchLink = $('<a>', { class: 'menu-search-link', 'href': '/search', 'aria-label': 'Go to search page' }).prepend(searchIcon);
+//         const menuSearchLinkWrapper = $('<div>', { class: 'menu-search-wrapper' }).prepend(menuSearchLink);
+//         // $('.su-multi-menu', context).append(menuSearchLink);
+//         // $('#block-c-sharp-subtheme-main-navigation', context).append(menuSearchLink);
+//         // $('#block-c-sharp-subtheme-main-navigation', context).after(menuSearchLink);
+//         $('#block-c-sharp-subtheme-main-navigation', context).after(menuSearchLinkWrapper);
+//       }
+//     };
 
-  })(jQuery, once);
+//   })(jQuery, once);
diff --git a/src/scss/components/banner/_hero.scss b/src/scss/components/banner/_hero.scss
@@ -102,38 +102,57 @@
         .su-card__button {
           a {
             border-radius: 7px;
-
+            
             &:hover,
             &:focus,
             &:active {
               background-color: $su-color-white;
               color: $su-color-black;
             }
+
+            @include grid-media-min('xl') {
+              padding: 1.5rem 3rem 1.8rem;
+              font-size: 2.8rem;
+            }
+
+            @include grid-media-min('2xl') {
+              font-size: 3rem;
+            }
           }
         }
       }
     }
   }
 
-  @include grid-media-min('md') {
-    &.overlay-left {
-      .su-card {
+  &.overlay-left {
+    .su-card {
+      @include grid-media-min('md') {
         left: 80px;
       }
+
+      @include grid-media-min('lg') {
+        left: 170px;
+      }
     }
 
     &.overlay-right {
       .su-card {
-        right: 80px;
-        margin-left: auto;
-
-        .su-card__contents {
-          align-items: flex-end;
-
-          p {
-            text-align: end;
+        @include grid-media-min('md') {
+          right: 80px;
+          margin-left: auto;
+
+          .su-card__contents {
+            align-items: flex-end;
+
+            p {
+              text-align: end;
+            }
           }
         }
+
+        @include grid-media-min('lg') {
+          right: 170px;
+        }
       }
     }
   }

diff --git a/src/scss/components/local-footer/_local-footer.scss b/src/scss/components/local-footer/_local-footer.scss
@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 .su-local-footer  {
+  background-color: $su-color-white;
+  border-top: 1px solid $su-color-black;
+
   .su-lockup__cell2,
   h2,
   h3,

diff --git a/src/scss/components/lockup/_lockup.scss b/src/scss/components/lockup/_lockup.scss
@@ -3,26 +3,49 @@
 .su-masthead {
   .su-lockup--option-o {
     flex: unset;
-    margin-top: 2.5rem;
-    margin-bottom: 2.5rem;
+    margin-top: 1.8rem;
+    margin-bottom: 1.8rem;
+    // margin-top: 2.5rem;
+    // margin-bottom: 2.5rem;
 
     .su-lockup__cell1 {
-      border-right: 1px solid #2e2d29;
-      padding-right: 2rem;
-      max-width: max-content;
+      @include grid-media-min('md') {
+        border-right: 1px solid #2e2d29;
+        padding-right: 2rem;
+        max-width: max-content;
+      }
     }
 
     .su-lockup__wordmark-wrapper {
       margin-top: 1rem;
       margin-bottom: 1rem;
     }
 
+    .su-lockup__wordmark {
+      @include grid-media-min('md') {
+        font-size: 3.8rem;
+      }
+
+      @include grid-media-min('lg') {
+        font-size: 4.1rem;
+      }
+    }
+
     .su-lockup__line4{
       font-family: $su-font-slab;
+      font-weight: 400;
+      font-size: 2.2rem;
       margin-top: 1.5rem;
       text-transform: unset;
-      font-weight: 400;
       text-align: end;
+
+      @include grid-media-min('md') {
+        font-size: 2.3rem;
+      }
+
+      @include grid-media-min('lg') {
+        font-size: 2.7rem;
+      }
     }
   }
 }
diff --git a/src/scss/components/masthead/_masthead.scss b/src/scss/components/masthead/_masthead.scss
@@ -4,6 +4,21 @@
   >section {
     &:last-of-type {
       padding-top: 0;
+
+      @include grid-media-min('lg') {
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  @include grid-media-min('lg') {
+    .system-menu-block {
+      padding-left: 4rem;
+      align-self: flex-end;
+      width: 90%;
+      bottom: unset;
+      position: relative;
     }
   }
 }