/* @override http://127.0.0.1:4000/ui/css/homepage--prefixed.css */ /*-----------------------------------------*\ HOMEPAGE CSS PREFIXED \*-----------------------------------------*/ /* This file adds prefixes to all the CSS classes so that components from the new homepage can be used on other pages without creating css collisions */ /*-----------------------------------------*\ #GENERIC \*-----------------------------------------*/ /* Set defaults like Normalize.css and border-sizing. */ .new-site-header--homepage * { list-style-type: none; /*background: var(--yellow);*/ } /* Border-box reset. */ .new-site-header--homepage { box-sizing: border-box; } /* Sets inheritance so that compnents can easily override the border-box if required. */ .new-site-header--homepage *, .new-site-header--homepage *:before, .new-site-header--homepage *:after { box-sizing: inherit; } /*-----------------------------------------*\ #OVERRIDES \*-----------------------------------------*/ /* Override Bootstrap rules. */ .new-site-header label { margin-bottom: 0; } /* Override Article page rules. */ .new-site-header .fa:before, .btn-social-icon .glyphicon:before { font-size: 1em; } /*-----------------------------------------*\ #SETTINGS \*-----------------------------------------*/ /* Global...............Globally-available variables and config. */ /* SET BASE PARAMETERS ------------------- */ /* Base Units */ :root { /* Set REM size */ /* This sets the basic unit for the modular grid and typography systems */ font-size: 9px; /* Set baseline grid increment */ --baseline-grid: 2rem; /* This should be a multiple of the rem grid unit. Probably 2rem. */ /* Set column number */ --column-number: 12; /* This is only used for drawing the test grid overlay. */ } /* Set base type size and color */ /* :root { --base-type-size: 2rem; --base-line-height: 3rem; } These variables aren't in use. The values are set on below: */ /* Base Colours */ :root { /* BRAND COLOUR -- Tyee Orange. */ --brand-colour__ hue: 49; /* HSLA values are broken into */ --brand-colour__ sat: 100%; /* separate variables for */ --brand-colour__ lig: 50%; /* computational manipulation */ --brand-colour__ alp: 1; /* in Colour System below. */ /* Set --brand-colour variable based on HSLA variables */ --brand-colour: hsla(var(--brand-colour__hue),var(--brand-colour__sat),var(--brand-colour__lig),var(--brand-colour__alp)); --link-colour: var(--brand-colour--text-darker); --text-colour: #393939; --text-colour-light: #808080; --border-colour-cols: hsl(0, 0%, 74%); --utility-background-color: #444; /* used for utility components like drop-down, footer, scroll-bounce */ --yellow: #ffcf00; } /* Scroll-bounce Colours */ html { background-color: var(--utility-background-color); } /* Typefaces */ :root { --typeface-serif: 'Tiempos Text', georgia, serif; --typeface-sans: 'franklin-gothic-urw', helvetica, sans-serif; --typeface-item-body: 'franklin-gothic-urw', helvetica, sans-serif; --typeface-display: 'Tiempos Text', georgia, serif; --typeface-display-small: 'Tiempos Text', georgia, serif; --typeface-display-medium: 'Tiempos Headline', georgia, serif; --typeface-display-large: 'Tiempos Headline', georgia, serif; } /* Typefaces for retina and high-dpi screens */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 195dpi) { :root { --typeface-display: 'Tiempos Text', georgia, serif; --typeface-display-small: 'Tiempos Text', georgia, serif; --typeface-display-medium: 'Tiempos Text', georgia, serif; --typeface-display-large: 'Tiempos Headline', georgia, serif; } } /* HIGH-DPI TYPOGRAPHY MEDIUM BRKPNT TO TERTIARY BREAKPOINT: 684px to 999px */ @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 684px) and (max-width: 999px), (min-resolution: 195dpi) and (min-width: 684px) and (max-width: 999px) { /* Increase weight of Recent Stories Primary Story headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text at high-dpi) */ .new-hmpg-org-recent-stories .new-story-item--primary .new-story-item__headline { font-weight: 700; } /* Increase weight of Pinned Stories headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text at high-dpi) */ .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__headline { font-weight: 700; } } /* HIGH-DPI TYPOGRAPHY TERTIARY BRKPNT TO LARGE BREAKPOINT: 1180px to 1367px */ @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1180px) and (max-width: 1367px), (min-resolution: 195dpi) and (min-width: 1180px) and (max-width: 1367px) { /* Increase weight of Recent Stories Primary Story headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text) */ .new-hmpg-org-recent-stories .new-story-item--primary .new-story-item__headline { font-weight: 700; } } /* RESPONSIVE SETTINGS */ /* NOTE: CSS variables can't be used within media query selectors, so these responsive settings are for reference only. The varaibles defined below aren't functional. */ /* If we want to use CSS variables to create a layout grid that responds to viewport dimensions then we could set the grid properties via a variable and set that variable relative to the viewport dimension. Simple examples: --column-gutter: calc(5vw+10px); .new-container { grid-column-gap:var(--column-gutter); } --col-grid-main: 1fr 1fr; @media screen and (min-width: 1368px) { --col-grid-main: 2fr 1fr 1fr 1fr; } .new-hmpg-org-recent-stories__top-stories { grid-template-columns: var(--col-grid-main); } */ :root { --breakpoint-width-xs: 0; --breakpoint-width-s: 0; --breakpoint-width-m: 684px; --breakpoint-width-nav: 850px; /* This is the breakpoint for expanding the nav. Also increases lateral page margins */ --breakpoint-width-tertiary: 1000px; /* tertiary story-items expand from stacked to 2 columns */ --breakpoint-width-margins--min: 1100px /* Page Margins breakpoint: 1100-1368px */ --breakpoint-width-margins--max: 1368px /* This breakpoint range prevents columns from getting too wide at upper end of Medium width range */ --breakpoint-width-adblock: 1180px; /* half-page ad appears at 1180px width */ --breakpoint-width-l: 1368px; /* >> This breakpoint needs to be increased to 1380px to accommodate the wider page margins */ --breakpoint-width-xl: 1368px; } /*-----------------------------------------*\ #SYSTEMS \*-----------------------------------------*/ /* Design system styles are derived computationally from the base parameters. */ /* COLOUR SYSTEM */ /* Use the Base Colours to derive a colour system. Use the HSLA colorspec with each of the 4 values set by a separate variable. Then perform computations on those variables to change the colour. https://www.w3.org/TR/css-color-3/#hsl-color https://www.w3schools.com/cssref/func_hsla.asp https://caniuse.com/#feat=css3-colors */ /* BRAND TEXT COLOUR */ /* Brand colour is darkened for use in text and icons */ :root { --brand-colour--text: hsla( calc(var(--brand-colour__hue)*.9), /* makes brand colour more red */ var(--brand-colour__sat), calc(var(--brand-colour__lig)*.98), /* darkens brand colour */ var(--brand-colour__alp) ); } /* BRAND TEXT COLOUR - darker */ /* Brand colour is darkened further for particularly small text and fine lines */ :root { --brand-colour--text-darker: hsla( calc(var(--brand-colour__hue)*.82), /* makes brand colour more red */ var(--brand-colour__sat), calc(var(--brand-colour__lig)*.96), /* darkens brand colour */ var(--brand-colour__alp) ); } /* BRAND BACKGROUND COLOUR */ /* Brand colour is lightened for use in module backgrounds */ :root { --brand-colour--mod-bg: hsla( var(--brand-colour__hue), var(--brand-colour__sat), calc(var(--brand-colour__lig)*1.34), /* lightens brand colour */ var(--brand-colour__alp) /* 0.5 /* AG - temporary tansparency to show grid */ ); } /* BRAND COLOUR PALE */ /* Brand colour is lightened a lot */ :root { --brand-colour--pale: hsla( var(--brand-colour__hue), var(--brand-colour__sat), calc(var(--brand-colour__lig)*1.99), /* lightens brand colour */ var(--brand-colour__alp) /* 0.5 /* AG - temporary tansparency to show grid */ ); } /* ELEMENT COLOURS */ /* Typographic Elements */ :root { --icon-search-svg-colour: var(--text-colour); --icon-arrow-toggle-down-svg-colour: var(--text-colour); } /* end of Colour System */ /* GRID SYSTEM */ /* Column Spacing */ :root { /* standard column gutter width */ --gutter-column: 4rem; /* use half of gutter width when column borders are required */ --gutter-column-half: calc(var(--gutter-column) / 2); /* standard row gutter width */ --gutter-row: 6rem; /* use half of gutter width when row borders are required */ --gutter-row-half: calc(var(--gutter-row) / 2); } /* >> Use pseudo element :after to create the column borders */ /* PAGE MARGINS */ /* Page margins should be set by applying rules to the --page-margin-sides variable. Exceptions can be handled by writing rules for particular modules and classes. This is much easier and also DRYer. */ /* AG -- Having dynamic CSS variables like this might make it more difficult to create fallbacks for older browsers that don't support CSS variables. */ :root { --page-margin-sides: var(--gutter-column-half); --page-margin-top: 4rem; } /* PAGE MARGINS NAV BREAKPOINT -- breakpoint-width-nav: 850px */ @media screen and (min-width: 850px) { /* Increase page margins */ :root { --page-margin-sides: var(--gutter-column); } } /* PAGE MARGINS LAYOUT BREAKPOINT 1 -- 1100px */ /* Prevents columns from getting too wide at upper end of Medium width range */ @media screen and (min-width: 1100px) and (max-width: 1367px) { /* Keep content of organism containers at 1100px width but run lateral padding to edge of screen so the borders and background colours don't show a gap */ :root { --page-margin-sides: calc( var(--gutter-column) + (100vw - 1100px) * 0.5 ); /* (base margin width) + ( view size ) * rate of ) */ /* + ( beyond 1100 ) change ) */ } } /* PAGE MARGINS LARGE BREAKPOINT -- breakpoint-width-l: 1380px */ /* This breakpoint needs to be increased to 1380px to accommodate the wider page margins */ @media screen and (min-width: 1380px) { /* Progressively increase the page margins as viewport width expands beyond 1380px. Increase the rate of change for larger page margins. */ :root { --page-margin-sides: calc( var(--gutter-column) + calc((100vw - 1380px) * 0.2 )); } /* (base margin width) + (( view size ) * rate of ) */ /* + (( beyond 1380 ) change ) */ } /* end of Page Margins */ /*-----------------------------------------*\ #TYPE STYLES \*-----------------------------------------*/ /* Default text styles ----------------- */ .new-site-header--homepage { font-family: var(--typeface-sans); font-weight: 400; font-style: normal; } header.new-site-header, header.new-site-header--homepage { top: 0; left: 0; z-index: 2000; width: 100%; } /* *** TUCKED INTO GLOBAL-NAV.CSS *** */ /* Module text styles ----------------- */ .new-label--small { font-style: italic; } .new-hmpg-module-header__main-label, .new-m-comment-noted__label, .new-m-barometer__label { font-size: 1.4em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.125em; display: inline-block; position: relative; } /* HOMEPAGE MODULE HEADER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { /* Center the module label when the module appears directly below page header (and therefore with no top border) */ .new-hmpg-org-wrapper:first-of-type .new-hmpg-module-header { text-align: center; } } .new-m-comment-noted__label { padding-left: 1.1em; } .new-m-comment-noted__label::before { content: url(../img/icon-comment-noted.svg); display: inline-block; position: absolute; left: 0em; transform: scale(.65) translate(-40%, -40%); } .new-m-barometer__label { padding-left: 1.4em; } .new-m-barometer__label::before { content: url(../img/icon-barometer.svg); display: inline-block; position: absolute; left: 0.2em; transform: scale(.75) translate(-40%, -40%); } .new-tyee-insider__story .new-story-item__deck, .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck { font-family: var(--typeface-serif); font-size: 1.33em; line-height: 3rem; color: var(--text-colour); } .new-tyee-insider__story .new-story-item__deck p:nth-of-type(n+2), .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck p:nth-of-type(n+2) { padding-top: 2rem; } .new-m-tyee-insider__related-label { font-size: 0.85em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 3rem 0 1rem; /* 4rem total realigns with 2rem-baseline grid */ } .new-m-comment-noted__title, .new-m-barometer__title { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 3rem; font-size: 1.5em; text-transform: none; } /* Content text styles ----------------- */ /* Story Items */ .new-story-item__headline { font-family: var(--typeface-display); font-weight: 600; line-height: 3rem; /* this is 1.5 x baseline, so headlines that break over odd-numbered lines will throw off the grid */ font-size: 1.5em; text-transform: capitalize; margin: 0rem 0 2rem; /* 4rem total realigns with baseline grid */ } .new-category-label { font-family: var(--typeface-sans); font-size: 0.875em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-colour--text); margin: 1rem 0 1rem; /* Adds up to 2rem, aligning with baseline grid */ } .new-story-item__deck { color: var(--text-colour-light); } .new-story-item__author, .new-story-item__date { font-weight: 600; } .new-story-item__author { margin-top: 0rem; } .new-m-comment-noted .new-story-item__author { display: block; margin-top: 2rem; text-align } .new-m-comment-noted .new-story-item__author::before { content: "Submitted by"; display: block; margin-top: 2rem; font-weight: 400; font-style: italic; } .new-story-item__news-source { font-family: var(--typeface-sans); font-weight: 200; } /* for Reported Elsewhere */ /* Separator between headline and news source */ .new-story-item__news-source::before { content: "•"; padding-left: 0.25em; padding-right: 0.25em; } /* primary story-items */ .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .new-story-item--primary .new-category-label { font-size: 1.11em; } .new-story-item--primary .new-story-item__author { padding-top: 2rem; /* 2rem total aligns with baseline grid */ } /* secondary story-items */ .new-story-item--secondary .new-story-item__headline { font-family: var(--typeface-display-medium); } /* tertiary story-items */ .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.5em; line-height: 3rem; margin: 0; /* matches with deck margin-bottom to realign with baseline grid */ } .new-story-item--tertiary .new-story-item__deck { font-size: 1em; line-height: 2rem; margin: 1rem 0 0rem; /* No bottom padding to prevent gap above author byline */ } /* minimum story-items */ .new-story-item--minimum .new-story-item__headline { font-family: var(--typeface-display-medium); /* font-weight: 600; */ line-height: 3rem; margin-bottom: 0rem; } /* ---- STORY ITEMS TYPOGRAPHY responsive enhancement ---- */ /* STORY ITEMS TYPOGRAPHY MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary .new-story-item__deck { text-transform: uppercase; } .new-hmpg-org-tyee-insider .new-story-item--primary .new-story-item__deck { text-transform: none; } /* Reduce size of Primary headlines so that they don't take up too much vertical space in a 2-col layout */ .new-story-item--primary .new-story-item__headline { line-height: 3rem; /* this is 2 x baseline */ font-size: 1.65em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } /* Keep large size of Primary headlines in module that have more space for them */ .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline, .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } } /* STORY ITEMS TYPOGRAPHY TERTIARY BREAKPOINT -- breakpoint-width-tertiary: 1000px */ @media screen and (min-width: 1000px) { .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } } /* STORY ITEMS TYPOGRAPHY ADBLOCK BREAKPOINT -- breakpoint-width-adblock: 1180px - 1367px */ @media screen and (min-width: 1180px) and (max-width: 1367px) { /* Reduce size of Primary headlines in Recent Stories module because halfpage adblock is reducing the column width. */ .new-hmpg-org-recent-stories--general .new-story-item--primary .new-story-item__headline { line-height: 3rem; /* this is 2 x baseline */ font-size: 1.65em; } } /* STORY ITEMS TYPOGRAPHY LARGE BREAKPOINT -- breakpoint-width-l: 1368px; */ @media screen and (min-width: 1368px) { /* Slightly reduce size of tertiary headlines in wide screens to accommodate a 2-col stiry-item layout. */ .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display); font-family: var(--typeface-display-medium); font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } /* Enlarge Topic module primary story headline in wide views (like pinned story headline) */ .new-hmpg-org-recent-stories--topic .new-story-item--primary .new-story-item__headline { line-height: 6rem; /* this is 3 x baseline */ font-size: 3.35em; margin-bottom: 4rem } .new-hmpg-org-recent-stories--topic .new-story-item--primary > :not(.story-item__image):not(.story-item__headline) { margin-left: 8rem; margin-right: 8rem; } /* Pinned Story enhancement */ .new-hmpg-org-pinned-story .new-story-item--primary .new-category-label { margin-bottom: 1.5rem; } .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__headline { line-height: 6rem; /* this is 3 x baseline */ font-size: 3.35em; margin-bottom: 4rem } .new-hmpg-org-pinned-story .new-story-item--primary > :not(.story-item__image) { margin-left: 4rem; margin-right: 4rem; } .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__deck { margin-left: 11.5rem; margin-right: 11.5rem; } .new-hmpg-org-pinned-story .new-story-item--primary.story-item--reverse .new-badge--story-item-placement { transform: scale(1.2); right: -3em; } } /* end of Story Items Typography */ /*-----------------------------------------*\ #ATOMS \*-----------------------------------------*/ strong.new-site-header--homepage { font-weight: 600; } /* link styles for body text of Insider and Deep Dive */ /* link styles for body text of Insider */ .new-hmpg-org-tyee-insider p a { border-color: white; /* can't be brand color because Insider has an orange background */ } /* Hovers states for nav-bar items -- only on devices with hover capability, exclude mobile */ /* Hover states for text links and buttons */ .new-story-item a:hover, .new-story-item a:focus { display: inline-block; color: var(--link-colour); /*transform: scale(1.05)!important; /* !important is required to override badges that are scaled by default */ } .new-hmpg-org-tyee-insider a:hover, .new-hmpg-org-tyee-insider a:focus { color: white; /* can't be brand color because Insider has an orange background */ } .new-story-item p a:hover, .new-story-item p a:focus { margin-bottom: -2px; /* Offsets the effect of setting underlined text as an inline-block */ } .new-text-link--button { display: table; padding-top: 2rem; font-style: italic; border-bottom: 1px solid; margin-bottom: -1px; /* Offsets 1px border */ } /* BUTTON atom */ .new-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; cursor: pointer; } .new-button { display: inline-block; border: 2px solid var(--brand-colour--text); border-radius: 0rem; padding: calc(1rem - 2px) 4rem; margin: 0; height: 4rem; text-decoration: none; background: none; color: var(--text-colour); font-family: var(--typeface-sans); font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: .new-08em; cursor: pointer; text-align: center; transition: background 250ms ease-in-out, transform 150ms ease; -webkit-appearance: none; -moz-appearance: none; } .new-button--spanrow { grid-column: 1 / -1; /* Make button span entire grid row */ justify-self: center; /* Collapses button width to its content + padding */ } .new-button--dark-bg { color: var(--text-colour); background-color: hsla(0, 0%, 100%, 0.3); border: 2px solid white; } .new-button--dark { color: white; background-color: var(--text-colour); } .new-button--barometer { display: block; } .new-site-nav__search-form .new-button { display: inline-block; border: none; padding: 1rem 2rem; background: var(--brand-colour); color: #ffffff; color: var(--text-colour); } .new-button:hover, .new-button:focus { color: white; color: var(--text-colour); background: var(--brand-colour--text-darker); border-color: transparent; outline: 2px solid #fff; transform: scale(1.05) } .new-button:focus { outline: 1px solid #fff; outline-offset: -4px; } .new-button:active { transform: scale(0.99); } /* BUTTON EXPANDER is used to show and hide content */ .new-button--expander { } /*-----------------------------------------*\ #MOLECULES \*-----------------------------------------*/ /* BADGE molecule */ /* This styles the existing story-badge html molecule from the story page to work on the homepage. These styles replace the story page badge styles. */ .new-badge { } .new-badge--story-item-placement { display: block; position: absolute; width: auto; left: -1.25em; top: -1.5em; transform: scale(1); padding-left: inherit; /* Adjusts badge position when there's padding on the parent */ } .new-story-item--secondary .new-badge--story-item-placement, .new-story-item--tertiary .new-badge--story-item-placement { left: -2.5em; top: -1em; transform: scale(.85); } .new-hmpg-org-recent-stories__list .new-story-item--tertiary .new-badge--story-item-placement, .new-hmpg-org-deep-dive .new-story-item--tertiary .new-badge--story-item-placement { left: -2.5em; top: -1.5em; transform: scale(.7); } /* ---- BADGE responsive enhancement ---- */ /* BADGE MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary .new-badge--story-item-placement, .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: -2.25em; top: 1em; } .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: unset; right: -2.25em; } } /* BADGE MEDIUM BREAKPOINT -- breakpoint-width-nav: 850px */ @media screen and (min-width: 850px) { .new-story-item--primary .new-badge--story-item-placement, .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: -2.25em; top: calc(1em + 1.5vw); } .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: unset; right: -2.25em; } .new-story-item--secondary .new-badge--story-item-placement, .new-story-item--tertiary .new-badge--story-item-placement { transform: scale(1); } } /* end of Badge molecule */ /* STORY ITEM MOLECULE ------------------- */ /* default story item grid -- single column */ .new-story-item--index-page { position: relative; display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: 0; grid-template-areas: "image" "category" "headline" "deck" "author" "date" "border"; } .new-story-item__image { display: grid; /* Necessary for baseline-element.js to prevent element height from collapsing */ position: relative; } /* Story Item element layout -- Assign story-item elements to grid areas */ .new-story-item--index-page .new-story-item__image { grid-area: image; } .new-story-item--index-page .new-badge--story-item-placement { /* grid-area: image; */ z-index: 20; } .new-story-item--index-page .new-category-label { grid-area: category; } .new-story-item--index-page .new-story-item__headline { grid-area: headline; } .new-story-item--index-page .new-story-item__deck { grid-area: deck; } .new-story-item--index-page .new-story-item__author { grid-area: author; } .new-story-item--index-page .new-story-item__date { grid-area: date; } /* STORY ITEM EXTENSIONS */ .new-story-item--primary { } .new-story-item--secondary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-story-item--secondary .new-category-label { margin-top: 0 } /* 0 top margin aligns label with figure in 2-col story-item layouts */ .new-story-item--secondary .new-story-item__author { justify-self: start; } .new-story-item--tertiary { } .new-story-item--tertiary .new-story-item__image { display: none; } .new-story-item--tertiary .new-badge--story-item-placement { display: none; } .new-story-item--tertiary .new-category-label { display: none; } .new-story-item--tertiary .new-story-item__headline { display: block; } .new-story-item--tertiary .new-story-item__deck { display: block; } .new-story-item--tertiary .new-story-item__author { display: block; } .new-story-item--tertiary .new-story-item__date { display: none; } .new-hmpg-org-recent-stories__list .new-story-item--tertiary { /* font-size: var(--small-text); */ grid-column-gap: calc(var(--gutter-column) * 0.5); } .new-story-item--tertiary .new-story-item__author { justify-self: start; } .new-story-item--minimum { } .new-story-item--minimum .new-story-item__image { display: none; } .new-story-item--minimum .new-badge--story-item-placement { display: none; } .new-story-item--minimum .new-category-label { display: none; } .new-story-item--minimum .new-story-item__headline { display: block; } .new-story-item--minimum .new-story-item__deck { display: none; } .new-story-item--minimum .new-story-item__author { display: none; } .new-story-item--minimum .new-story-item__date { display: none; } .new-story-item--reverse { } /* ---- STORY ITEM responsive enhancement ---- */ /* STORY ITEM SUB-MEDIUM BREAKPOINT -- < breakpoint-width-m: < 683px */ @media screen and (max-width: 683px) { /* Some story-items use float-based layout in small viewports: -> Secondary story-items in the recent stories list -> Tertiary story-items in the Insider Related Stories list */ /* Same as Tertiary items in large viewports. */ .new-hmpg-org-recent-stories__list .new-story-item--secondary, .new-m-tyee-insider__related-stories .new-story-item--tertiary { display: block; } /* Use float-based layout for Secondary story-items in Recent Stories module */ /* Same as Tertiary items in large viewports. */ .new-hmpg-org-recent-stories__list .new-story-item--secondary .new-story-item__image, .new-m-tyee-insider__related-stories .new-story-item--tertiary .new-story-item__image { float: right; width: calc(50% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); margin-bottom: 2rem; } .new-m-tyee-insider__related-stories .new-story-item--tertiary .new-story-item__headline { padding-top: 0; } /* Secondary story item gets single-col stacked layout in Deep Dive on narrow viewports. */ .new-hmpg-org-deep-dive .new-story-item--secondary { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .new-hmpg-org-deep-dive .new-story-item--secondary .new-category-label { font-family: var(--typeface-sans); font-size: 0.875em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-colour--text); margin: 1rem 0 1rem; } .new-hmpg-org-deep-dive .new-story-item--secondary .new-story-item__headline { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 3rem; font-size: 1.5em; text-transform: capitalize; margin: 0rem 0 2rem; } } /* end of Story Item sub-Medium breakpoint */ /* STORY ITEM MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } /* Vertically centre Primary story-item text block in wide views (only for Recent Stories and Pinned Story modules) */ .new-hmpg-org-recent-stories__list .new-story-item--primary, .new-hmpg-org-pinned-story .new-story-item--primary { grid-template-rows: 1fr auto auto auto 1fr; } .new-hmpg-org-recent-stories__list .new-story-item--primary .new-story-item__image { } .new-story-item--primary .new-category-label { margin: 0 0 1rem; align-self: end; } .new-story-item--primary .new-story-item__date { margin-bottom: 1rem; /* offsets the 1-rem margin of the category-label */ } .new-story-item--primary.story-item--reverse { grid-template-columns: 1fr 1fr; grid-template-areas: "image category" "image headline" "image deck" "image author" "image date"; text-align: center; } .new-story-item--secondary { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .new-story-item--secondary .new-category-label { margin-top: 1rem } /* Creates space between image and headline in stacked story-item layout */ .new-story-item--tertiary { grid-template-rows: auto auto auto auto 1fr; } .new-story-item--tertiary .new-story-item__image { display: grid; } /* Necessary for baseline-element.js to prevent element height from collapsing */ .new-story-item--tertiary .new-badge--story-item-placement { display: block; } .new-story-item--tertiary .new-category-label { display: block; } .new-story-item--tertiary .new-story-item__deck { display: block; } } /* end of Story Item medium breakpoint */ /* STORY ITEM LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { /* Teriary story-items in the recent stories list use float-based layout in wide viewports. */ /* This selects only the first 8 story items because the display of the subsequent items needs to be controled by the expander--recent-stories. (There seems to be some kind of CSS bug because nth-of-type is counting all story-items, not just .new-story-item--tertiary. We really only want to select the first 4 .new-story-item--tertiary elements) */ .new-hmpg-org-recent-stories__list .new-story-item--tertiary:nth-of-type(-n+8) { display: block; } } /* end of Story Item large breakpoint */ /* end of Story Item */ /* ROW & COLUMN BORDERS ------------------- */ /* Set borders within grid-column-gaps and grid-row-gaps to separate story-items. */ /* row border */ /* Uses a pseudo element to create borders within the grid-row-gap. Excludes the first item. Explained here: https://www.smashingmagazine.com/2018/02/generated-content-grid-layout/ */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::before, .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content: ""; position: absolute; top: calc(var(--gutter-row-half) * -1); width: 100%; border-bottom: 1px solid var(--border-colour-cols); mix-blend-mode: multiply; } /* ---- ROW & COLUMN BORDERS responsive enhancement ---- */ /* ROW & COLUMN BORDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { /* row border */ /* expand Recent Stories row borders in medium views */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::before { left: calc(var(--gutter-column-half) * -1); width: calc(100% + var(--gutter-column)); } /* removes row borders from Insider and Deep Dive in medium views */ .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content: none; } /* column border */ /* Uses a pseudo element to create column borders within the grid-column-gap. Excludes the first item. Explained here: https://www.smashingmagazine.com/2018/02/generated-content-grid-layout/ */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::after { content: ''; position: absolute; top: 0; right: calc(var(--gutter-column-half) * -1); height: 100%; border-right: 1px solid var(--border-colour-cols); } } /* end of borders medium breakpoint */ /* ROW & COLUMN BORDER ONLY MEDIUM BREAKPOINT -- breakpoint-width-m: 684px - 999px */ @media screen and (min-width: 684px) and (max-width: 999px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(4n)::after { content: none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content: none; } } /* end of borders medium breakpoint */ /* ROW & COLUMN BORDER ONLY TERTIARY BREAKPOINT -- breakpoint-width-tertiary: 1000px - 1367px */ @media screen and (min-width: 1000px) and (max-width: 1367px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(n+4):nth-of-type(2n)::after { content: none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content: none; } } /* end of borders tertiary breakpoint */ /* ROW & COLUMN BORDER LARGE BREAKPOINT -- breakpoint-width-l: 1367px */ @media screen and (min-width: 1368px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(4n)::after { content: none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content: none; } /* This would remove row borders on tertiary story-items in Recent Stories .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(n+9)::before { content: none; } */ /* add column borders around Insider molecules */ .new-hmpg-org-tyee-insider > div:not(:last-of-type)::after { content: ''; position: absolute; bottom: 0; right: calc(var(--gutter-column-half) * -1); height: calc(100% - 10rem); border-right: 1px solid var(--text-colour); } /* add row borders around Deep Dive tertiary story-items */ .new-hmpg-org-deep-dive > .new-story-item--tertiary:nth-of-type(n+4)::before { content: '' !important; /* !important is required to overrule the earlier .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content: none; but this could also achieved by making the breakpoint of this previous rule more specific. */ position: absolute; top: calc(var(--gutter-row-half) * -1); left: calc(0); width: calc(100%); border-bottom: 1px solid var(--border-colour-cols); } /* add column border around Deep Dive tertiary story-items */ .new-hmpg-org-deep-dive > .new-story-item--tertiary::after { content: ''; position: absolute; top: calc(var(--gutter-row-half) * -1); left: calc(var(--gutter-column-half) * -1); height: calc(100% + var(--gutter-row)); border-left: 1px solid var(--border-colour-cols); } } /* end of borders large breakpoint */ /* end of Row & Column Borders */ /* HMPG AD BOX MOLECULE ------------------- */ .new-hmpg-ad-box { position: relative; } .new-hmpg-ad-box--halfpage { display: none; } .new-hmpg-ad-box iframe { /* width:100%; This prevents the ad from breaking the col but it will get crops the graphic */ } /* Towards a scaling ad solution: */ .new-hmpg-ad-box--halfpage iframe { /* position: absolute; --> This pulls ad out of flow and lets grid col size properly top:0; left:0; transform: scale(.8) translate(-55px, -75px); --> translations must be calculated relative grid col size depending on viewport width */ } .new-hmpg-ad-box--bigbox { margin-top: var(--gutter-row); height: calc(2rem * 14); /* Set ad-box height to an even multiple of the baseline grid */ } /* HMPG AD BOX BREAKPOINT -- breakpoint-width-adblock: 1180px */ @media screen and (min-width: 1180px) { .new-hmpg-ad-box--halfpage { display: block; } } /* end of HMPG Ad Box molecule */ /* COUNTER LIST molecule ----------------- */ /* This formats a container of articles into a numbered list with custom numbers. It uses the styling method from https://www.w3schools.com/css/css_counters.asp Variants can be seen here: https://www.w3.org/Style/Examples/007/color-bullets.en.html */ /* COUNTER LIST molecule ----------------- */ /* This formats a container of articles into a numbered list with custom numbers. It uses the styling method from https://www.w3schools.com/css/css_counters.asp Variants can be seen here: https://www.w3.org/Style/Examples/007/color-bullets.en.html */ .new-counter-list--story-items { counter-reset: story-item; } .new-counter-list--story-items > .new-story-item { counter-increment: story-item; padding-left: 1.4em; position: relative; } /* Realign odd-numbered list with baseline grid. This doesn't work if there's an even # of items in the list. Using margins that vary between odd and even items could produce a universal solution. E.g. select the last list item only if it's odd-numbered. */ .new-counter-list--story-items > .new-story-item:last-of-type { margin-bottom: 0rem; } .new-counter-list--story-items > .new-story-item h2::before { content: counter(story-item); display: inline-block; position: absolute; left: -0.1em; color: var(--brand-colour--text); background-color: none; font-family: var(--typeface-display); font-weight: 800; font-size: 1.1em; } /* end of Counter List molecule */ /*-----------------------------------------*\ #ORGANISMS \*-----------------------------------------*/ /* KILLED HMPG from DIV CLASS 11/2020 */ /* HMPG ORGANISM WRAPPER ----------------- */ /* There's also styles for this wrapper mixed in with other organisms. */ /* Should be considolidated at some point. */ /*.new-hmpg-org-wrapper { position: relative; padding: 0 var(--page-margin-sides); padding-bottom: calc(var(--gutter-row) + 0rem); } main .new-hmpg-org-wrapper { padding-top: calc(5rem - 0px); } /* Omit top padding from first modules (This will maintain correct padding when the order of modules changes) *!/ main .new-hmpg-org-wrapper:first-of-type { padding-top: 0; } /* Create thick top border on modules that doesn't extend into page magins *!/ main .new-hmpg-org-wrapper::before { content: ""; position: absolute; top: 3rem; left: 0; grid-column: 1 / -1; width: 100%; border-bottom: 4px solid var(--text-colour); }*/ /* Omit top border from first modules (This will maintain correct borders when the order of modules changes) */ /*main .new-hmpg-org-wrapper:first-of-type::before { content: none; } /* Increase separation between Page Header and first content module. *!/ /* Applying padding-top to the content module (rather than padding-bottom to the Header) allows for modules with coloured backgorunds. *!/ main .new-hmpg-org-wrapper:first-of-type { padding-top: 1rem; } /* Site Header NON-STANDARD BREAKPOINT -- non-standard-width: 600px *!/ @media screen and (min-width: 600px) { /* Progressively increase separation between Page Header and first content module. *!/ main .new-hmpg-org-wrapper:first-of-type { padding-top: 1rem; } } /* Site Header NON-STANDARD BREAKPOINT -- MIN-WIDTH 850px --------------- *!/ @media screen and (min-width: 850px) { /* Progressively increase separation between Page Header and first content module. *!/ main .new-hmpg-org-wrapper:first-of-type { padding-top: 4rem; } }*/ /* end of HMPG Organism Wrapper */ /* HMPG RECENT STORIES organism ---------- */ .new-hmpg-org-recent-stories { display: grid; } /* Add space between Recent Stories module header and content */ .new-hmpg-org-recent-stories .new-hmpg-module-header { margin-bottom: 6rem; } /* Reduce space between Recent Stories module header and content when module appears at top of page */ .new-hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories .new-hmpg-module-header { margin-bottom: 4rem; } .new-hmpg-org-recent-stories__list { /* AG -- might want to abstract universal grid specs to "".hmpg-org-wrapper >" */ display: grid; width: 100%; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); margin-bottom: 0rem;/* Aligns with baseline grid (content may still throw it off) */ /* Decimal values in the .new-story-item--tertiary headline line-height (at some medium and large views)cause a browser rounding error that throws throws off the baseline grid. */ } /* RECENT STORIES LIST EXPANDER */ /* This uses a checkbox and labels to toggle the display of content without using javascript. See: https://jsfiddle.net/Algreenwich/uLpzvx4n/36/ This was adapted from The Checkbox/Label Trick described here: https://javascript.works-hub.com/learn/a-javascript-free-frontend-61275 An alternative (although less robust) method is to use anchors links: https://jsfiddle.net/Algreenwich/uym9s0bg/ https://stackoverflow.com/questions/40312901/showing-and-hiding-something-with-pure-css-with-show-and-hide-button */ .new-button--expander-open ~ :not(script) { display: none; } #new-expander--recent-stories:checked ~ :not(script) { display: grid; /* This must be "grid" because the revealed items are themselves using internal grid layouts */ } /* LIST EXPANDER LARGE BREAKPOINT -- breakpoint-width-adblock: 1368px */ @media screen and (min-width: 1368px) { /* Tertiary story-items in the recent stories list use float-based layout in wide viewports, so at large screen sizes the expander must set the display to block instead of grid. */ #new-expander--recent-stories:checked ~ :not(script) { display: block; /* This must be "block" because revealed items are using internal float layouts */ } } /* end of List Expander adblock breakpoint */ #new-expander--recent-stories:checked ~ .new-button--expander-open { display: none; } /* ---- RECENT STORIES responsive enhancement ---- */ /* Story items are allocated grid space and location based on their story-item extension class, e.g. .new-story-item--primary spans full first row. */ /* RECENT STORIES MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-recent-stories__list { grid-template-columns: repeat(12, 1fr); grid-template-areas: "primary primary primary primary primary primary" "2ndary 2ndary 2ndary 2ndary 2ndary 2ndary"; } .new-hmpg-org-recent-stories__list > .new-story-item--primary { grid-column: auto / span 12; text-align: center; } .new-hmpg-org-recent-stories__list > .new-story-item--secondary { grid-column: auto / span 4; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 3; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-category-label { margin-top: 1rem; } } /* STORY ITEM TERTIARY BREAKPOINT -- breakpoint: 1000px */ /* tertiary story-items expand from stacked to 2 columns */ @media screen and (min-width: 1000px) { .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 6; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-size: 1.5em; line-height: 3rem; } .new-hmpg-org-recent-stories__list .new-story-item--tertiary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-category-label { display: block; margin-top: 0; } /* 0 top margin aligns label with figure in 2-col story-item layouts */ } /* RECENT STORIES ADBLOCK BREAKPOINT -- breakpoint-width-adblock: 1180px */ /* This breakpoint adds the half-page ad into the layout so it is only relevant for hmpg-org-recent-stories--general */ @media screen and (min-width: 1180px) { .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list { grid-template-columns: repeat(4, 1fr); grid-template-areas: "primary primary primary ad" "2ndary 2ndary 2ndary ad"; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--primary { grid-area: primary; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--secondary { grid-column: auto / span 1; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 2; } /* Scale Half-page Adblock so it doesn't break the grid */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage { position: relative; grid-area: ad; } .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside { position: absolute; transform: scale(.9); transform-origin: 0% 0%; } } /* end of Recent Stories Adblock Breakpoint */ /* RECENT STORIES SECONDARY IMAGE BREAKPOINT RANGE -- breakpoint-width-adblock: 1180px-1367px */ @media screen and (min-width: 1180px) and (max-width: 1367px) { /* Force Secondary Recent Story images to display at correct layout size. */ /* This only applies while the margins are keeping the module width constant and the half-page ad is showing. */ .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--secondary .new-story-item__image .new-responsive-img { height: 18rem !important; } } /* RECENT STORIES LARGE BREAKPOINT -- breakpoint: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 1; } /* Slightly reduce size of tertiary headlines in wide screens to accommodate extra column */ .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } /* Use float-based layout for Tertiary story-items in Recent Stories module */ .new-hmpg-org-recent-stories__list .new-story-item--tertiary .new-story-item__image { float: right; width: calc(50% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); /* margin-bottom: 2rem; <-- This makes the row-gaps appear too wide */ } /* Disable scaling of Half-page Adblock so that it displays at full size */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside { transform: none; transform-origin: 0% 0%; } /* Align Half-page Ad with right edge of its grid container */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside div div { display: grid; justify-items: end; } } /* end of Recent Stories Large Breakpoint */ /* end of Recent Stories */ /* TYEE INSIDER organism ----------------- */ /* AG -- It would be great to use subgrids to keep molecules separated yet aligned, but the subgrid spec isn't completed yet and no browsers support it. The display: content also has very poor support so that's not viable either. */ .new-hmpg-org-tyee-insider { position: relative; display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); background-color: hsla(51, 100%, 50%, 0.3); /* temporary alpha for testing, should be var(--brand-colour--mod-bg) */ } .new-hmpg-module-header { height: 2rem; margin-bottom: 2rem; } .new-hmpg-org-tyee-insider .new-hmpg-module-header { margin-bottom: 8rem; /* Insider needs more space here because it doesn't use Grid at top level and therefore has no row gap */ } .new-hmpg-org-most--column .new-hmpg-module-header { margin-bottom: 4rem; /* Most module columns need more space here because they only use a half-gutter row gap */ } .new-hmpg-org-reported-elsewhere .new-hmpg-module-header { margin-bottom: 4rem; /* Reported Elsewhere module needs more space here because they only use a half-gutter row gap */ } /* Modules that have a tagline/blurb following their label need a margin */ .new-m-tyee-insider__main .new-hmpg-module-header__main-label, .new-hmpg-org-deep-dive .new-hmpg-module-header__main-label { margin-right: 3rem; } /* When Recent Stories module appears at top of page its module header and label are hidden */ .new-hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories--general .new-hmpg-module-header { display: none; } .new-hmpg-module-header__main-label-blurb { display: inline-block; } .new-m-tyee-insider__related-stories { display: grid; grid-row-gap: var(--gutter-row); margin-bottom: -1rem; /* offsets 3rem line-height of headlines in list */ } .new-m-tyee-insider__main, .new-m-comment-noted { position: relative } /* Tyee Insider Primary Story-item */ .new-m-tyee-insider__main .new-story-item--primary { } .new-m-tyee-insider__main .new-story-item--primary .new-badge--story-item-placement { display: none; } .new-m-tyee-insider__main .new-story-item--primary .new-category-label { display: none; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { grid-area: headline; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__deck { grid-area: deck; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__author { display: none; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__date { display: none; } .new-m-tyee-insider__main .new-story-item--primary { grid-template-areas: "headline" /* put headline above image */ "image" "deck" "author" "date"; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { margin-bottom: 4rem; } .new-m-tyee-insider__main .new-story-item--primary img { width: 100%; /* required becasue this img must omit the .new-responsive-img class so that it doesn't get targeted by baselineElement */ } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__image { margin-bottom: 4rem } /* Tyee Insider Tertiary Story-item */ .new-m-tyee-insider__main .new-story-item--tertiary { grid-template-rows: auto auto auto auto 1fr; } .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__image { display: grid; margin-bottom: 2rem; } /* Necessary for baseline-element.js to prevent element height from collapsing */ .new-m-tyee-insider__main .new-story-item--tertiary .new-badge--story-item-placement { display: none; } .new-m-tyee-insider__main .new-story-item--tertiary .new-category-label { display: none; } .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__headline { display: block; padding: 0rem 0 1rem } .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__deck { display: none; } /* Comment Noted and Barometer molecule styles */ .new-m-comment-noted, .new-m-barometer { padding-top: 2rem; border-top: 4px solid var(--text-colour); margin-top: calc(2rem - 4px); /* Offsets the 1px border */ } .new-m-comment-noted .new-hmpg-module-header, .new-m-barometer .new-hmpg-module-header { height: 2rem; margin-bottom: 4rem; } .new-m-comment-noted__title, .new-m-barometer__title { /* padding: 1rem 0; This should be contained in typographic styles not module layout */ min-height: 10rem; } .new-m-barometer__footer { padding-top: 4rem; } /* Barometer form */ /* Checkbox display method is adapted from here: https://paulund.co.uk/how-to-style-a-checkbox-with-css */ .new-barometer-form-list__item { display: block; padding-bottom: 2rem; } input[type=radio] { visibility: hidden; display: none; } .new-barometer-form-label { position: relative; left: 3rem; display: inline-block; } .new-barometer-form-label::before { content: ""; cursor: default; position: absolute; width: 2rem; height: 2rem; top: 0; left: -3rem; background: hsla(0, 0%, 100%, 0.3); border: 2px solid white; } /* input[name="barometerpoll"]:checked + .new-barometer-form-label::after { opacity: 1; content: ''; position: absolute; bottom: 1.1rem; left: -2.7rem; width: 20px; height: 9px; background: transparent; border: 3px solid var(--text-colour); border-top: none; border-right: none; transform: rotate(-50deg); } */ /* ---- TYEE INSIDER responsive enhancement ---- */ /* TYEE INSIDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-tyee-insider { position: relative; grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-tyee-insider > :first-child { grid-column: auto / span 6; } .new-hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 3; } .new-hmpg-org-tyee-insider > :nth-child(3) { grid-column: auto / span 3; } /* Insider Primary Story uses a float-based layout so that text can wrap the image */ .new-hmpg-org-tyee-insider .new-story-item--primary { display: block; } .new-hmpg-org-tyee-insider .new-story-item--primary .new-story-item__image { float: right; display: block; width: Calc(50% - var(--gutter-column-half)); margin-left: var(--gutter-column); margin-bottom: 3rem; } .new-m-tyee-insider__main .new-story-item--primary img { display: block; width: 100%; /* required becasue this img must omit the .new-responsive-img class so that it doesn't get targeted by baselineElement */ } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__deck { max-width: 34em; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { margin-bottom: 4rem; } .new-m-tyee-insider__related-stories { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 2rem; grid-column-gap: var(--gutter-column); margin-bottom: -1rem; /* offsets 3rem line-height of headlines in list */ } .new-m-tyee-insider__related-label { grid-column: 1 / -1; /* Span all columns (required for medium views) */ } .new-m-comment-noted__title, .new-m-barometer__title { min-height: 10rem; margin-bottom: 2rem; } } /* End of Tyee Insider medium breakpoint */ /* TYEE INSIDER LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-tyee-insider { grid-template-columns: repeat(5, 1fr); } .new-hmpg-org-tyee-insider > :first-child { grid-column: auto / span 3; } .new-hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 1; } .new-hmpg-org-tyee-insider > :nth-child(3) { grid-column: auto / span 1; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { min-height: 12rem; margin-bottom: 2rem; } .new-m-comment-noted, .new-m-barometer { padding-top: 0rem; border-top: none; margin-top: 0; } .new-m-comment-noted .new-hmpg-module-header, .new-m-barometer .new-hmpg-module-header { height: 2rem; margin-bottom: 8rem; } .new-m-comment-noted__title, .new-m-barometer__title { min-height: 12rem; margin-bottom: 2rem; } } /* End of Tyee Insider large breakpoint */ /* End of Tyee Insider organism */ /* PINNED STORY organism ----------------- */ .new-hmpg-org-pinned-story { display: grid; z-index: 10; /* So that bottom border doesn't fall underneath the BG of next module due to negative margin */ padding-top: var(--gutter-row); } .new-hmpg-org-pinned-story .new-story-item { padding-top: calc(var(--gutter-row) - 2rem); } /* Set second top border */ /* .new-hmpg-org-pinned-story::before { content:""; position: absolute; top: 3px; left: 0; width: 100%; border-top: 1px solid var(--text-colour); } */ /* Set second bottom border */ /* .new-hmpg-org-pinned-story::after { content:""; position: absolute; bottom: 3px; left: 0; width: 100%; border-top: 1px solid var(--text-colour); } */ /* End of Pinned Story organism */ /* DEEP DIVE organism ----------------- */ .new-hmpg-org-deep-dive { display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); background-color: hsla(0, 0%, 90%, 0.68); /* For testing purposes */ /* AG - temporary tansparency to show grid */ } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__image { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-badge--story-item-placement { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-category-label { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__author { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__date { display: none; } /* Remove bottom row border from first story-item */ .new-hmpg-org-deep-dive .new-story-item--index-page:first-of-type::after { content: none; } /* Tyee Insider Story-items */ .new-hmpg-org-deep-dive .new-story-item--primary { grid-template-columns: 1fr; } .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck { text-transform: none; } /* ---- DEEP DIVE responsive enhancement ---- */ /* */ /* DEEP DIVE MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-deep-dive > * { grid-column: auto / span 2; } .new-hmpg-org-deep-dive > .new-hmpg-module-header { grid-column: 1 / -1; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type { grid-column: 1 / span 3; grid-template-rows: auto 1fr; grid-template-areas: "headline" "deck"; } .new-hmpg-org-deep-dive > .new-story-item--secondary { grid-column: auto / span 3; } .new-hmpg-org-deep-dive > .new-story-item--tertiary { grid-column: auto / span 2; grid-template-columns: 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } } /* DEEP DIVE LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-deep-dive > .new-story-item:first-of-type { /* Set the item's position */ grid-column: 1 / span 2; grid-row: auto / span 3; /* Set the item's internal grid */ grid-template-rows: auto; align-content: start; } .new-hmpg-org-deep-dive > .new-story-item--secondary { /* Set the item's position */ grid-column: auto / span 2; grid-row: auto / span 3; /* Set the item's internal grid */ align-content: start; } .new-hmpg-org-deep-dive > .new-story-item--tertiary { /* Set the item's position */ grid-column: auto / span 2; /* Set the item's internal grid */ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-hmpg-org-deep-dive > .new-story-item--tertiary .new-category-label { margin-top: 0; /* 0 top margin aligns label with figure in 2-col story-item layouts */ } } /* End of Deep Dive large breakpoint */ /* End of Deep Dive organism */ /* MOST organism ----------------- */ .new-hmpg-org-most { display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); } /* In narrow views override universal top border (border is on each column) */ main .new-hmpg-org-most::before { content: none; } /* In narrow views adjust first column top border position to match other module top borders */ .new-hmpg-org-most--column:first-child { margin-top: -2rem; } .new-hmpg-org-most--column { position: relative; display: grid; grid-row-gap: var(--gutter-row-half); padding-top: 2rem; padding-bottom: 2rem; margin-bottom: -1rem; /* offsets the row-gap (but dependent on length of headlines) */ } .new-hmpg-org-most--column::before { content: ""; position: absolute; top: 0px; left: 0; grid-column: 1 / -1; width: 100%; border-bottom: 4px solid var(--text-colour); } .new-hmpg-org-most--column .new-story-item__headline { margin-bottom: 0; } /* ---- MOST responsive enhancement ---- */ /* */ /* MOST MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-most { grid-template-columns: 1fr 1fr 1fr; } /* In wider eliminate first column position adjustment */ .new-hmpg-org-most--column:first-child { margin-top: 0rem; } /* Set top border on outer container instead of on each column */ main .new-hmpg-org-most::before { content: ""; } /* Remove top borders from each column */ .new-hmpg-org-most--column { padding-top: 0; } .new-hmpg-org-most--column::before { content: none; } } /* End of Most organism */ /* REPORTED ELSEWHERE organism ----------------- */ .new-hmpg-org-reported-elsewhere { display: grid; padding-top: 2rem; grid-column-gap: var(--gutter-column); grid-row-gap: 0; align-items: start; } .new-hmpg-org-reported-elsewhere > .new-hmpg-module-header { } .new-hmpg-org-reported-elsewhere__list .new-story-item { padding-top: var(--gutter-row-half); } /* ---- REPORTED ELSEWHERE responsive enhancement ---- */ /* */ /* Reported Elsewhere MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-reported-elsewhere__list { column-count: 2; column-gap: var(--gutter-column); } .new-hmpg-org-reported-elsewhere__list > .new-story-item { -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } /* Reported Elsewhere NONSTANDARD BREAKPOINT -- breakpoint: 1010px */ /* The fixed width of the bigbox ad requires a specific breakpoint here. */ @media screen and (min-width: 1010px) { .new-hmpg-org-reported-elsewhere__list { column-count: 3; column-gap: var(--gutter-column); } .new-hmpg-org-reported-elsewhere__list > .new-story-item { -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } /* End of Reported Elsewhere organism */ /* BUILDER organism ----------------- */ .new-hmpg-org-builder { display: grid; justify-content: center; padding-top: 3rem !important; background-color: var(--brand-colour--mod-bg); /* temporary alpha for testing: hsla(51, 100%, 50%, 0.3); should be var(--brand-colour--mod-bg) */ } /* Override unversal module top border */ main .new-hmpg-org-builder::before { content: none; } .new-builder__content { position: relative; max-width: 1000px; display: grid; justify-items: center; grid-column-gap: var(--gutter-column-half); grid-row-gap: 0; grid-template-areas: "image" "headline" "deck" "cta"; text-align: center; } .new-builder__image { grid-area: image; } .new-builder__headline { grid-area: headline; } .new-builder__deck { grid-area: deck; } .new-builder__cta { grid-area: cta; } .new-builder__image { display: grid; /* Necessary for baseline-element.js to prevent element height from collapsing */ position: relative; } .new-builder__image img { width: 100%; max-height: 14rem; } .new-button--builder { max-width: 280px } .new-button--builder span { color: var(--brand-colour); } /* Builder text styles */ .new-builder__headline { font-family: var(--typeface-display-large); line-height: 4rem; font-size: 2.33em; margin: 2rem 0 2rem; } .new-builder__deck { font-family: var(--typeface-serif); font-size: 1.33em; line-height: 3rem; color: var(--text-colour); margin: 0 0 3rem; } /* BUILDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-builder__content { justify-items: stretch; grid-template-columns: 1fr 3fr; grid-template-rows: auto auto 1fr; align-content: center; grid-template-areas: "image headline" "image deck" "image cta"; text-align: left; } .new-builder__image { justify-self: end; } .new-builder__image img { width: 100%; max-width: 20rem; max-height: none; } .new-builder__headline { margin-top: 3rem; align-self: end; } } /* end of Builder medium breakpoint */ /* end of Builder organism */ /* SITE HEADER organism ----------------- */ /* This thing is a beast ---------------- */ /* *** TUCKED INTO GLOBAL-NAV.CSS ****/ /** FOOTER MOVED TO GLOBAL-FOOTER.CSS **/ /*------------------------------------*\ #HELPER CLASSES \*------------------------------------*/ /* RESPONSIVE IMAGES -- forces the image to be the same width as its parent element. Confusingly similar in name to Bootstrap's .new-img-responsive but this will actually stretch an image rather than merely shrink it. */ .new-responsive-img { width: 100%; height: auto; display: block; } /*------------------------------------*\ #GRID GUIDES \*------------------------------------*/ /* This draws guides for column grid and baseline grid to tune the layout. */ /* Omitted from live prototype */ /*------------------------------------*\ #PATCHES \*------------------------------------*/ /* SET DEFAULT IMG HEIGHT FOR TERTIARY RECENT STORIES ITEMS */ /* Sets a default min-height for Tertiary Recent Stories items so that baseline-element.js doesn't set their height to zero. Some of the tertiary recent stories items are hidden and only revealed when the reader clicks "more recent stories" button. Baseline-element.js will set the height of imgs within display:none to zero unless a default height is set in advance. */ /* Calculation: img height = ( ( ( (100vw - page-margins - col-gutters) / #cols ) x img-col-size ) / img-aspect ) = ( ( ( (100vw - (page-margin x 2) - ( #cols-1 x colgutter) ) / #cols ) x 1 ) / img-aspect ) */ .new-hmpg-org-recent-stories .new-story-item--tertiary .new-story-item__image .new-responsive-img { min-height: calc( ( ( ( 100vw - (var(--page-margin-sides) * 2) - (3 * var(--gutter-column)) ) / 4 ) * 1 ) / 1.5 ) } /* RECENT STORIES DEFAULT IMG HEIGHT LARGE BREAKPOINT -- breakpoint: 1368px */ /* This is the same as above except that img-col-size is set to 0.5 because the img only occupies half the column width (minus a margin)*/ /* Calculation: img height = ( ( ( (100vw - page-margins - col-gutters) / #cols ) x img-col-size ) / img-aspect ) = ( ( ( (100vw - (page-margin x 2) - ( #cols-1 x colgutter) ) / #cols ) x 0.5 ) / img-aspect ) */ /* THIS RULE PRODUCES A LAYOUT BUG --> @media screen and (min-width: 1368px) { .new-hmpg-org-recent-stories .new-story-item--tertiary .new-story-item__image .new-responsive-img { min-height: calc( ( ( ( 100vw - (var(--page-margin-sides) * 2) - (3 * var(--gutter-column)) ) / 4 ) * 0.45 ) / 1.5 ); } } */