/* @override http://127.0.0.1:4000/ui/css/homepage.css?ver=11 */ /*-----------------------------------------*\ #GENERIC \*-----------------------------------------*/ /* Set defaults like Normalize.css and border-sizing. */ * { list-style-type: none; } /* CAPTIONS ========================================================================== */ .caption { padding-top: .65em; padding-bottom: 1rem; border-bottom: 1px solid; border-color: inherit; font-size: 0.9em; font-weight: 500; line-height: 1.4em; color: #404040; text-align: left; text-shadow: none; } @media screen and (max-width: 568px) { .caption { font-size: 17px; } } .caption__media--credit { font-weight: 300; } .category-label a { background: rgb(255,208,0); background: rgba(255,208,0,0.8); color: black; font-weight: 500; padding: 0 4px; } /* Border-box reset. */ html { box-sizing: border-box; } /* Sets inheritance so that compnents can easily override the border-box if required. */ *, *:before, *:after { box-sizing: inherit; } /*-----------------------------------------*\ #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: */ body { font-size: 1.6rem; line-height: 2rem; color: var(--text-colour); padding-top: .rem; } /* 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: #737373; --border-colour-cols: hsl(0, 0%, 74%); --utility-background-color: #444; /* used for utility components like drop-down, footer, scroll-bounce */ } /* Scroll-bounce Colours */ html { background-color: var(--utility-background-color); } body { background-color: white; } /* 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 Text', 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) */ .hmpg-org-recent-stories .story-item--primary .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) */ .hmpg-org-pinned-story .story-item--primary .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) */ .hmpg-org-recent-stories .story-item--primary .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); .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; } .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 ----------------- */ body { font-family: var(--typeface-sans); font-weight: 400; font-style: normal; } /* Header Typography -- Logo block ----------------- */ .site-header__tagline { position: relative; font-family: var(--typeface-serif); font-size: .86em; font-weight: 600; } .site-header__tagline::before, .site-header__tagline::after { content: ""; display: block; position: absolute; width: 4rem; border-top: 1px solid var(--text-colour); } .site-header__tagline::before { top: -1rem; } .site-header__tagline::after { bottom: -1rem; } .site-header__tagline--a::before, .site-header__tagline--a::after { right: 0; } /* Header Typography -- Navigation */ /*.new-site-nav-main { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .new-site-nav__link--join { color: var(--brand-colour--text); } .new-site-nav__dropdown-heading, .site-nav__dropdown .nav__link--join, .site-nav__dropdown .twitter { padding-top: 2rem; } .new-site-nav__link--dropdown-item { font-weight: 400 } .expander-content__topics-submenu .nav__link--dropdown-item, .expander-content__more-submenu .nav__link--dropdown-item { text-transform: capitalize; letter-spacing: 0 } .new-site-nav__dropdown .nav__link--newsletter, .new-site-nav__dropdown .facebook, .site-nav__dropdown .twitter { padding-top: 1rem; }*/ /* FEATURED SPONSOR ====== */ /* added Dec 2020 */ #featured-sponsor--article { width: 100%; } #featured-sponsor--article_wrapper { background: var(--light-grey); padding: 40px; height: auto; width: 80%; margin: 30px auto 65px; border-left: 5px solid var(--light-green); } /*@media screen and (min-width: 668px) { #featured-sponsor--article_wrapper { display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 40px; } #featured-sponsor--text { grid-column: 1; } #featured-sponsor--article figure { grid-column: 2; } }*/ #featured-sponsor--text { width: 100%; clear: both; } #featured-sponsor--text span { text-transform: uppercase; letter-spacing: 0.05em; font-size: 1em; background: var(--light-green); padding: 2px 7px 1px; } #featured-sponsor--text h2 { margin-top: 18px; font-size: 1.6em; line-height: 1.3; margin-bottom: 15px; } #featured-sponsor--article p { font-size: 1.25em; line-height: 1.4; } #featured-sponsor--article p a { border-bottom: 1px solid; } #featured-sponsor--article figure { float: right; width: 40%; margin: 5px 0 20px 40px; } #featured-sponsor--article figure img { width: 100%; } /*@media screen and (max-width: 1100px) { #featured-sponsor--article_wrapper { grid-template-columns: 1fr; grid-template-rows: auto auto; grid-row-gap: 25px; } #featured-sponsor--article figure { grid-column: 1; grid-row: 1; } #featured-sponsor--article p { grid-row: 2; } }*/ #featured-sponsor--article_wrapper:after { clear: both; content: ""; display: table; } @media screen and (max-width: 1000px) { #featured-sponsor--article_wrapper { width: 100%; padding-left: var(--page-margin-sides); padding-right: var(--page-margin-sides); border-left: 0; margin-bottom: 0; padding-bottom: 50px; } } @media screen and (max-width: 667px) { #featured-sponsor--article p { font-size: 1.25em; line-height: 1.4; } #featured-sponsor--article figure { margin: 5px 0 20px 20px; } } @media screen and (max-width: 667px) { #featured-sponsor--article figure { width: 100%; float: none; margin: 25px 0 15px 0; } } /* Module text styles ----------------- */ .label--small { font-style: italic; } .hmpg-module-header__main-label, .m-comment-noted__label, .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) */ .hmpg-org-wrapper:first-of-type .hmpg-module-header { text-align: center; } } .m-comment-noted__label { padding-left: 1.1em; } .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%); } .m-barometer__label { padding-left: 1.4em; } .m-barometer__label::before { content: url(../img/icon-barometer.svg); display: inline-block; position: absolute; left: 0.2em; transform: scale(.75) translate(-40%, -40%); } .story-item__deck a { border-bottom: 2px solid black; } .tyee-insider__story .story-item__deck, .hmpg-org-deep-dive .story-item--primary .story-item__deck, .hmpg-org-tyee-insider .story-item__deck { font-family: var(--typeface-serif); font-size: 1.33em; line-height: 145% !important; color: var(--text-colour); font-weight: 400; } .story-item__deck { line-height: 135% !important; margin-bottom: 8px; font-weight:100; } @media screen and (max-width: 870px) { .story-item__deck { line-height: 130% !important; } } .story-item--index-page.story-item--primary .story-item__deck { font-size: 1.3em !important; text-align: left; font-weight: 300; font-weight: 400; } .hmpg-org-recent-stories__list .story-item--index-page.story-item--primary .story-item__deck { font-size: 1.5em !important; text-align: left; font-weight: 100; } @media screen and (max-width: 568px) { .story-item--index-page.story-item--secondary .story-item__deck, .story-item--index-page.story-item--tertiary .story-item__deck { font-size: 1.3em !important; line-height: 1.35 !important; } } .hmpg-org-tyee-insider .story-item__deck p { font-size: 118%; line-height: 145%; } .tyee-insider__story .story-item__deck p:nth-of-type(n+2), .hmpg-org-deep-dive .story-item--primary .story-item__deck p:nth-of-type(n+2) { padding-top: 2rem; } .m-tyee-insider__related-label { font-size: .85em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 3rem 0 1rem; /* 4rem total realigns with 2rem-baseline grid */ } /* giant gap below related story label, due to grid. easiest fix is to hide */ @media screen and (max-width: 687px) { .m-tyee-insider__related-label { display: none; } .m-tyee-insider__related-stories { margin-top: 30px; } } .m-comment-noted__title, .m-barometer__title, .m-barometer .barometer-form-list > p { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 4rem; font-size: 2em; text-transform: none; } .m-comment-noted__body p, .barometer-form-list p, .barometer-form-list ul { font-size: 1.3em; line-height: 1.6em; font-family: var(--typeface-serif); } @media screen and (max-width: 683px) { .m-comment-noted__title, .m-barometer__title, .m-barometer .barometer-form-list > p, .barometer-form-list p:first-child { font-size: 1.8em !important;; line-height: 3.5rem !important; } } /* Content text styles ----------------- */ /* Story Items */ .story-item__headline { font-family: var(--typeface-display); font-weight: 500; line-height: 1.5; font-size: 1.5em; margin: 0rem 0 2rem; /* 4rem total realigns with baseline grid */ } .homepage--harriet_b .story-item__headline { font-weight: 700; } .category-label { font-family: var(--typeface-sans); font-size: .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 */ } .story-item__deck { color: var(--text-colour); } @media screen and (max-width: 568px) { .story-item__deck { color: var(--grey); /* higher contrast for mobile */ } .category-label { font-size: 1em; } } /*.story-item__author, .story-item__date { font-weight: 600; }*/ .story-item__author { margin-top: 0rem; } .story-item__author a { display: inline; font-weight: bold; } .m-comment-noted .story-item__author { display: block; margin-top: 2rem; text-align } .m-comment-noted .story-item__author::before { content: "Submitted by"; display: block; margin-top: 2rem; font-weight: 400; font-style: italic; } .story-item__news-source { font-family: var(--typeface-sans); font-weight: 200; } /* for Reported Elsewhere */ .default-global-homepage .story-item__headline div { display: inline; color: black !important; font-style: normal !important; font-family: var(--typeface-sans); font-weight: 200; margin-left: 5px; } /* Separator between headline and news source */ .story-item__news-source::before { content: "•"; padding-left: .25em; padding-right: .25em; } .default-global-homepage .story-item__headline br { display: none; } /* primary story-items */ .story-item--primary .story-item__headline { font-family: var(--typeface-display-large); line-height: 1.4; font-size: 1em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .story-item--primary .category-label { font-size: 1.2em; text-align: left; margin-bottom: 20px !important; } .story-item--primary .category-label a { padding: 2px 7px 1px !important; } @media screen and (max-width: 667px) { .story-item--primary .category-label { font-size: 0.9em; margin-bottom: 8px !important; } .story-item--primary .category-label a { padding: 0px 4px !important; } } .story-item--primary div.story-item__author { padding-top: 2rem; /* 2rem total aligns with baseline grid */ text-align: left; font-size: 1em; font-weight: 400; } @media screen and (max-width: 500px) { .story-item--primary div.story-item__author { padding-top: 1rem; } } .hmpg-org-recent-stories__list .story-item--primary .story-item__headline { font-family: var(--typeface-display-large); line-height: 1.2; font-size: 1.65em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ text-align: left; } .hmpg-org-recent-stories__list .story-item--primary div.story-item__author { padding-top: 2rem; /* 2rem total aligns with baseline grid */ text-align: left; font-size: 1.3em; font-weight: 400; } @media screen and (max-width: 685px) { .hmpg-org-recent-stories__list .story-item--primary .story-item__image { margin-bottom: 15px; } .hmpg-org-recent-stories__list .story-item--primary .story-item__image { /*width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; */ margin-left: -2rem; /* equiv --page-margin-sides but neg. */ margin-right: -2rem; } .hmpg-org-recent-stories__list .story-item--primary .story-item__image img { width: 100%; } } /* secondary story-items */ .story-item--secondary .story-item__headline { font-family: var(--typeface-display-medium); font-weight: 500; font-size: 1.35em; /* Reduces font-size to increase the line measure */ margin-bottom: 1.5rem; /*-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* Adds hyphenation in narrowest views *!/*/ } /* tertiary story-items */ .story-item--tertiary .story-item__headline { font-family: var(--typeface-display-medium); font-weight: 500; font-size: 1.35em; line-height: 2.75rem; margin: 0; /* matches with deck margin-bottom to realign with baseline grid */ } .story-item--tertiary .story-item__deck { font-size: 1em; line-height: 2rem; margin: 1rem 0 0.6rem; } /* minimum story-items */ .story-item--minimum .story-item__headline { font-family: var(--typeface-display-medium); font-weight: 400; font-size: 1.35em; line-height: 3rem; margin-bottom: 0rem; } @media screen and (max-width: 867px) { .story-item--minimum .story-item__headline { font-size: 1.2em !important; line-height: 1.4; } } /* ---- STORY ITEMS TYPOGRAPHY responsive enhancement ---- */ /* STORY ITEMS TYPOGRAPHY SMALL BREAKPOINT -- max: 683px */ @media screen and (max-width: 683px) { /* Reduce size of Primary Headlines in narrowest views */ .story-item--primary .story-item__headline { line-height: 3.5rem; /* this is 2 x baseline */ font-size: 1.6em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .hmpg-org-recent-stories__list .story-item--primary .story-item__headline { line-height: 1.35; font-size: 1.5em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .hmpg-org-recent-stories--general .story-item--primary .story-item__headline { line-height: 1.35; font-size: 2em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .hmpg-org-pinned-story .story-item--primary .category-label { margin-top: 15px; } } /* STORY ITEMS TYPOGRAPHY MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .hmpg-org-pinned-story .story-item--primary .category-label { margin-top: 5px; } .story-item--primary .story-item__deck { # text-transform: uppercase; } .hmpg-org-tyee-insider .story-item--primary .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 */ .story-item--primary .story-item__headline { line-height: 1.35; font-size: 1.8em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ text-align: left; } .hmpg-org-recent-stories__list .story-item--primary .story-item__headline { line-height: 1.35; font-size: 1.8em; margin: 0rem 0 2rem; } .hmpg-org-recent-stories--general .story-item--primary .story-item__headline { line-height: 1.35; font-size: 2.1em; margin: 0rem 0 2rem; } /* Turn off auto-hyphenation in views where it might be excessive */ .story-item--secondary .story-item__headline { line-height: 2.75rem; } /* Keep large size of Primary headlines in module that have more space for them */ .m-tyee-insider__main .story-item--primary .story-item__headline, .hmpg-org-deep-dive .story-item--primary .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) { .story-item--primary .story-item__headline, .hmpg-org-recent-stories__list .story-item--primary .story-item__headline { font-family: var(--typeface-display-large); line-height: 1.35; text-align: left; font-size: 2em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } /* top story only */ .hmpg-org-recent-stories--general .story-item--primary .story-item__headline { font-family: var(--typeface-display-large); line-height: 1.2; text-align: left; font-size: 2.75em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .story-item--secondary .story-item__headline { font-family: var(--typeface-display-medium); /* font-size: 1.5em; Restores font-size as column gets wider */ } } /* STORY ITEMS TYPOGRAPHY ADBLOCK BREAKPOINT -- breakpoint-width-adblock: 1180px - 1367px */ @media screen and (min-width: 1180px) and (max-width: 1367px) { /* top story */ /* .hmpg-org-recent-stories--general .story-item--primary .story-item__headline { line-height: 1.2; /* this is 2 x baseline *!/ font-size: 1.65em; } .hmpg-org-recent-stories--general .story-item--secondary .story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.35em; /* Reduces font-size because Ad-block makes column narrow *!/ }*/ } /* STORY ITEMS TYPOGRAPHY LARGE BREAKPOINT -- breakpoint-width-l: 1368px; */ @media screen and (min-width: 1368px) { /* Increase size for Secondary headlines in widest views */ /* No auto hyphenation for Secondary headlines in widest views */ .story-item--secondary .story-item__headline { font-size: 1.5em; line-height: 3rem; /*-webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual;*/ } /* Keep Recent-stories Secondary headlines smaller because ad-block constrains width */ /* .hmpg-org-recent-stories--general .story-item--secondary .story-item__headline { font-size: 1.35em; line-height: 2.75rem; }*/ /* Slightly reduce size of tertiary headlines in wide screens to accommodate a 2-col stiry-item layout. */ .story-item--tertiary .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) */ .hmpg-org-recent-stories--topic .story-item--primary .story-item__headline { /*font-size: 3.35em;*/ font-size: 2.6em; line-height: 1.35; margin-bottom: 4rem } /*.hmpg-org-recent-stories--topic .story-item--primary > :not(.story-item__image):not(.story-item__headline) { margin-left: 8rem; margin-right: 8rem; }*/ /* Pinned Story enhancement */ .hmpg-org-pinned-story .story-item--primary .category-label { margin-bottom: 1.5rem; } .hmpg-org-pinned-story .story-item--primary .story-item__headline { font-size: 2.6em; line-height: 1.35; margin-bottom: 2.2rem; } .hmpg-org-pinned-story .story-item--primary > :not(.story-item__image) { margin-left: 4rem; margin-right: 4rem; } .hmpg-org-pinned-story .story-item--primary .story-item__deck { /*margin-left: 11.5rem; margin-right: 11.5rem;*/ } .hmpg-org-pinned-story .story-item--primary.story-item--reverse .badge--story-item-placement { transform: scale(1.2); right: -3em; } } /* end of Story Items Typography */ /*-----------------------------------------*\ #ATOMS \*-----------------------------------------*/ strong { font-weight: 600; } /* LINK atom */ a { text-decoration: none; } /* link styles for body text of Insider and Deep Dive */ p a, .site-header__tagline a { border-bottom: 2px solid var(--link-colour); } /* Hovers states for nav-bar items -- only on devices with hover capability, exclude mobile */ @media (hover: hover) and (pointer: fine) { .nav__link:hover, .site-footer a:hover { display: inline-block; color: black; transform: none; /* scale(1.0)!important; /* !important is required to override badges that are scaled by default */ } } /* Hover states for text links and buttons */ a:hover, a:focus { transform: none; /* color: var(--link-colour); */ color: black; font-size: 1em; } h2 a:hover, p a:hover { background: rgb(255,208,0); background: rgba(255,208,0,0.8); } .story-item__author a:hover { border-bottom: 2px solid black; margin-bottom: -2px; } /* disabled all scalin - too many issues on hover - b.c */ /* Patch hover states that cause layout reflow */ .hmpg-org-recent-stories__list .story-item--tertiary .story-item__headline a:hover, .hmpg-org-recent-stories__list .story-item--tertiary .story-item__headline a:focus, .hmpg-org-tyee-insider .story-item--tertiary .story-item__headline a:hover, .hmpg-org-tyee-insider .story-item--tertiary .story-item__headline a:focus { font-size: 1.0em; } /* Patch hover states that cause layout reflow */ p a:hover, p a:focus { display: inline; font-size: 1.0em; } .story-item p a:hover, .story-item p a:focus { /* margin-bottom: -2px; /* Offsets the effect of setting underlined text as an inline-block */ } /* Patch hover states that cause layout reflow */ @media screen and (max-width: 683px) { .story-item--secondary .story-item__headline a:hover, .story-item--secondary .story-item__headline a:focus { display: inline; font-size: 1.0em; } } .text-link--button { display: table; padding-top: 2rem; font-style: italic; border-bottom: 1px solid; margin-bottom: -1px; /* Offsets 1px border */ } /* BUTTON atom */ .button { -webkit-appearance: button; -moz-appearance: button; appearance: button; cursor: pointer; } .button { display: inline-block; border: 2px solid rgb(255,208,0); border: 2px solid rgba(255,208,0,0.8); border-radius: 0rem; padding: calc(1rem - 2px) 4rem; margin: 0; height: 4rem; text-decoration: none; color: black; font-family: var(--typeface-sans); font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; text-align: center; transition: background 250ms ease-in-out, transform 150ms ease; -webkit-appearance: none; -moz-appearance: none; } .button--spanrow { grid-column: 1 / -1; /* Make button span entire grid row */ justify-self: center; /* Collapses button width to its content + padding */ } .button--dark-bg { color: var(--text-colour); background-color: hsla(0, 0%, 100%, 0.3); border: 2px solid white; } .button--dark { color: white; background-color: var(--text-colour); } .button--barometer { display: block; } .site-nav__search-form .button { display: inline-block; border: none; padding: 1rem 2rem; background: var(--brand-colour); color: #ffffff; } .button:hover, .button:focus { color: black; background: rgb(255,208,0); background: rgba(255,208,0,0.8); border-color: transparent; transform: scale(1); } .button:focus { outline-offset: -4px; } .button:active { transform: scale(0.99); } /* BUTTON EXPANDER is used to show and hide content */ .button--expander { } @media screen and (min-width: 1368px) { .default-global-homepage .button--expander-open, #section-index .button--expander-open { /* display: none; */ not sure why this is hidden } } /*-----------------------------------------*\ #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. */ .badge { } .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 */ } .story-item--secondary .badge--story-item-placement, .story-item--tertiary .badge--story-item-placement { left: -2.5em; top: -1em; transform: scale(.85); } .hmpg-org-recent-stories__list .story-item--tertiary .badge--story-item-placement, .hmpg-org-deep-dive .story-item--tertiary .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) { .story-item--primary .badge--story-item-placement, .story-item--reverse.story-item--primary .badge--story-item-placement { left: -2.25em; top: 1em; } .story-item--reverse.story-item--primary .badge--story-item-placement { left: unset; right: -2.25em; } } /* BADGE MEDIUM BREAKPOINT -- breakpoint-width-nav: 850px */ @media screen and (min-width: 850px) { .story-item--primary .badge--story-item-placement, .story-item--reverse.story-item--primary .badge--story-item-placement { left: -2.25em; top: calc(1em + 1.5vw); } .story-item--reverse.story-item--primary .badge--story-item-placement { left: unset; right: -2.25em; } .story-item--secondary .badge--story-item-placement, .story-item--tertiary .badge--story-item-placement { transform: scale(1); } } /* end of Badge molecule */ /* STORY ITEM MOLECULE ------------------- */ /* default story item grid -- single column */ .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"; align-content: start; } .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 */ .story-item--index-page .story-item__image { grid-area: image; margin-bottom: 1px; } .story-item--index-page .badge--story-item-placement { /* grid-area: image; */ z-index: 20; } .story-item--index-page .category-label { grid-area: category; } .story-item--index-page .story-item__headline { grid-area: headline; } .story-item--index-page .story-item__deck { grid-area: deck; font-size: 115%; } .story-item--index-page .story-item__author { grid-area: author; font-size: 1.1em; line-height: 1.35; } .story-item--index-page .story-item__date { grid-area: date; } /* STORY ITEM EXTENSIONS */ .story-item--secondary.story-item { 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"; } .story-item--secondary .category-label { margin-top: 0 } /* 0 top margin aligns label with figure in 2-col story-item layouts */ .story-item--secondary .story-item__author { justify-self: start; } .hmpg-org-tyee-insider .story-item--tertiary { display: block; /* grid messes up alignment */ } @media screen and (max-width: 1367px) { .hmpg-org-deep-dive .story-item--tertiary { display: block; /* grid messes up alignment */ } } .story-item--tertiary .story-item__image { display: none; } .story-item--tertiary .badge--story-item-placement { display: none; } .story-item--tertiary .story-item__headline { display: block; } .story-item--tertiary .story-item__deck { display: block; } .story-item--tertiary .story-item__author { display: inline-block; } .hmpg-org-recent-stories__list .story-item--tertiary { /* font-size: var(--small-text); */ grid-column-gap: calc(var(--gutter-column) * 0.5); } .story-item--tertiary .story-item__author { justify-self: start; } .story-item--minimum { } .story-item--minimum .story-item__image { display: none; } .story-item--minimum .badge--story-item-placement { display: none; } .story-item--minimum .category-label { display: none; } .story-item--minimum .story-item__headline { display: block; } .story-item--minimum .story-item__deck { display: none; } .story-item--minimum .story-item__author { display: none; } .story-item--minimum .story-item__date { display: none; } /* ---- 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. */ .hmpg-org-recent-stories__list .story-item--secondary, .m-tyee-insider__related-stories .story-item--tertiary { display: block; } .hmpg-org-recent-stories__list .house-ad.story-item--index-page { display: none !important; } /* Use float-based layout for Secondary story-items in Recent Stories and Insider modules */ /* Same as Tertiary items in large viewports. */ .hmpg-org-recent-stories__list .story-item--secondary .story-item__image, .m-tyee-insider__related-stories .story-item--tertiary .story-item__image { float: right; width: calc(35% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); margin-bottom: 2rem; } /* Align photo vertically with adjacent headline. */ .hmpg-org-recent-stories__list .story-item--secondary .story-item__image { padding-top: 3.5rem; } .m-tyee-insider__related-stories .story-item--tertiary .story-item__headline { padding-top: 0; } /* Secondary story item gets single-col stacked layout in Deep Dive on narrow viewports. */ .hmpg-org-deep-dive .story-item--secondary { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .hmpg-org-deep-dive .story-item--secondary .category-label { font-family: var(--typeface-sans); font-size: .875em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-colour--text); margin: 1rem 0 1rem; } .hmpg-org-deep-dive .story-item--secondary .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 */ .hmpg-org-recent-stories__list.wide .hmpg-ad-box--halfpage aside { transform: scale(.99); margin-top: 3px; } /* STORY ITEM MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .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"; } .wide .story-item--primary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-rows: auto !important; grid-template-areas: "headline headline" "image image" "image image" "category category" "deck deck" "author author" "date date" } .wide .story-item--primary .category-label { margin-top: 2rem; } .wide .story-item--primary .story-item__deck { margin-top: 1rem; } .wide .story-item--primary .story-item__headline { text-transform: uppercase; font-style: italic; letter-spacing: 2px; line-height: 110%; } .wide .story-item--primary .story-item__author { padding-top: 0; } /* Vertically centre Primary story-item text block in wide views (only for Recent Stories and Pinned Story modules) */ .hmpg-org-recent-stories__list .story-item--primary, .hmpg-org-pinned-story .story-item--primary { grid-template-rows: 1fr auto auto auto 1fr; } .hmpg-org-recent-stories__list .story-item--primary .story-item__image { } .story-item--primary .category-label { margin: 0 0 1rem; align-self: end; } .story-item--primary .story-item__date { margin-bottom: 1rem; /* offsets the 1-rem margin of the category-label */ } .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; } .story-item--secondary.story-item { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .story-item--secondary .category-label { margin-top: 1rem } /* Creates space between image and headline in stacked story-item layout */ .story-item--tertiary { grid-template-rows: auto auto auto auto auto; } .story-item--tertiary .story-item__image { display: grid; } /* Necessary for baseline-element.js to prevent element height from collapsing */ .story-item--tertiary .badge--story-item-placement { display: block; } .story-item--tertiary .category-label { display: block; } .story-item--tertiary .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 .story-item--tertiary. We really only want to select the first 4 .story-item--tertiary elements) */ .hmpg-org-recent-stories__list .story-item--tertiary:nth-of-type(-n+16) { 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/ */ .hmpg-org-recent-stories .story-item--index-page:not(:first-child)::before, .hmpg-org-deep-dive .story-item--index-page:nth-of-type(n+3)::before, .m-tyee-insider__main .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) and (max-width: 845px) { .hmpg-org-recent-stories .story-item--index-page:not(:first-of-type)::before { /*left: calc(var(--gutter-column-half) * -1); /* required to prevent horizontal scroll *!/ width: calc(100% + var(--gutter-column));*/ } .hmpg-org-recent-stories .story-item--index-page:last-of-type::before { left: 0; } } @media screen and (min-width: 684px) { /* row border */ /* expand Recent Stories row borders in medium views */ .hmpg-org-recent-stories .story-item--index-page:not(:first-of-type)::before { /*left: calc(var(--gutter-column-half) * -1); bumps the line out of the margin */ width: calc(100% + var(--gutter-column)); } .hmpg-org-recent-stories .story-item--index-page:last-of-type::before { width: 100%; /* prevent border from extending into margin on R side */ } /* removes row borders from Insider and Deep Dive in medium views */ .hmpg-org-deep-dive .story-item--index-page:nth-of-type(n+3)::before, .m-tyee-insider__main .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/ */ .hmpg-org-recent-stories .story-item--index-page:not(:first-of-type):not(:last-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) !important; } } /* end of borders medium breakpoint */ @media screen and (min-width: 684px) { .hmpg-org-recent-stories .story-item--index-page:nth-of-type(4n+8)::before { width: 100%; } } /* 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 */ .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary:nth-of-type(4n+4)::after { border-right: none !important; } /* .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary:nth-of-type(4)::after { content: none !important; border-right: none !important; }*/ /* .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary { background: #faebee !important; }*/ } @media screen and (min-width: 684px) and (max-width: 845px) { .hmpg-org-recent-stories .story-item--index-page:nth-of-type(4)::before { left: 0; width: 100%; } } /* 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 */ /*.hmpg-org-recent-stories .story-item--index-page:nth-of-type(n+4):nth-of-type(3n)::after { content: none; }*/ .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary:nth-child(odd)::after { content: none; border: none; } } /* end of borders tertiary breakpoint */ @media screen and (min-width: 1000px) and (max-width: 1368px) { .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary:nth-of-type(2n)::before { width: 100%; /* eliminate border jutting out right side at mid-size on tertiary stories */ } } /* 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 */ .hmpg-org-recent-stories .story-item--index-page:nth-of-type(4n)::after { content: none; } .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary:nth-of-type(4n+4)::after { content: none; border: none; } /* remove column border on all tertiary story-items in Recent Stories */ /* .hmpg-org-recent-stories .story-item--index-page.story-item--tertiary::after { content: none; }*/ /* This would remove row borders on tertiary story-items in Recent Stories .hmpg-org-recent-stories .story-item--index-page:nth-of-type(n+9)::before { content: none; } */ /* add column borders around Insider molecules */ /* .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 */ .hmpg-org-deep-dive > .story-item--tertiary:nth-of-type(n+4)::before { content: '' !important; /* !important is required to overrule the earlier .hmpg-org-deep-dive .story-item--index-page:nth-of-type(n+3)::before, .m-tyee-insider__main .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 */ .hmpg-org-deep-dive > .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 ------------------- */ .hmpg-org-recent-stories .house-ad { display: block !important; /* see line 1303 */ /* border-top becones no longer contiguous */ } .hmpg-org-recent-stories .house-ad div { background: var(--yellow); padding: 20px 20px 25px 20px; max-width: 340px; margin: 0 auto; overflow: hidden; } .hmpg-org-recent-stories .house-ad figure { margin: -31px auto 5px; max-width: 80%; } .hmpg-org-recent-stories .house-ad figure img { width: 100%; } .hmpg-org-recent-stories .house-ad h2, .hmpg-org-recent-stories .house-ad p { width: 100%; max-width: 300px; text-align: center; } .hmpg-org-recent-stories .house-ad h2 { font-size: 1.5em; line-height: 1.2; margin-bottom: 12px; } .hmpg-org-recent-stories .house-ad p { font-size: 1.2em; line-height: 1.35; margin-bottom: 2px; } .hmpg-org-recent-stories .house-ad .house-ad--button { font-family: var(--typeface-sans), sans-serif; font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 5px 15px; color: var(--yellow); border: 2px solid #fff; display: block; width: 100%; max-width: 200px; background: #000; margin: 20px auto 0; } .hmpg-org-recent-stories .house-ad .house-ad--button:hover { color: #000; background: #fff; border-color: #000; } @media screen and (max-width: 1060px) { .hmpg-org-recent-stories .house-ad h2 { font-size: 1.2em; } .hmpg-org-recent-stories .house-ad p { font-size: 1.05em; } } @media screen and (max-width: 845px) { .new-site-header--homepage { margin-top: 11vw !important; } html { background:white; } .hmpg-org-recent-stories .house-ad h2 { font-size: 1.8em; } .hmpg-org-recent-stories .house-ad p { font-size: 1.35em; } } @media screen and (max-width: 400px) { .hmpg-org-recent-stories .house-ad h2 { font-size: 1.35em; margin-bottom: 8px; } .hmpg-org-recent-stories .house-ad p { font-size: 1.1em; margin-bottom: 0; } .hmpg-org-recent-stories .house-ad figure { max-width: 200px; } .hmpg-org-recent-stories .house-ad .house-ad--button { font-size: 1.1em; } } .hmpg-ad-box { position: relative; } .hmpg-ad-box--halfpage { display: none; } .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: */ .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 */ } .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) { .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 */ .counter-list--story-items { counter-reset: story-item; } .counter-list--story-items > .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. */ .counter-list--story-items > .story-item:last-of-type { margin-bottom: 0rem; } .counter-list--story-items > .story-item h2::before { content: counter(story-item); display: inline-block; position: absolute; left: -.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 \*-----------------------------------------*/ /* HMPG ORGANISM WRAPPER ----------------- */ /* There's also styles for this wrapper mixed in with other organisms. */ /* Should be considolidated at some point. */ .hmpg-org-wrapper { position: relative; padding: 0 var(--page-margin-sides); padding-bottom: calc(var(--gutter-row) + 0rem); /*max-width: 1600px; /* limit width */ margin: 0 auto; } @media screen and (max-width: 683px) { main section.hmpg-org-recent-stories.hmpg-org-recent-stories--general.hmpg-org-wrapper { padding-top: 0; } } /*@media screen and (min-width: 684px) {*/ main .hmpg-org-wrapper { padding-top: 5rem; } /*}*/ main .hmpg-org-wrapper.annex { padding-top: 2rem; } /* Omit top padding from first modules (This will maintain correct padding when the order of modules changes) */ main .hmpg-org-wrapper:first-of-type { padding-top: 0; } /* Create thick top border on modules that doesn't extend into page magins */ main .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 .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 .hmpg-org-wrapper:first-of-type { padding-top: 1rem; } /* Site Header NON-STANDARD BREAKPOINT -- non-standard-width: 600px */ @media screen and (min-width: 684px) { /* Progressively increase separation between Page Header and first content module. */ main .hmpg-org-wrapper:first-of-type { padding-top: 3rem; } } /* 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 .hmpg-org-wrapper:first-of-type { padding-top: 4rem; } }*/ /* end of HMPG Organism Wrapper */ /* HMPG RECENT STORIES organism ---------- */ .hmpg-org-recent-stories { display: grid; } /* Add space between Recent Stories module header and content */ .hmpg-org-recent-stories .hmpg-module-header { margin-bottom: 6rem; } /* Reduce space between Recent Stories module header and content when module appears at top of page */ .hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories .hmpg-module-header { margin-bottom: 4rem; } .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 .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 */ .button--expander-open ~ :not(script) { display: none; } #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. */ #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 */ #expander--recent-stories:checked ~ .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. .story-item--primary spans full first row. */ /* RECENT STORIES MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ /*@media screen and (min-width: 684px) and (max-width: 1179px) { .hmpg-org-recent-stories__list .hmpg-ad-box--bigbox { display: none; } }*/ .hmpg-org-recent-stories__list > .story-item--tertiary { align-items: start; } @media screen and (min-width: 684px) { .hmpg-org-recent-stories__list > .story-item--tertiary { grid-column: auto / span 3; } .hmpg-org-recent-stories__list > .story-item--tertiary .story-item__headline { font-size: 1.15em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ /*-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;*/ /* Adds hyphenation in medium views where column is narrow */ } .hmpg-org-recent-stories__list > .story-item--tertiary .category-label { margin-top: 1rem; } } @media screen and (min-width: 684px) and (max-width: 845px) { .hmpg-org-recent-stories__list { grid-template-rows: auto; grid-template-columns: repeat(12, 1fr); grid-template-areas: "primary primary primary primary primary primary" "2ndary 2ndary 2ndary 2ndary 2ndary 2ndary"; } .hmpg-org-recent-stories__list .house-ad { /*grid-column: 1 / span 12 !important;*/ display:none !important; } .hmpg-org-recent-stories__list > .story-item--primary { grid-column: auto / span 12; text-align: center; } .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 4; /* display:none !important */ } } @media screen and (min-width: 846px) { .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"; } .hmpg-org-recent-stories__list > .story-item--primary { grid-column: auto / span 12; text-align: center; } .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 4; } .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 3; } } /* STORY ITEM TERTIARY BREAKPOINT -- breakpoint: 1000px */ /* tertiary story-items expand from stacked to 2 columns */ @media screen and (min-width: 1000px) { .hmpg-org-recent-stories__list > .story-item--tertiary { grid-column: auto / span 6; } /* Slightly increases Recent-stories tertiary headline size */ .hmpg-org-recent-stories__list > .story-item--tertiary .story-item__headline { font-size: 1.2em; line-height: 2.5rem; } .hmpg-org-recent-stories__list .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"; } .hmpg-org-recent-stories__list > .story-item--tertiary .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) { .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list { grid-template-columns: repeat(4, 1fr); grid-template-areas: "primary primary primary primary" "2ndary 2ndary 2ndary ad"; } .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--primary { grid-area: primary; } .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 1; } .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--tertiary { grid-column: auto / span 2; } /* Scale Half-page Adblock so it doesn't break the grid */ .hmpg-org-recent-stories__list .hmpg-ad-box--halfpage { position: relative; grid-area: ad; } .hmpg-org-recent-stories__list .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. */ .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--secondary .story-item__image .responsive-img { height: 18rem !important; } } /* RECENT STORIES LARGE BREAKPOINT -- breakpoint: 1368px */ @media screen and (min-width: 1368px) { .hmpg-org-recent-stories--general .hmpg-org-recent-stories__list > .story-item--tertiary { grid-column: auto / span 1; } /* Slightly reduce size of tertiary headlines in wide screens to accommodate extra column */ .hmpg-org-recent-stories__list > .story-item--tertiary .story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.15em; 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 */ .hmpg-org-recent-stories__list .story-item--tertiary .story-item__image { float: right; width: calc(40% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); margin-bottom: 1rem; padding-top: 3.15rem; } /* Disable scaling of Half-page Adblock so that it displays at full size */ .hmpg-org-recent-stories__list .hmpg-ad-box--halfpage aside { transform: none; transform-origin: 0% 0%; } /* Align Half-page Ad with right edge of its grid container */ .hmpg-org-recent-stories__list .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. */ .hmpg-org-tyee-insider { position: relative; display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); background-color: var(--section-bg-yellow); } .hmpg-module-header { height: 2rem; margin-bottom: 2rem; } .hmpg-org-tyee-insider .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 */ } .hmpg-org-most--column .hmpg-module-header { margin-bottom: 4rem; /* Most module columns need more space here because they only use a half-gutter row gap */ } .hmpg-org-reported-elsewhere .hmpg-module-header { margin-bottom: 4rem; /* Reported Elsewhere module needs more space here because they only use a half-gutter row gap */ } @media screen and (max-width: 1000px) { .hmpg-org-most--column .hmpg-module-header, .hmpg-org-reported-elsewhere .hmpg-module-header { margin-bottom: 1rem; } } /* Modules that have a tagline/blurb following their label need a margin */ .m-tyee-insider__main .hmpg-module-header__main-label, .hmpg-org-deep-dive .hmpg-module-header__main-label { margin-right: 3rem; } /* When Recent Stories module appears at top of page its module header and label are hidden */ .hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories--general .hmpg-module-header { display: none; } .hmpg-module-header__main-label-blurb { display: inline-block; } .m-tyee-insider__related-stories { display: grid; grid-row-gap: var(--gutter-row); margin-bottom: -1rem; /* offsets 3rem line-height of headlines in list */ clear: both; /* replaces br clear tag in live version html */ } .m-tyee-insider__main, .m-comment-noted { position: relative } /* Tyee Insider Primary Story-item */ .m-tyee-insider__main .story-item--primary .story-item__deck p { font-size: 1em; line-height: 1.5; } .m-tyee-insider__main .story-item--primary .badge--story-item-placement { display: none; } .m-tyee-insider__main .story-item--primary .category-label { display: none; } .m-tyee-insider__main .story-item--primary .story-item__headline { grid-area: headline; } .m-tyee-insider__main .story-item--primary .story-item__deck { grid-area: deck; } .m-tyee-insider__main .story-item--primary .story-item__author { display: none; } .m-tyee-insider__main .story-item--primary .story-item__date { display: none; } .m-tyee-insider__main .story-item--primary { grid-template-areas: "headline" /* put headline above image */ "image" "deck" "author" "date"; } .m-tyee-insider__main .story-item--primary .story-item__headline { margin-bottom: 4rem; max-width: 636px; } .m-tyee-insider__main .story-item--primary img { width: 100%; /* required becasue this img must omit the .responsive-img class so that it doesn't get targeted by baselineElement */ } .m-tyee-insider__main .story-item--primary .story-item__image { margin-bottom: 4rem } /* Tyee Insider Tertiary Story-item */ .m-tyee-insider__main .story-item--tertiary { grid-template-rows: auto auto auto auto auto; } .m-tyee-insider__main .story-item--tertiary .story-item__image { display: grid; margin-bottom: 2rem; } /* Necessary for baseline-element.js to prevent element height from collapsing */ .m-tyee-insider__main .story-item--tertiary .badge--story-item-placement { display: none; } .m-tyee-insider__main .story-item--tertiary .category-label { display: none; } .m-tyee-insider__main .story-item--tertiary .story-item__headline { display: block; padding: 0rem 0 1rem } .m-tyee-insider__main .story-item--tertiary .story-item__deck { display: none; } .hmpg-org-tyee-insider.annex.hmpg-org-wrapper:before { border-bottom: none; } /* Comment Noted and Barometer molecule styles */ .m-comment-noted, .m-barometer { padding-top: 2rem; border-top: 4px solid var(--text-colour); margin-top: calc(2rem - 4px); /* Offsets the 1px border */ grid-column: auto / span 3 !important; } .m-comment-noted .hmpg-module-header, .m-barometer .hmpg-module-header { height: 2rem; margin-bottom: 4rem; } .m-comment-noted__title, .m-barometer__title { /* padding: 1rem 0; This should be contained in typographic styles not module layout */ min-height: 10rem; } .m-barometer__footer { padding-top: 4rem; } .barometer-form-list p:first-child { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 4rem; font-size: 2em; text-transform: none; min-height: 10rem; margin-bottom: 2rem; } /* Barometer form */ /* Checkbox display method is adapted from here: https://paulund.co.uk/how-to-style-a-checkbox-with-css */ .barometer-form-list__item, .barometer-form-list li { display: block; padding-bottom: 2rem; } input[type=radio] { visibility: hidden; display: none; } .barometer-form-label, .barometer-form-list li { position: relative; left: 3rem; display: inline-block; max-width: 85%; } .barometer-form-list ul { /* list-style-type: circle; */ } .barometer-form-list li { display: block; } .barometer-form-label::before, .barometer-form-list li::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; border-radius: 50%; } /* input[name="barometerpoll"]:checked + .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) { .hmpg-org-tyee-insider { position: relative; grid-template-columns: repeat(6, 1fr); } .hmpg-org-tyee-insider > :first-child { grid-column: auto / span 6; } .hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 3; } .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 */ .hmpg-org-tyee-insider .story-item--primary { display: block; } .hmpg-org-tyee-insider .story-item--primary .story-item__image { float: right; display: block; width: Calc(50% - var(--gutter-column-half)); margin-left: var(--gutter-column); margin-bottom: 3rem; } .m-tyee-insider__main .story-item--primary img { display: block; width: 100%; /* required becasue this img must omit the .responsive-img class so that it doesn't get targeted by baselineElement */ } .m-tyee-insider__main .story-item--primary .story-item__headline { margin-bottom: 4rem; } .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 */ } .m-tyee-insider__related-label { grid-column: 1 / -1; /* Span all columns (required for medium views) */ } .m-comment-noted__title, .m-barometer__title { min-height: 10rem; margin-bottom: 2rem; } } /* End of Tyee Insider medium breakpoint */ .annex /* TYEE INSIDER LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { .hmpg-org-tyee-insider { grid-template-columns: repeat(5, 1fr); } .hmpg-org-tyee-insider > :first-child { grid-column: auto / span 5; } .hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 1; } .hmpg-org-tyee-insider > :nth-child(3) { grid-column: auto / span 1; } .m-tyee-insider__main .story-item--primary .story-item__headline { min-height: 12rem; margin-bottom: 2rem; } .m-comment-noted, .m-barometer { padding-top: 0rem; border-top: none; margin-top: 0; } .m-comment-noted .hmpg-module-header, .m-barometer .hmpg-module-header { height: 2rem; margin-bottom: 8rem; } .m-comment-noted__title, .m-barometer__title { min-height: 12rem; margin-bottom: 2rem; } } /* End of Tyee Insider large breakpoint */ /* End of Tyee Insider organism */ @media screen and (min-width: 745px) and (max-width: 1000px) { .m-tyee-insider__main .story-item--primary .story-item__deck { max-width: 60%; } .hmpg-org-tyee-insider .story-item--primary .story-item__image { width: Calc(40% - var(--gutter-column-half)); } } /* PINNED STORY organism ----------------- */ .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); } .hmpg-org-pinned-story .story-item { padding-top: calc(var(--gutter-row) - 2rem); } /* Set second top border */ /* .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 */ /* .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 ----------------- */ .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 */ } .hmpg-org-deep-dive > .story-item:first-of-type .story-item__image { display: none; } .hmpg-org-deep-dive > .story-item:first-of-type .badge--story-item-placement { display: none; } .hmpg-org-deep-dive > .story-item:first-of-type .category-label { display: none; } .hmpg-org-deep-dive > .story-item:first-of-type .story-item__author { display: none; } .hmpg-org-deep-dive > .story-item:first-of-type .story-item__date { display: none; } /* Remove bottom row border from first story-item */ .hmpg-org-deep-dive .story-item--index-page:first-of-type::after { content: none; } /* Tyee Insider Story-items */ .hmpg-org-deep-dive .story-item--primary { grid-template-columns: 1fr; } .hmpg-org-deep-dive .story-item--primary .story-item__deck { text-transform: none; } .hmpg-org-deep-dive .story-item--secondary .story-item__deck, .hmpg-org-deep-dive .story-item--tertiary .story-item__deck { color: #4F4F4F; /* a11y contrast on grey bg */ } /* ---- DEEP DIVE responsive enhancement ---- */ /* */ /* DEEP DIVE MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .hmpg-org-deep-dive > * { grid-column: auto / span 2; } .hmpg-org-deep-dive > .hmpg-module-header { grid-column: 1 / -1; } .hmpg-org-deep-dive > .story-item:first-of-type { grid-column: 1 / span 3; grid-template-rows: auto 1fr; grid-template-areas: "headline" "deck"; } .hmpg-org-deep-dive > .story-item--secondary { grid-column: auto / span 3; display: block; } .hmpg-org-deep-dive > .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) { .hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .hmpg-org-deep-dive > .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; } .hmpg-org-deep-dive > .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; } .hmpg-org-deep-dive > .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"; } .hmpg-org-deep-dive > .story-item--tertiary .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 ----------------- */ .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 .hmpg-org-most::before { content: none; } /* In narrow views adjust first column top border position to match other module top borders */ .hmpg-org-most--column:first-child { margin-top: -2rem; } .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) */ } .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); } .hmpg-org-most--column .story-item__headline { margin-bottom: 0; } /* ---- MOST responsive enhancement ---- */ /* */ /* MOST MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .hmpg-org-most { grid-template-columns: 1fr 1fr 1fr; } /* In wider eliminate first column position adjustment */ .hmpg-org-most--column:first-child { margin-top: 0rem; } /* Set top border on outer container instead of on each column */ main .hmpg-org-most::before { content: ""; } /* Remove top borders from each column */ .hmpg-org-most--column { padding-top: 0; } .hmpg-org-most--column::before { content: none; } } /* End of Most organism */ /* REPORTED ELSEWHERE organism ----------------- */ .hmpg-org-reported-elsewhere { display: grid; padding-top: 2rem; grid-column-gap: var(--gutter-column); grid-row-gap: 0; align-items: start; } .hmpg-org-reported-elsewhere__list .story-item { padding-top: var(--gutter-row-half); } .hmpg-org-reported-elsewhere__list .story-item:last-of-type { padding-bottom: var(--gutter-row-half); } /* ---- REPORTED ELSEWHERE responsive enhancement ---- */ /* */ /* Reported Elsewhere MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .hmpg-org-reported-elsewhere__list { column-count: 2; column-gap: var(--gutter-column); } .hmpg-org-reported-elsewhere__list > .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) { .hmpg-org-reported-elsewhere__list { column-count: 3; column-gap: var(--gutter-column); } .hmpg-org-reported-elsewhere__list > .story-item { -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } /* End of Reported Elsewhere organism */ /* BUILDER organism ----------------- */ .hmpg-org-builder { display: grid; justify-content: center; padding-top: 3rem !important; background-color: var(--section-bg-yellow); /* var(--brand-colour--mod-bg) not working */ } /* Override unversal module top border */ main .hmpg-org-builder::before { content: none; } .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; } .builder__image { grid-area: image; } .builder__headline { grid-area: headline; } .builder__deck { grid-area: deck; } .builder__cta { grid-area: cta; } .builder__image { display: grid; /* Necessary for baseline-element.js to prevent element height from collapsing */ position: relative; } .builder__image img { width: 100%; max-height: 14rem; } .button--builder { max-width: 280px } .button--builder span { color: var(--brand-colour); } /* Builder text styles */ .builder__headline { font-family: var(--typeface-display-large); line-height: 4rem; font-size: 2.33em; margin: 2rem 0 2rem; } .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) { .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; } .builder__image { justify-self: end; } .builder__image img { width: 100%; max-width: 20rem; max-height: none; } .builder__headline { margin-top: 3rem; align-self: end; } } /* end of Builder medium breakpoint */ /* end of Builder organism */ @media screen and (max-width: 849px) { .hmpg-org-recent-stories__list .story-item--primary .story-item__image .badge--story-item-placement { display: none !important; } } /* SITE HEADER organism ----------------- */ /* This thing is a beast ---------------- */ .site-header { padding-bottom: 0rem; } .site-header__logo-block { display: grid; grid-template-columns: 1fr; grid-column-gap: var(--gutter-column); grid-row-gap: 0; align-items: start; padding-top: 3rem; padding-bottom: 1rem; /* balances grid alignment */ } .site-header__tagline { margin-top: calc(.3rem + 2vw); } .site-header__tagline--a, .site-header__tagline--b { display: none; } .site-header__tagline--mobile { position: absolute; width: 100%; text-align: center; } .site-header__tagline--mobile::before, .site-header__tagline--mobile::after { display: none; } .site-header__logo { position: relative; justify-self: center; line-height: 0; /* required to prevent additional height in element */ min-height: 12rem; /* Keeps height of logo block aligned with grid */ } .site-header__logo img { max-width: 100%; max-height: 96px; padding: 0 2vw; } /* SITE NAV MOLECULE */ /* Default for narrow views: Hide all nav item items except the hamburger, search button, and the dropdown menus. (This rule leaves the dropdown menus unaffected so that their visibility will be controlled by the checkbox state of #expander--nav-menu (and #expander--search) as defined below in the NAV DROPDOWN EXPANDER rules) */ .site-nav-main > :not(.nav__burger):not(.site-nav__dropdown):not(.nav__link--search):not(.site-nav__search-dropdown) { display: none; } .nav__link { cursor: pointer; } .site-nav-main__expander-toggle.nav__burger::before, .site-nav-main__expander-toggle.nav__link--more::after { content: "arrow_drop_down"; display: inline-block; vertical-align: -.25em; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 1rem; /* required to prevent additional height in element */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .nav__link--join { position: relative; left: 1.35em; /* Keeps icon placed ::before within the grid column */ margin-right: 1.35em; /* Offsets the shift left to prevent breaking the grid in narrow views */ } .site-footer .nav__link--join { position: relative; left: unset; /* Keeps link centered in narrow ipad view */ margin-right: -1.25em; /* Keeps link centered in narrow ipad view */ } .nav__link--join::before { content: url('../img/icon-dollar-heart.svg'); display: block; position: absolute; left: -1.5em; transform: scale(.6) translate(-40%, -30%); } .nav__link--search { position: relative; left: 1.35em; /* Keeps icon placed ::before within the grid column */ margin-right: 1.35em; /* Offsets the shift left to prevent breaking the grid in narrow views */ } .nav__link--search::before { content: url('../img/icon-search.svg'); display: inline-block; position: absolute; left: -1.35em; transform: scale(.6) translate(-40%, -30%); } /* NAV DROPDOWN 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 */ /* DEFAULT state: Dropdown Menu is hidden */ .site-nav__dropdown { display: none; grid-column: 1 / -1; } /* ACTIVATED state: Menu is shown and toggle icon is inverted */ #expander--nav-menu:checked ~ .site-nav__dropdown { display: grid; /* This must be "grid" if the revealed menu is itself using an internal grid layout */ } .site-nav #expander--nav-menu:checked ~ .site-nav-main__expander-toggle::before, .site-nav #expander--nav-menu:checked ~ .site-nav-main__expander-toggle::after { transform: rotate(180deg); } /* SEARCH DROPDOWN EXPANDER */ /* Search Dropdown is now integrated into the Nav Dropdown and the Search button is just another label for the input#expander--nav-menu checkbox */ .site-nav__search-dropdown { grid-column: 1 / -1; padding-top: 3rem; padding-bottom: 3rem; margin-top: .5rem; margin-bottom: -.5rem; background-color: var(--utility-background-color); } .site-nav__search-dropdown .site-nav__search-form { display: grid; grid-template-columns: 4fr 1fr; font-size: 2.7rem; } .site-nav__search-dropdown .site-nav__search-form .button { padding-top: 1rem; } .site-nav__search-dropdown .site-nav__search-form > * { display: grid; grid-template-columns: 4fr 1fr; font-size: .6em; height: 4rem; border: 1px solid var(--utility-background-color); } form input { padding-left: .65em; } /* SUB-NAV DROPDOWN EXPANDERS */ /* 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 */ /* Sub-nav has arrow toggle icon */ .site-nav__dropdown-expander-toggle::after { content: "arrow_drop_down"; display: inline-block; vertical-align: -.25em; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 1rem; /* required to prevent additional height in element */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* subnav DEFAULT STATE: Menu content in adjacent sibling div is hidden */ #expander--nav-menu-section-submenu + label.site-nav__dropdown-expander-toggle + div.expander-content, #expander--nav-menu-topics-submenu + label.site-nav__dropdown-expander-toggle + div.expander-content, #expander--nav-menu-more-submenu + label.site-nav__dropdown-expander-toggle + div.expander-content { display: none; } /* subnav ACTIVATED STATE: Menu content is shown and adjacent sibling toggle icon is inverted */ #expander--nav-menu-section-submenu:checked + label.site-nav__dropdown-expander-toggle + div.expander-content, #expander--nav-menu-topics-submenu:checked + label.site-nav__dropdown-expander-toggle + div.expander-content, #expander--nav-menu-more-submenu:checked + label.site-nav__dropdown-expander-toggle + div.expander-content { display: grid; /* Menu content is shown */ } #expander--nav-menu-section-submenu:checked + .site-nav__dropdown-expander-toggle::after, #expander--nav-menu-topics-submenu:checked + .site-nav__dropdown-expander-toggle::after, #expander--nav-menu-more-submenu:checked + .site-nav__dropdown-expander-toggle::after { transform: rotate(180deg); /* toggle icon is inverted */ } /* ---- SITE HEADER responsive enhancement ---- */ /* -------------------------------------------- */ /* DELETED — moved to nav-deleted-css */ /*------------------------------------*\ #HELPER CLASSES \*------------------------------------*/ /* RESPONSIVE IMAGES -- forces the image to be the same width as its parent element. Confusingly similar in name to Bootstrap's .img-responsive but this will actually stretch an image rather than merely shrink it. */ .responsive-img { width: 100%; height: auto; display: block; } /*------------------------------------*\ #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 ) */ .hmpg-org-recent-stories .story-item--tertiary .story-item__image .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 ) */ @media screen and (min-width: 1368px) { .hmpg-org-recent-stories .story-item--tertiary .story-item__image .responsive-img { min-height: calc( ( ( ( 100vw - (var(--page-margin-sides) * 2) - (3 * var(--gutter-column)) ) / 4 ) * .4 ) / 1.5 ); } } /*------------------------------------*\ #SECTION INDEX ie NEWS \*------------------------------------*/ body#section-index .hmpg-org-recent-stories .hmpg-module-header { margin-bottom: 50px; height: auto; } body#section-index .hmpg-org-recent-stories .hmpg-module-header h2.hmpg-module-header__main-label { font-size: 3em; padding: 10px 0 0; letter-spacing: 0.11em !important; /*margin-bottom: 30px;*/ } @media screen and (max-width: 684px) { body#section-index .hmpg-org-recent-stories .hmpg-module-header { padding-bottom: 0px; margin-bottom: 15px; height: auto; } body#section-index .hmpg-org-recent-stories .hmpg-module-header h2.hmpg-module-header__main-label { padding: 20px 0 0; text-align: center; margin: 0 auto; font-size: 2.4em; float: none; } body#section-index main section.hmpg-org-recent-stories.hmpg-org-recent-stories--topic.hmpg-org-wrapper { padding-top: 10px; } } @media screen and (min-width: 685px) and (max-width: 850px) { body#section-index .hmpg-org-recent-stories .hmpg-module-header h2.hmpg-module-header__main-label { font-size: 2.6em; } body#section-index main section.hmpg-org-recent-stories.hmpg-org-recent-stories--topic.hmpg-org-wrapper { padding-top: 20px; } } body#section-index main section.hmpg-org-recent-stories.hmpg-org-recent-stories--topic.hmpg-org-wrapper { padding-bottom: 5px; } @media screen and (min-width: 1368px) { body#section-index .story-item--primary .story-item__headline { /*font-size: 3.35em;*/ font-size: 2.6em; line-height: 1.35; margin-bottom: 2rem; } } body#section-index .story-item__image { margin-bottom: 10px; } @media screen and (max-width: 684px) { body#section-index .story-item__image { margin-bottom: 15px; } body#section-index .hmpg-org-recent-stories__list .story-item--primary .story-item__image { margin-left: -2rem; margin-right: -2rem; } body#section-index .story-item__image { /*width: 100%;*/ } } @media screen and (min-width: 1000px) { body#section-index .section-stories .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 4; } body#section-index .section-stories .hmpg-org-recent-stories__list .hmpg-ad-box { grid-column: 9 / span 4; /*background: #faebee;*/ } } @media screen and (min-width: 669px) and (max-width: 999px) { body#section-index .section-stories .hmpg-org-recent-stories__list > .story-item--secondary { grid-column: auto / span 6; } body#section-index section.section-stories .hmpg-org-recent-stories__list .hmpg-ad-box { display: none; } } @media screen and (min-width: 450px) and (max-width: 684px) { body#section-index section.section-stories .hmpg-org-recent-stories__list > .story-item--primary, body#section-index section.section-stories .hmpg-org-recent-stories__list > .story-item--secondary, body#section-index section.section-stories .hmpg-org-recent-stories__list > .story-item--tertiary, body#section-index section.section-stories .hmpg-org-recent-stories__list .hmpg-ad-box, body#section-index.news label.button.button--spanrow { grid-column: auto / span 12; } body#section-index main section.hmpg-org-recent-stories.hmpg-org-recent-stories--topic.hmpg-org-wrapper.section-stories div.hmpg-org-recent-stories__list article.story-item.story-item--index-page.story-item--primary { /*width: 100%;*/ } } main .hmpg-org-wrapper.section-stories::before { content: none; /* eliminate thick border; see ln 2151*/ } body#section-index section.section-stories .hmpg-org-recent-stories__list .hmpg-ad-box::before { content: ""; position: absolute; top: calc(var(--gutter-row-half) * -1); width: 100%; border-bottom: 1px solid var(--border-colour-cols); } @media screen and (min-width: 685px) { /* row border */ /* expand Recent Stories row borders in medium views */ body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(even)::before { /*left: calc(var(--gutter-column-half) * -1); bumps the line out of the margin */ width: calc(100% + var(--gutter-column)); } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(odd)::before { width: 100%; /* prevent border from extending into margin on R side */ } } @media screen and (min-width: 685px) and (max-width: 989px) { /* row border */ /* expand Recent Stories row borders in medium views */ body#section-index .hmpg-org-recent-stories__list > .story-item--secondary:nth-of-type(odd)::before { width: 100%; } body#section-index .hmpg-org-recent-stories__list > .story-item--secondary:nth-of-type(odd)::after { content: none; } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(4n+3)::before { /*left: calc(var(--gutter-column-half) * -1); bumps the line out of the margin */ width: calc(100% + var(--gutter-column)) !important; } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(odd)::before { width: 100%; /* prevent border from extending into margin on R side */ } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(4n+4)::after { content: ''; position: absolute; top: 0; right: calc(var(--gutter-column-half) * -1); height: 100%; border-right: 1px solid var(--border-colour-cols) !important; } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(4n+5)::after { content: none; } } @media screen and (min-width: 1368px) { body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(even)::after { content: ''; position: absolute; top: 0; right: calc(var(--gutter-column-half) * -1); height: 100%; border-right: 1px solid var(--border-colour-cols) !important; } body#section-index .hmpg-org-recent-stories__list > .story-item--tertiary:nth-of-type(odd)::after { content: none; } body#section-index main section.hmpg-org-recent-stories.hmpg-org-recent-stories--topic.hmpg-org-wrapper { padding-bottom: 40px; } } /*body#section-index .hmpg-org-recent-stories__list > .story-item--secondary:nth-of-type(3n+3) { background: aqua; }*/ @media screen and (min-width: 685px) { body#section-index section.section-stories .story-item--primary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "headline image" "deck image" "author image" "date image"; } }