2.1.8

Nav updates & bug fixes

• The logo is now set to a height of 25px and scales down to 20px at the 660px breakpoint. The taller logo stands out more and creates a better visual hierarchy within the masthead.
• Padding on the "sign up/subscribe" links has been changed to target the a:last-of-type, as there are multiple links.
• Masthead DOM updated to reflect "sign up/subscribe" structure from WPS and includes the necessary SignIn id.

2.1.7

Account button padding update + promo banner restructuring

• Padding was previous added to the sign up/subscribe button on mobile via the .msb-hide class, but that affected other elements. The target is narrowed with an a tag reference in the declaration.
• The promo banner DOM and styling was updated so that the container will not have a set height on production, making sure there is no visual evidence of said container if the Performance Team has not filled it. However, the h3 and button element styles are still available via the SDS, and the Saratoga website is still able to accurately depict the banner for demonstration purposes.

2.1.6

Remove #promo-banner element styling

• The #promo-banner id has been updated on SDS to #promo-banner-demo. This retains the depiction of the banner with intended styling on the SDS site, but leaves the DOM clean for the Performance Team to fill in as they wish.

2.1.5

Amp page flex support

• The .flex classes were re-added to the amp.css dist file to support the styling of the old menu. These will be deprecated moving forward when they are no longer in use.

2.1.4

Account button padding fix + promo banner id update

• Padding was added to the sign up/subscribe button on mobile via the .msb-hide class. Preciously, the element appeared flush to the right side of the nav bar.
• The promo banner id was updated to match the DOM in WPS so that the SDS styling serves as an inherited default.

2.1.3

Masthead updates & bug fixes

• The brightness filter and other solutions have been removed from the body.freeze styling until there is a better solution.
• The amp.css file was reverted to pre masthead/navigation bar updates to comply with old DOM and thus consequently removed from the build process of SDS.
• The promo banner was added to the story and home pages for demonstration purposes only. Styling of this element is handled outside of this system.

2.1.2

Vue masthead container DOM + body.freeze styling update

The masthead.html template file was updated to include the Vue wrapper (<div id="main-mastheadVueContainer" class="newMastheadContainer"></div>) to accurately reflect the DOM that is currently implemented by the Front End team. This was necessary to properly apply the styling for sibling elements when the .freeze class that is appended to the body of the page as a result of the nav menu and account menus being toggled open.

2.1.1

Nav height + menu positioning bug

The nav height was set to 44px (previously 40px) on each row to comply with accessibility requirements. In doing so, the menu positioning needed updating to account for the extra pixels added.

2.1.0

Navigation redesign

This release includes several updates to the flag and nav menus to match the new designs from Gabby M and Efren, which reimagines the flag in a sleeker, more concise layout with improved legibility. Shoutout to Jay for all his help! A few notes:

• Both the old and new DOM are simultaneously supported
• Two new custom properties have been added, --menu-width and --flag-height
• The flag-old.css file includes a .sds-flag class preceding rules that represents styling for the old DOM, which is to be removed once the DOM is updated

2.0.5

Fixed height on upper nav

This sets a height property for the .upper-nav class on desktop and mobile, which helps improve our CLS score.