diff --git a/gfi-ihk-2024/stories/_global/styles/main.scss b/gfi-ihk-2024/stories/_global/styles/main.scss index 6728255..749157d 100644 --- a/gfi-ihk-2024/stories/_global/styles/main.scss +++ b/gfi-ihk-2024/stories/_global/styles/main.scss @@ -17,7 +17,7 @@ --theme-color-secondary-dimmed: #E4F1E4; --theme-color-gradient-01: var(--theme-color-primary); - --theme-color-gradient-02: #3C8F85; + --theme-color-gradient-02: #4BA490; --theme-color-gradient-03: #AFCC7A; --theme-color-link: var(--theme-color-primary); diff --git a/gfi-ihk-2024/stories/components/document-list/document-list.scss b/gfi-ihk-2024/stories/components/document-list/document-list.scss index 5f3d0c8..d065759 100644 --- a/gfi-ihk-2024/stories/components/document-list/document-list.scss +++ b/gfi-ihk-2024/stories/components/document-list/document-list.scss @@ -64,7 +64,7 @@ } &.chart:before { - background: linear-gradient(130deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 90%, var(--theme-color-gradient-03) 160%); + background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%); } img { diff --git a/gfi-ihk-2024/stories/components/nav/nav.scss b/gfi-ihk-2024/stories/components/nav/nav.scss index a49f648..15f291c 100644 --- a/gfi-ihk-2024/stories/components/nav/nav.scss +++ b/gfi-ihk-2024/stories/components/nav/nav.scss @@ -277,6 +277,12 @@ top: 50%; margin-top: calc(var(--icon-size) / -2); text-align: center; + @media(max-width: 999px) { + top: calc(50% - 3px); + } + @media(max-width: 767px) { + top: calc(50% - 6px); + } } @media(max-width: 359px), (max-width: 767px) and (orientation: landscape) { diff --git a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js index 69c8aa3..cb32382 100644 --- a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js +++ b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js @@ -17,13 +17,7 @@ export const createTeaser = ({ pictoText = false, linkType = null, }) => { - const teaser = createElement('a', ['teaser', type]); - teaser.href = link; - - if (linkType) { - teaser.classList.add(linkType); - } - + const teaser = createElement('div', ['teaser', type]); if (kicker && kicker.length > 0) { createElement('span', ['kicker'], kicker, teaser); } @@ -88,5 +82,13 @@ export const createTeaser = ({ teaser.dataset.imageSize = imageSize; } + const teaserLink = createElement('a', ['teaser--link', type], '', teaser); + teaserLink.href = link; + teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text'); + + if (linkType) { + teaserLink.classList.add(linkType); + } + return teaser; }; diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss index 979d10a..794b576 100644 --- a/gfi-ihk-2024/stories/components/teaser/teaser.scss +++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss @@ -32,6 +32,15 @@ margin-bottom: 0; } + .teaser--link { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + } + .image-box { position: relative; display: block; @@ -68,7 +77,7 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(130deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 90%, var(--theme-color-gradient-03) 160%); + background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%); } } diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss index 45d1128..4d852f5 100644 --- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss +++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss @@ -441,7 +441,7 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(130deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 90%, var(--theme-color-gradient-03) 160%); + background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%); } &:before {