diff --git a/blocks/tags/tags.css b/blocks/tags/tags.css new file mode 100644 index 00000000..640afcf4 --- /dev/null +++ b/blocks/tags/tags.css @@ -0,0 +1,65 @@ +.section.tags-container { + margin-bottom: 5rem; + padding-left: 1rem; + padding-right: 1rem; +} + +.section>.section-container { + border-top: 1px solid #3c465033; + padding-top: 1.75rem; +} + +.section.tags-container>.section-container { + gap: 2rem; +} + +.section.tags-container>.section-container:has(p) { + display: flex; +} + +.section.tags-container h1 { + margin-bottom: 2rem; + font-size: 2rem; +} + +.tags a.button.primary { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-medium); + padding: 0.25rem 0.5rem; + border-radius: 10px; + height: unset; + min-width: unset; + margin-right: 0.5rem; +} + +.tags a.button.primary:hover { + background-color: #00577a; +} + + +@media (min-width: 48rem) { + .section.tags-container.narrow { + max-width: 45rem; + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 62rem) { + .section.tags-container.narrow { + max-width: 54.5rem; + } + + .section.tags-container.narrow>.section-container { + max-width: 45rem; + margin-left: 1rem; + padding-left: unset; + padding-right: unset; + } +} + +@media (min-width: 77rem) { + .section.tags-container.narrow>.section-container { + margin-left: 0; + } +} diff --git a/blocks/tags/tags.js b/blocks/tags/tags.js new file mode 100644 index 00000000..430bbe64 --- /dev/null +++ b/blocks/tags/tags.js @@ -0,0 +1,12 @@ +/** +* decorates the tags block +* @param {Element} block The social block element +*/ +export default async function decorate(block) { + const tags = block.querySelectorAll('a'); + block.innerHTML = ''; + + [...tags].forEach((tag) => { + block.appendChild(tag); + }); +} diff --git a/tools/importer/import-news-press-healthythinking.js b/tools/importer/import-news-press-healthythinking.js index ffcfddbe..5ac007b0 100644 --- a/tools/importer/import-news-press-healthythinking.js +++ b/tools/importer/import-news-press-healthythinking.js @@ -11,7 +11,12 @@ */ /* global WebImporter */ -import { addBreadCrumb, createMetadata, fixRelativeLinks } from './utils.js'; +import { + addBreadCrumb, + createMetadata, + fixRelativeLinks, + createSectionMetadata, +} from './utils.js'; /* eslint-disable no-console, class-methods-use-this */ const extractEmbed = (document) => { @@ -102,6 +107,8 @@ const addTagsBlock = (document) => { }); const table = WebImporter.DOMUtils.createTable(cells, document); + section.before(document.createElement('hr')); + section.after(createSectionMetadata({ Style: 'Narrow' }, document)); section.before(tagLabel); section.replaceWith(table); }