diff --git a/blocks/teaser-bar/teaser-bar.css b/blocks/teaser-bar/teaser-bar.css index 52b7b12a..00fdab9a 100644 --- a/blocks/teaser-bar/teaser-bar.css +++ b/blocks/teaser-bar/teaser-bar.css @@ -64,3 +64,8 @@ background-size: 0.8em 0.8em; padding-left: 1em; } + +.design-2023 .teaser-bar > div p.link a { + background: url("/resources/img/design-2023/link_icon.png") 0 0.15em no-repeat transparent; + background-size: 0.8em 0.8em; +} diff --git a/resources/img/adaptto-favicon.ico b/resources/img/adaptto-favicon.ico index 03565c57..d690b546 100644 Binary files a/resources/img/adaptto-favicon.ico and b/resources/img/adaptto-favicon.ico differ diff --git a/resources/img/adaptto-favicon.svg b/resources/img/adaptto-favicon.svg index 408b4438..61b65ad7 100644 --- a/resources/img/adaptto-favicon.svg +++ b/resources/img/adaptto-favicon.svg @@ -1,65 +1,29 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/img/apple-touch-icon-114x114.png b/resources/img/apple-touch-icon-114x114.png index c638f903..cc83a936 100644 Binary files a/resources/img/apple-touch-icon-114x114.png and b/resources/img/apple-touch-icon-114x114.png differ diff --git a/resources/img/apple-touch-icon-57-57.png b/resources/img/apple-touch-icon-57-57.png index 105a1cf5..1fc60807 100644 Binary files a/resources/img/apple-touch-icon-57-57.png and b/resources/img/apple-touch-icon-57-57.png differ diff --git a/resources/img/apple-touch-icon-72x72.png b/resources/img/apple-touch-icon-72x72.png index b6e6d6bb..31262c5c 100644 Binary files a/resources/img/apple-touch-icon-72x72.png and b/resources/img/apple-touch-icon-72x72.png differ diff --git a/resources/img/design-2023/adaptto-favicon.ico b/resources/img/design-2023/adaptto-favicon.ico new file mode 100644 index 00000000..03565c57 Binary files /dev/null and b/resources/img/design-2023/adaptto-favicon.ico differ diff --git a/resources/img/design-2023/adaptto-favicon.svg b/resources/img/design-2023/adaptto-favicon.svg new file mode 100644 index 00000000..408b4438 --- /dev/null +++ b/resources/img/design-2023/adaptto-favicon.svg @@ -0,0 +1,65 @@ + + + + + + + \ No newline at end of file diff --git a/resources/img/design-2023/apple-touch-icon-114x114.png b/resources/img/design-2023/apple-touch-icon-114x114.png new file mode 100644 index 00000000..c638f903 Binary files /dev/null and b/resources/img/design-2023/apple-touch-icon-114x114.png differ diff --git a/resources/img/design-2023/apple-touch-icon-57-57.png b/resources/img/design-2023/apple-touch-icon-57-57.png new file mode 100644 index 00000000..105a1cf5 Binary files /dev/null and b/resources/img/design-2023/apple-touch-icon-57-57.png differ diff --git a/resources/img/design-2023/apple-touch-icon-72x72.png b/resources/img/design-2023/apple-touch-icon-72x72.png new file mode 100644 index 00000000..b6e6d6bb Binary files /dev/null and b/resources/img/design-2023/apple-touch-icon-72x72.png differ diff --git a/resources/img/design-2023/link_icon.png b/resources/img/design-2023/link_icon.png new file mode 100644 index 00000000..d546f5be Binary files /dev/null and b/resources/img/design-2023/link_icon.png differ diff --git a/resources/img/design-2023/logo.svg b/resources/img/design-2023/logo.svg new file mode 100644 index 00000000..1b23a530 --- /dev/null +++ b/resources/img/design-2023/logo.svg @@ -0,0 +1,73 @@ + + + + + + + + + diff --git a/resources/img/link_icon.png b/resources/img/link_icon.png index d546f5be..e218139b 100644 Binary files a/resources/img/link_icon.png and b/resources/img/link_icon.png differ diff --git a/resources/img/logo.svg b/resources/img/logo.svg index 1b23a530..014416db 100644 --- a/resources/img/logo.svg +++ b/resources/img/logo.svg @@ -1,73 +1,29 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/scripts.js b/scripts/scripts.js index 6ee9d87e..0c58f79c 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -15,6 +15,7 @@ import { import { decorateAnchors } from './services/LinkHandler.js'; import { append } from './utils/dom.js'; import { isFullscreen } from './utils/fullscreen.js'; +import { getYearFromPath } from './utils/path.js'; import { getSiteRootPath, isSpeakerDetailPath } from './utils/site.js'; import { decorateConsentManagement } from './utils/usercentrics.js'; @@ -211,6 +212,11 @@ function decorateTemplateAndThemeWithAutoDetection() { */ async function loadEager(doc) { document.documentElement.lang = 'en'; + if (getYearFromPath(window.location.pathname) < 2024) { + // switch to old design from 2023 + document.body.classList.add('design-2023'); + loadCSS(`${window.hlx.codeBasePath}/styles/styles-design-2023.css`); + } if (isFullscreen()) { // remove header and footer in fullscreen mode doc.querySelector('header')?.remove(); diff --git a/styles/styles-design-2023.css b/styles/styles-design-2023.css new file mode 100644 index 00000000..1b5d5057 --- /dev/null +++ b/styles/styles-design-2023.css @@ -0,0 +1,82 @@ +:root { + /* colors */ + --color-light: #fafafa; + --color-dark: #333; + --color-medium-dark-gray: #999; + --color-medium-gray: #666; + --color-light-gray: #ccc; + --color-font: #333; + --color-highlight-1: #00a0ee; + --color-highlight-2: #66cef5; + --color-cta: #00a0ee; + + /* fonts */ + --font-bold: "SignikaBold", "ArialBoldFallback", "ArialFallback", arial, sans-serif; + --font-semi: "SignikaSemibold", "ArialBoldFallback", "ArialFallback", arial, sans-serif; + --font-light: "SignikaLight", "ArialFallback", arial, sans-serif; + --font-regular: "SignikaRegular", "ArialFallback", arial, sans-serif; +} + +@font-face { + font-family: ArialBoldFallback; + src: local(arial bold); + size-adjust: 94%; + ascent-override: 92%; + descent-override: 26%; + line-gap-override: 10.25%; +} + +@font-face { + font-family: ArialFallback; + src: local(arial); + size-adjust: 94%; + ascent-override: 92%; + descent-override: 26%; + line-gap-override: 10.25%; +} + +@font-face { + font-family: SignikaLight; + src: url("/resources/font/Signika-Light-webfont.woff"); + font-weight: normal; + font-style: normal; + font-display: optional; +} + +@font-face { + font-family: SignikaRegular; + src: url("/resources/font/Signika-Regular-webfont.woff"); + font-weight: normal; + font-style: normal; + font-display: optional; +} + +@font-face { + font-family: SignikaSemibold; + src: url("/resources/font/Signika-Semibold-webfont.woff"); + font-weight: normal; + font-style: normal; + font-display: optional; +} + +@font-face { + font-family: SignikaBold; + src: url("/resources/font/Signika-Bold-webfont.woff"); + font-weight: normal; + font-style: normal; + font-display: optional; +} + +header .header-container .logo { + background-color: var(--color-dark); + padding: var(--base-unit) var(--base-unit) 2em; + float: right; +} + +header .header-container .logo div { + width: 103px; + height: 100px; + background: url("/resources/img/design-2023/logo.svg") 0 0 no-repeat; + background-size: 103px 100px; + background-repeat: no-repeat; +} diff --git a/styles/styles.css b/styles/styles.css index 5d2ac0d6..1addab50 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -6,20 +6,20 @@ /* colors */ --color-light: #fafafa; - --color-dark: #333; + --color-dark: #081235; --color-medium-dark-gray: #999; --color-medium-gray: #666; --color-light-gray: #ccc; --color-font: #333; - --color-highlight-1: #00a0ee; + --color-highlight-1: #3e52fe; --color-highlight-2: #66cef5; - --color-cta: #00a0ee; + --color-cta: #3e52fe; /* fonts */ - --font-bold: "SignikaBold", "ArialBoldFallback", "ArialFallback", arial, sans-serif; - --font-semi: "SignikaSemibold", "ArialBoldFallback", "ArialFallback", arial, sans-serif; - --font-light: "SignikaLight", "ArialFallback", arial, sans-serif; - --font-regular: "SignikaRegular", "ArialFallback", arial, sans-serif; + --font-bold: arial, sans-serif; + --font-semi: arial, sans-serif; + --font-light: arial, sans-serif; + --font-regular: arial, sans-serif; /* --break-small: 320px; @@ -28,56 +28,6 @@ */ } -@font-face { - font-family: ArialBoldFallback; - src: local(arial bold); - size-adjust: 94%; - ascent-override: 92%; - descent-override: 26%; - line-gap-override: 10.25%; -} - -@font-face { - font-family: ArialFallback; - src: local(arial); - size-adjust: 94%; - ascent-override: 92%; - descent-override: 26%; - line-gap-override: 10.25%; -} - -@font-face { - font-family: SignikaLight; - src: url("/resources/font/Signika-Light-webfont.woff"); - font-weight: normal; - font-style: normal; - font-display: optional; -} - -@font-face { - font-family: SignikaRegular; - src: url("/resources/font/Signika-Regular-webfont.woff"); - font-weight: normal; - font-style: normal; - font-display: optional; -} - -@font-face { - font-family: SignikaSemibold; - src: url("/resources/font/Signika-Semibold-webfont.woff"); - font-weight: normal; - font-style: normal; - font-display: optional; -} - -@font-face { - font-family: SignikaBold; - src: url("/resources/font/Signika-Bold-webfont.woff"); - font-weight: normal; - font-style: normal; - font-display: optional; -} - body { background-color: var(--color-light); color: var(--color-dark); @@ -211,15 +161,15 @@ header .header-container { header .header-container .logo { background-color: var(--color-dark); - padding: var(--base-unit) var(--base-unit) 2em; + padding: 0 0 2em; float: right; } header .header-container .logo div { - width: 103px; - height: 100px; - background: url("/resources/img/logo.svg") 0 0 no-repeat; - background-size: 103px 100px; + width: 123px; + height: 130px; + background: url("/resources/img/logo.svg") 10px 10px no-repeat; + background-size: 108px 108px; background-repeat: no-repeat; }