Releases: mcclatchy/design
v2.8.19
Recent Timestamps
Background
Front End added functionality to display recent timestamps in a new format: minutes ago vs date. To visually communicate this concept, the more recent timestamps were designed in the #AB0909 red color consistent with other red elements on the site (breaking news banner, etc.).
Solution
Add the new class and appropriate styling for the recent timestamps:
time.recent, .time.recent { color: var(--red); }
Jira ticket: PTECH-6356
v2.8.18
Z-index layers + Story body link underline fix
Z-index layers - custom properties and utility classes
Background
Modals were displaying below Connatix ads on story pages, which sparked a conversation about a more systematic approach to layering content on the page in a predictable way.
Solution
The following custom properties and utility classes are available in the codebase:
- z-content -- static elements coming from the CMS, including the .story-body container (with static zones inside it), footer, etc.
- z-advertising -- mostly ad-related items intended to render on top of content, including the sticky ads, footer ad, etc.
- z-overlay -- modals, marketing offers and things intended to render above those ads. The masthead is in this layer as well.
Utility classes are provided for use with injection, but we can also use those same custom properties to stabilize the elements coming from WPS. if you want to place something in the overlay layer you should be able to use the utility class and not have to affect with inline styling as much. The DOM order comes into play mostly with the overlay layer. Modals placed after the masthead would render above it.
Jira ticket: PTECH-5892
Related Jira ticket: PTECH-5225
Story page link hover fix
Background
The previous release included a text-decoration: underline; treatment for links on story pages. Turns out the scope of the implementation was too wide.
Solution
The scope has been narrowed to target only paragraphs, ordered lists, and unordered lists. It was also observed that kickers were turning blue on hover, which was corrected by setting the hover custom property there as well.
Jira ticket: PTECH-6402
v2.8.17
Blockquotes + AMP author card grid
Blockquotes, Lists, and Anchor Tag hover state
Background
Design and development are working together to allow reporters to create blockquote and ol (ordered list) elements in CUE. Design also requested an underline treatment for hover states on links in the story body to improve accessibility.
Jira ticket: PTECH-6245
Solution
We've revisited the design to ensure the defaults display as anticipated and added the lists to the story deck for demonstration purposes. The CSS for block quote elements now also include the corresponding custom properties (including the color of the quotation mark!) that the Editorial team has been using in their embed tool, so that we can make the defaults easily theme-able. Anchor tags now have a hover state text-decoration custom property that is set to underline in the story body.
AMP Pages - Author Card Grid
Background
Front End started testing the previous .author-card update, necessitated by the original request to add more social icons for author cards. When two author cards displayed, there was no gap/spacing between them. We found that the .grid class was not included in the amp.css build; therefore, not including the base styles for that class, which would apply the gap: var(--space-sm); set in the .author-card amp declarations.
Jira ticket: PTECH-6275
Solution
Add .grid default styles to the amp.css file.
v2.8.16
AMP Pages Author Styling Updates & Sitemap Deck
AMP Pages - author card, byline, and bio styles
Background
The Front End team added support for more social media icons on author cards. They ran into an issue with with the increased number of icons not wrapping on smaller screen widths, as described in this Jira ticket: PTECH-6078.
Solution
I've implemented includes updating the amp.css file to include the previous author card, author bio, and author byline updates that were already made to the regular website pages and built into saratoga.css. Also, included in an update that assigns a flex-wrap: wrap; and justifty-content: start; to the children of the .article-details element. This is what now allows the social icons to now wrap as expected.
Sitemap Deck
Implemented Sitemap page to demonstrate the the design and flow of information when a user is clicking through the available stories on our sites organized by date. The design includes an intial page for years + months, followed by a page for days of the month, and then a page for all articles on a single day. Breadcrumbs display on subsequent pages, and a disabled state renders on months that have yet to pass. The sitemap functions as an archive and improves SEO.
https://mcclatchy.github.io/design/decks/sitemap/
Media URL fixes
Image URLs: Updated image links across the site to point to the new media server, ensuring images on decks load correctly.
Full Changelog: 2.8.16...v2.8.16
v2.8.15
AMP Pages - Vertical Margin Addition
Background
The story body on AMP pages styling is different from other pages. Usually child elements of the .story-body are applied a vertical margin with a value of var(--space), or 20px. However, on AMP pages, the children do not have that implementation, including the Key Takeaways element.
In this update, margin has been added so that the element now has it's own space between other surrounding elements.
Full Changelog: v2.8.14...v2.8.15
v2.8.14
Blog Branding Support + close button dimensions update
Background
The header on story pages sometimes includes a branded blog component, like "For Pete's Sake". Until recent efforts, the styling has been housed in WPS itself. In order to consolidate design and clean up the templates, we have moved the necessary styles to the design repo.
Along with this SDS update, we'll need to remove all blog branding styles from WPS before it's released to production from Front End. I did notice several associated utility classes related to screen size, but we'll dig in more with QA.
Example article: https://www.kansascity.com/sports/spt-columns-blogs/for-petes-sake/article299790484.html
Also included is a small update to correct the dimensions for the .button-close class.
Full Changelog: v2.8.13...v2.8.14
v2.8.13
AMP Pages - Syntax Correction
Background
During the last release, an essential line of syntax, a curly bracket in a media query for the Key Takeaways amp CSS, was removed. This update replaces it.
Full Changelog: v2.8.12...v2.8.13
v2.8.12
AMP Pages - Key Takeaways Updates
Background
During testing, the team found that some .grid styles were not applied on the element because they're not already included in the amp.css build. Therefore, they needed to be added manually to inform the correct design layout for the element.
Related Jira ticket
Full Changelog: v2.8.11...v2.8.12
v2.8.11
AMP Pages - Add Key Takeaways
Background
Front End increased the scope of the Key Takeaways (formerly AI Summaries) feature to be available on AMP pages. Therefore, the amp.css file has been updated to include the styling from the regular Saratoga build.
There were a couple additional modifications to account for atoms level styles that have not been updated in amp but have in sds, namely the header-transform and hr element.
Related Jira ticket
Full Changelog: v2.8.10...v2.8.11
v2.8.10
Sticky leaderboard ad close button update
Background
The close button DOM is to only load from Yozons, so the WPS template code will be removed. Consequently, the styles needed to be reworked so that they're only applied to either the unique id or to a more global class. We decided a .button-close class would be a nice scalable solution.
The CSS changes reflect the following needs:
- new close button class styles
- pseudo element to allow for background color that ameliorates any overlapping and legibility of the button
- fix for leaderboard ad container width to 100% instead of 100vw
- padding retargeted so that the close button can inherit it's own styling
Front End will need to remove the DOM for the close button.
Performance team will need to add the .button-close class to the anchor tag, remove the "X" character, and remove all inline styles.
Related Jira ticket
Full Changelog: v2.8.9...v2.8.10