diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css new file mode 100644 index 00000000..4e85d5ae --- /dev/null +++ b/blocks/career-apply/career-apply.css @@ -0,0 +1,71 @@ +.career-apply-wrapper { + background-color: var(--primary); +} + +.career-apply { + color: var(--white); + text-align: left; + padding-inline: 1rem; + padding-block: 3rem; +} + +.career-apply h2 { + color: var(--white); + font-size: 28px; + margin-bottom: 1rem; +} + +.career-apply p { + line-height: 24px; + margin-bottom: 1.5rem; +} + +.career-apply .button-container { + display: inline-flex; + flex-direction: column; +} + +.career-apply a { + margin: 0.5rem 0; +} + +.career-apply a.button.primary.linkedin { + background-color: var(--primary); + border: 1px solid white; + padding-left: 2.5rem; +} + +.career-apply a.button.primary.linkedin:hover { + opacity: 0.7; +} + +.career-apply span.icon-linkedin { + margin-left: 0.625rem; + margin-right: 1rem; + height: 2rem; + width: 2.125rem; +} + +@media (min-width: 62rem) { + .career-apply { + max-width: 45rem; + text-align: center; + padding-block: 5rem; + } + + .career-apply h2 { + font-size: var(--heading-font-size-mxl); + } + + .career-apply p { + margin-bottom: 3.125rem; + } + + .career-apply .button-container { + flex-direction: row; + } + + .career-apply a { + margin: 0 0.5rem; + } +} \ No newline at end of file diff --git a/blocks/career-apply/career-apply.js b/blocks/career-apply/career-apply.js new file mode 100644 index 00000000..d370117b --- /dev/null +++ b/blocks/career-apply/career-apply.js @@ -0,0 +1,37 @@ +import { getLanguage } from '../../scripts/scripts.js'; +import { fetchPlaceholders } from '../../scripts/lib-franklin.js'; + +export default async function decorate(block) { + const placeholders = await fetchPlaceholders(getLanguage()); + + const section = document.querySelector('.section.career-apply-container'); + if (section) { + section.classList.add('full-width'); + } + + const title = document.createElement('h2'); + title.innerText = placeholders['career-apply-title']; + block.appendChild(title); + + const msg = document.createElement('p'); + msg.innerText = placeholders['career-apply-msg']; + block.appendChild(msg); + + const buttonBar = document.createElement('p'); + buttonBar.classList.add('button-container'); + const search = document.createElement('a'); + search.innerText = placeholders['career-apply-search']; + search.classList.add('button', 'primary'); + search.href = placeholders['career-apply-search-href']; + buttonBar.appendChild(search); + + const linkedin = document.createElement('a'); + linkedin.innerText = placeholders['career-apply-linkedin']; + linkedin.classList.add('button', 'primary', 'linkedin'); + linkedin.href = placeholders['career-apply-linkedin-href']; + const sprite = document.createElement('span'); + sprite.classList.add('icon', 'icon-linkedin'); + linkedin.appendChild(sprite); + buttonBar.append(linkedin); + block.appendChild(buttonBar); +}