diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 3f398c2c..964110c2 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -3,6 +3,7 @@ import { createOptimizedPicture, createTag, buildBlock, decorateBlock, loadBlock, } from '../../scripts/scripts.js'; +import { returnLinkTarget } from '../../utils/helpers.js'; // Redesign's version: render image card list const decorateCardListByListElement = (block) => { @@ -19,7 +20,11 @@ const decorateCardListByListElement = (block) => { const link = li.querySelector('a'); if (link) { - const tag = createTag('a', { href: link.getAttribute('href'), class: 'card-wrapper' }); + const tag = createTag('a', { + href: link.getAttribute('href'), + class: 'card-wrapper', + }); + tag.setAttribute('target', returnLinkTarget(tag.href)); link.parentElement.innerHTML = link.innerHTML; [...li.childNodes].forEach((child) => { tag.append(child); @@ -31,6 +36,12 @@ const decorateCardListByListElement = (block) => { cardTitle.replaceChildren(span); tag.classList.add('link-highlight-colorful-effect-hover-wrapper'); + // TODO: temp fix for status.live + if (cardTitle.textContent.toLowerCase() === 'status.live') { + tag.setAttribute('href', 'https://status.hlx.live/'); + tag.setAttribute('target', '_blank'); + } + li.append(tag); } ul.append(li); diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 96a6f69f..0326c129 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -2,6 +2,10 @@ text-align: left; } +.columns .columns-image img { + max-width: 100%; +} + .columns.bleed > div { display: flex; flex-direction: column; @@ -332,3 +336,31 @@ padding: var(--spacing-xxl) var(--spacing-xl); } } + +/* adjust image size on sidekick extension page */ +.columns.center-image-small > div { + padding: 0; +} + +.columns.center-image-small > div > div:last-of-type { + display: grid; + justify-content: center; + align-items: center; +} + +.columns.center-image-small > div > div:last-of-type picture { + width: fit-content; + display: flex; + justify-content: center; + align-items: center; +} + +.columns.center-image-small > div > div:last-of-type img { + width: 70%; + max-width: 360px; + filter: none; +} + +main.without-full-width-hero .section.content .columns-wrapper { + margin-top: var(--spacing-m); +} \ No newline at end of file diff --git a/blocks/faq/faq.css b/blocks/faq/faq.css index f1f30211..1086ce63 100644 --- a/blocks/faq/faq.css +++ b/blocks/faq/faq.css @@ -1,9 +1,24 @@ main .faq dt { - margin-top: 64px; - scroll-margin-top: 64px; + margin-top: var(--spacing-m); + scroll-margin-top: var(--spacing-m); font-weight: 700; + margin-bottom: var(--spacing-xxs); } main .faq a { scroll-margin: calc(var(--nav-height) + 1em); +} + +main .faq dt > a { + font-size: var(--type-heading-s-size); + line-height: var(--type-heading-s-lh); +} + +main .faq dd { + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); +} + +body.guides-template main .faq dt a.anchor-link:any-link::before { + top: 0; } \ No newline at end of file diff --git a/blocks/faq/faq.js b/blocks/faq/faq.js index fcd3a6eb..86898978 100644 --- a/blocks/faq/faq.js +++ b/blocks/faq/faq.js @@ -13,12 +13,14 @@ export default async function decorateFaq($block) { const $dl = document.createElement('dl'); json.data.forEach((row, i) => { const $dt = document.createElement('dt'); + $dt.classList.add('link-highlight-colorful-effect-hover-wrapper'); $dt.id = row.Id || `q${(i + 1)}`; $dt.innerText = row.Question; addAnchorLink($dt); const $dd = document.createElement('dd'); const answer = autoLink(row.Answer); - + const titleLink = $dt.querySelector('.anchor-link'); + if (titleLink) titleLink.classList.add('link-highlight-colorful-effect-2'); $dd.innerHTML = answer; $dl.append($dt, $dd); }); diff --git a/blocks/side-navigation/side-navigation.css b/blocks/side-navigation/side-navigation.css index bd74eb7f..980e7671 100644 --- a/blocks/side-navigation/side-navigation.css +++ b/blocks/side-navigation/side-navigation.css @@ -209,7 +209,7 @@ } /* with arrow toggle list layer */ -.side-navigation .list-section:last-of-type .list-section-inner > li { +.side-navigation .list-section:last-of-type .list-section-inner > li.side-navigation-nested-target { padding: 2px var(--nav-sidebar-indent-spacing); width: 100%; cursor: pointer; diff --git a/blocks/side-navigation/side-navigation.js b/blocks/side-navigation/side-navigation.js index ba5bfcbe..6a476aff 100644 --- a/blocks/side-navigation/side-navigation.js +++ b/blocks/side-navigation/side-navigation.js @@ -1,4 +1,5 @@ import createTag from '../../utils/tag.js'; +import { returnLinkTarget } from '../../utils/helpers.js'; let searchFunc; let searchTerm; @@ -174,6 +175,13 @@ export default async function decorate(block) { // close overlay when clicked on link, ensure close overlay if link is on same page const allSideNavLinks = block.querySelectorAll('a'); allSideNavLinks.forEach((link) => { + // open external link in new tab + link.setAttribute('target', returnLinkTarget(link.href)); + // TODO: temp fix for status.live + if (link.textContent.toLowerCase() === 'status.live') { + link.setAttribute('href', 'https://status.hlx.live/'); + link.setAttribute('target', '_blank'); + } link.addEventListener('click', () => { backdropCurtain.classList.remove('is-open'); block.classList.remove('overlay'); diff --git a/styles/styles.css b/styles/styles.css index 17915790..22be506a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -469,6 +469,7 @@ code { code:not(pre > code) { font-size: 14px; + overflow-wrap: break-word; border: 1px solid #e5e5e5; background-color: var(--code-bg-color); color: var(--brand-color-dark-purple); @@ -1097,11 +1098,18 @@ body.guides-template main a { line-height: var(--type-body-s-lh); } -body.guides-template main .default-content-wrapper a { +body.guides-template main .section.content a { + overflow-wrap: break-word; +} + +body.guides-template main .default-content-wrapper a, +body main .faq dd a { transition: all 0.2s ease-in-out; + cursor: pointer; } -body.guides-template main .default-content-wrapper a:hover { +body.guides-template main .default-content-wrapper a:hover, +main .faq dd a:hover { color: var(--spectrum-blue); }