diff --git a/404.html b/404.html index eb00bb7f..3135279c 100644 --- a/404.html +++ b/404.html @@ -10,38 +10,9 @@ - + + - @@ -49,16 +20,12 @@
- - 404 - -

Page Not Found

+

The page has not been found

- Go home + Go home

- diff --git a/blocks/brand-overview/brand-overview.css b/blocks/brand-overview/brand-overview.css index a4f47304..44cb7b92 100644 --- a/blocks/brand-overview/brand-overview.css +++ b/blocks/brand-overview/brand-overview.css @@ -114,7 +114,7 @@ main .section.brand-overview-container { /* button wrapper */ .button-wrapper { - gap: var(--spacing-simple); + gap: var(--spacing-half); @media (width >= 1200px) { display: flex; diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 4e7adf40..8d7adde6 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -49,6 +49,10 @@ line-height: var(--body-line-height-m); color: var(--color-white); background-color: var(--color-red); + + &::after { + bottom: 0.5em; + } } .cards .cards-card-body { diff --git a/blocks/contact-banner/contact-banner.css b/blocks/contact-banner/contact-banner.css index a16ba0de..328efed5 100644 --- a/blocks/contact-banner/contact-banner.css +++ b/blocks/contact-banner/contact-banner.css @@ -27,17 +27,12 @@ > div { flex: 1; - max-width: 50%; + max-width: calc(50% - var(--spacing-simple) / 2); } } > div { min-height: 300px; - - @media (width >= 900px) { - flex: 1; - max-width: 50%; - } } } @@ -56,6 +51,7 @@ & > div { align-items: stretch; + margin-bottom: 0; > div:not(:first-child) { padding: 20px; @@ -75,6 +71,7 @@ } &:nth-child(2) { + height: 3em; margin-bottom: var(--spacing-half); } @@ -82,18 +79,30 @@ &:nth-child(2) { font-weight: var(--font-weight-bold); } + + a { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: inline-block; + max-width: calc(100% - 2em); + } } } } /* image */ - .columns-img-col img { - width: 100%; - max-width: 300px; - margin: 0 auto; - height: 100%; - object-fit: cover; + .columns-img-col { + margin-bottom: 0; + + img { + width: 100%; + max-width: 300px; + margin: 0 auto; + height: 100%; + object-fit: cover; + } } &.one-quarter-three-quarter > div > div:first-child { diff --git a/blocks/dates/dates.css b/blocks/dates/dates.css index f0bcf5aa..b8895dfb 100644 --- a/blocks/dates/dates.css +++ b/blocks/dates/dates.css @@ -14,30 +14,35 @@ align-items: center; justify-content: space-around; background-color: var(--color-gray-light); -} + padding: var(--spacing-half) 0; -.dates-container .dates.block > div { - position: relative; - padding-left: var(--spacing-double); -} + p { + margin: 0; + } -.dates-container .dates.block > div::before { - content: url('../../icons/arrow-right.svg'); - position: absolute; - left: 0; - top: 50%; - width: 30px; - transform: translateY(-50%); -} + & > div { + position: relative; + padding-left: var(--spacing-double); -.dates-container .dates.block > div:first-child::before { - content: url('../../icons/calendar.svg'); -} + &::before { + content: url('../../icons/arrow-right.svg'); + position: absolute; + left: 0; + top: 50%; + width: 30px; + transform: translateY(-50%); + } + + &:first-child::before { + content: url('../../icons/calendar.svg'); + } -.dates-container .dates.block > div .date { - color: var(--link-color); - font-size: var(--heading-font-size-m); - line-height: var(--heading-line-height-m); - font-weight: var(--font-weight-bold); - text-transform: uppercase; + .date { + color: var(--link-color); + font-size: var(--heading-font-size-m); + line-height: var(--heading-line-height-m); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + } + } } diff --git a/blocks/header/header.css b/blocks/header/header.css index e7162ef6..70ecc33c 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -249,7 +249,6 @@ header nav .nav-sections { display: none; visibility: hidden; grid-area: sections; - padding: 0 var(--spacing-simple); } header nav .nav-sections ul { @@ -269,8 +268,9 @@ header nav .nav-sections[aria-expanded='true'] { } header nav .nav-sections .default-content-wrapper > ul { - max-height: calc(100vh - (2 * var(--nav-height))); + max-height: calc(100vh - (1 * var(--nav-height))); overflow-y: auto; + padding: 0 var(--spacing-simple); } header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul > li { @@ -282,10 +282,15 @@ header nav .mobile-menu > li { padding-top: var(--spacing-half); } + +header nav .mobile-menu li > span { + padding-right: var(--spacing-half); + cursor: pointer; +} + header nav .mobile-menu > li > span { font-weight: var(--font-weight-bold); position: relative; - padding-right: var(--spacing-half); } header nav .mobile-menu > li > span::after { @@ -303,6 +308,11 @@ header nav .mobile-menu > li > span::after { border-width: 2px 2px 0 0; } +header nav .mobile-menu > li ul { + margin-top: 5px; + padding-left: var(--spacing-half); +} + header nav .mobile-menu > li > ul { display: none; } @@ -512,52 +522,45 @@ header nav .mobile-menu li.is-visible > ul { /* breadcrumbs */ .breadcrumbs { - width: 100%; max-width: var(--page-width); - overflow: hidden; margin: 0 auto; font-size: var(--body-font-size-s); - background: none; + line-height: var(--body-line-height-s); - @media (width >= 900px) { - padding: 0 var(--spacing-simple); - } -} - -.breadcrumbs ol { - display: flex; - flex-flow: wrap; - list-style: none; - padding: 0; - margin-top: 0; - margin-bottom: 0; - gap: 1ch; -} + ol { + display: flex; + flex-flow: wrap; + list-style: none; + padding: 0; + gap: 1ch; -.breadcrumbs ol li { - padding-inline-start: 0; - opacity: 0.7; + li { + padding-inline-start: 0; + opacity: 0.7; - a:any-link, span { - color: var(--text-color); - margin-right: 4px; - } -} + &:not(:last-child)::after { + content: ''; + display: inline-block; + width: 6px; + height: 6px; + transform: rotate(45deg); + border-radius: 0 1px 0 0; + border-style: solid; + border-color: currentcolor; + border-width: 2px 2px 0 0; + } -.breadcrumbs ol li:not(:last-child)::after { - content: ''; - display: inline-block; - width: 6px; - height: 6px; - transform: rotate(45deg); - border-radius: 0 1px 0 0; - border-style: solid; - border-color: currentcolor; - border-width: 2px 2px 0 0; -} + &:last-of-type { + opacity: 1; + } -.breadcrumbs ol li:last-of-type { - opacity: 1; + a:any-link, + span { + color: var(--text-color); + margin-right: 4px; + } + } + } } /* search */ @@ -567,8 +570,8 @@ header nav .mobile-menu li.is-visible > ul { @media (width >= 900px) { display: block; } -} -.header .search-bar-container .block { - margin-bottom: 0; + .block { + margin-bottom: 0; + } } diff --git a/blocks/header/header.js b/blocks/header/header.js index cd4b754a..109f4f2f 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -224,7 +224,9 @@ function buildBreadcrumbs(breadcrumbsElement) { const ol = document.createElement('ol'); ol.append(...crumbs.map((item) => { const li = document.createElement('li'); - if (item['aria-current']) li.setAttribute('aria-current', item['aria-current']); + if (item['aria-current']) { + li.setAttribute('aria-current', item['aria-current']); + } if (item.url) { const a = document.createElement('a'); a.href = item.url; diff --git a/blocks/text-box/text-box.css b/blocks/text-box/text-box.css index 710f506f..f241e6f9 100644 --- a/blocks/text-box/text-box.css +++ b/blocks/text-box/text-box.css @@ -12,6 +12,10 @@ .text-box { padding: var(--spacing-half) var(--spacing-simple); color: var(--color-white); + + p:last-child { + margin-bottom: 0; + } } .text-box.red a, diff --git a/scripts/404.js b/scripts/404.js new file mode 100644 index 00000000..a2f7bcf5 --- /dev/null +++ b/scripts/404.js @@ -0,0 +1,63 @@ +/* + * Copyright (c) 2024 TechDivision GmbH + * All rights reserved + * + * This product includes proprietary software developed at TechDivision GmbH, Germany + * For more information see https://www.techdivision.com/ + * + * To obtain a valid license for using this software please contact us at + * license@techdivision.com + */ + +import { getMetadata } from './aem.js'; +import { loadPlaceholders, ts } from './i18n.js'; + +/** + * Translate content + */ +function translateContent() { + const title = getMetadata('og:title'); + const translatedTitle = ts(title); + + document.querySelector('meta[property="og:title"]') + .setAttribute('content', translatedTitle); + document.title = translatedTitle; + + document.querySelectorAll('main [data-translate="true"]') + .forEach((element) => { + element.textContent = ts(element.textContent); + }); +} + +/** + * Prepare go back button + */ +function prepareGoBack() { + if (document.referrer) { + const { + origin, + pathname, + } = new URL(document.referrer); + if (origin === window.location.origin) { + const backBtn = document.createElement('a'); + backBtn.classList.add('button', 'error-button-back'); + backBtn.href = pathname; + backBtn.textContent = 'Go back'; + backBtn.title = 'Go back'; + backBtn.setAttribute('data-translate', 'true'); + const btnContainer = document.querySelector('.button-container'); + btnContainer.append(backBtn); + } + } +} + +/** + * Decorate + */ +function decorate() { + prepareGoBack(); + loadPlaceholders() + .then(translateContent); +} + +decorate(); diff --git a/scripts/scripts.js b/scripts/scripts.js index df1bad57..199fff4c 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -102,7 +102,15 @@ function buildSidebarAndHero(main) { // get both the first picture and the first headline const picture = main.querySelector('picture'); - const headline = main.querySelector('h1'); + let headline = main.querySelector('h1'); + + /* workaround for not existing h1 */ + if (!headline && picture) { + const img = picture.querySelector('img'); + if (img?.width > img?.height) { + headline = main.querySelector('h2'); + } + } /* * check if both an image and a headline are present, @@ -322,13 +330,15 @@ function updateMetaTitle(doc) { .replace(/\b\w/g, (char) => char.toUpperCase()); // check if title ends with page name - const tenantName = getMetadata('tenant-name'); + const tenantName = getMetadata('tenant_name'); if (!metaTitle.endsWith(tenantName)) { metaTitle = `${metaTitle} | ${tenantName}`; } // update title - doc.title = metaTitle; + if (doc.title !== metaTitle) { + doc.title = metaTitle; + } // update meta title let metaTitleTag = doc.querySelector('meta[property="og:title"]'); diff --git a/styles/styles.css b/styles/styles.css index b8ead24b..6fa051c0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -230,9 +230,7 @@ button { } a.button:hover, -a.button:focus, -button:hover, -button:focus { +button:hover { cursor: pointer; background-color: var(--button-background-hover); color: var(--button-color-hover); @@ -372,6 +370,7 @@ main .hero { grid-column: 2; grid-row: 1 / span 10000; border-left: 1px dashed var(--color-gray-light); + padding-top: var(--spacing-simple); } /* section over both cells */ @@ -415,13 +414,9 @@ header .nav-logo picture + br + a { main .section-breadcrumbs { padding-top: var(--spacing-half); padding-bottom: var(--spacing-half); -} - -.breadcrumbs { - height: var(--body-line-height-s); - @media (width >= 900px) { - position: absolute; + .breadcrumbs { + height: var(--body-line-height-s); } } @@ -548,19 +543,29 @@ a.has-chevron { } /* sections with inline images */ - .section.images-inline-right .default-content-wrapper, - .section.images-inline-left .default-content-wrapper { - clear: both; + .section.images-inline-left, + .section.images-inline-right { + .default-content-wrapper { + overflow: hidden; + } } - .section.images-inline-right .default-content-wrapper p:first-child { - float: right; - margin: 0 0 0 var(--spacing-half); + .section.images-inline-left { + .default-content-wrapper { + p:first-child { + float: left; + margin: 0 var(--spacing-half) 0 0; + } + } } - .section.images-inline-left .default-content-wrapper p:first-child { - float: left; - margin: 0 var(--spacing-half) 0 0; + .section.images-inline-right { + .default-content-wrapper { + p:first-child { + float: right; + margin: 0 0 0 var(--spacing-half); + } + } } .section.location {