diff --git a/gfi-ihk-2024/public/dummy/hero-veranstaltung-gfx.jpg b/gfi-ihk-2024/public/dummy/hero-veranstaltung-gfx.jpg new file mode 100644 index 0000000..afcc4a6 Binary files /dev/null and b/gfi-ihk-2024/public/dummy/hero-veranstaltung-gfx.jpg differ diff --git a/gfi-ihk-2024/public/dummy/hero-veranstaltung-photo.jpg b/gfi-ihk-2024/public/dummy/hero-veranstaltung-photo.jpg new file mode 100644 index 0000000..ab8ab48 Binary files /dev/null and b/gfi-ihk-2024/public/dummy/hero-veranstaltung-photo.jpg differ diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js index 2b7783b..aca196f 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js +++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js @@ -16,6 +16,7 @@ export const createEventTeaserLarge = ({ a.classList.add('widemode'); } const blueBox = createElement('div', ['blue-box'], null, a); + const imgCon = createElement('div', ['img-con'], null, blueBox); const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a); createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox); createElement('p', ['ev-title'], event.title, blueBox); @@ -40,7 +41,7 @@ export const createEventTeaserLarge = ({ })) } if (event.bgimage && event.bgimage .length > 0) { - blueBox.style = 'background-image: url(' + event.bgimage + ');'; + imgCon.style = 'background-image: url(' + event.bgimage + ');'; blueBox.classList.add('background-image'); } diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index ce21796..9a09ecc 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss @@ -38,8 +38,6 @@ display: flex; //flex-direction: column; justify-content: flex-end; - background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9; - color: var(--theme-color-white); margin-right: 18px; font-family: "Korb", sans-serif; @@ -55,6 +53,31 @@ width:100%; margin-right: 0; min-height:250px; + position: relative; + &:not(.background-image){ + background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9; + } + .img-con{ + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + background-color:rgba(#003366,0.54); + z-index:0; + } + &.background-image{ + .img-con:before{ + content:""; + background: linear-gradient(0deg, rgba(0, 51, 102, 0.33) 0%, rgba(0, 51, 102, 0.33) 100%), linear-gradient(180deg, rgba(0, 32, 65, 0) 0%, rgba(0, 32.45, 64.90, 0.60) 100%); + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + z-index:1; + } + } .icon-box { font-family: 'Pictograms', sans-serif; font-size: 48px; @@ -69,6 +92,7 @@ text-decoration: underline; line-height: normal; font-size: 28px; + position:relative; } .ev-cat{ color: #003366; @@ -82,6 +106,7 @@ border-radius:8px; display:inline-block; padding:5px 7px; + position:relative; } span { white-space: nowrap; diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js index 507375b..0ac58a6 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js @@ -33,6 +33,7 @@ export const createETLSlider = a.classList.add('widemode'); } const blueBox = createElement('div', ['blue-box'], null, a); + const imgCon = createElement('div', ['img-con'], null, blueBox); const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a); createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox); createElement('p', ['ev-title'], slideData.title, blueBox); @@ -57,7 +58,7 @@ export const createETLSlider = })) } if (slideData.bgimage && slideData.bgimage .length > 0) { - blueBox.style = 'background-image: url(' + slideData.bgimage + ');'; + imgCon.style = 'background-image: url(' + slideData.bgimage + ');'; blueBox.classList.add('background-image'); } diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js index 033d2f9..7513526 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js @@ -57,7 +57,7 @@ export const sliderData = [ }, icon: 'Roboter', category: 'Aus- und Weiterbildung', - bgimage: null, + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', } ] diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss index be2c666..11a6b74 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss @@ -147,7 +147,7 @@ &.active button:before { background-color: var(--theme-color-primary); - box-shadow: 0 0 0 2px var(--theme-color-primary); + //box-shadow: 0 0 0 2px var(--theme-color-primary); } } @@ -163,10 +163,11 @@ content: ""; position: relative; display: block; - width: 10px; - height: 10px; - border: 2px solid var(--theme-color-primary); - border-radius: 5px; + width: 15px; + height: 15px; + //border: 2px solid var(--theme-color-primary); + background-color: var(--theme-color-primary-dimmed-04); + border-radius: 15px; transition: 0.2s ease; } @@ -196,6 +197,8 @@ right:auto; border-radius: 24px; background: var(--theme-color-primary-dimmed-04); + --button-hover-shadow-opacity: 0.4; + --button-hover-shadow-size: 6px ; @media(max-width: 1470px) { left:auto; right: var(--container-padding); @@ -216,6 +219,24 @@ font-size: 30px; content: "\e825"; } + &:after{ + content: ""; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--border-radius-lg); + box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-04); + opacity: 0; + transition: 0.3s ease; + } + &:hover:after{ + opacity: 0.4; + box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04); + } + } .prev { @@ -223,10 +244,10 @@ transform: rotate(180deg); @media(max-width: 1470px) { left:auto; - right:calc(var(--container-padding) + 80px); + right:calc(var(--container-padding) + 70px); } @media(max-width: 999px) { - right:80px; + right:70px; } } .count{ diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss index f8c6c3c..baee4a0 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss @@ -11,7 +11,9 @@ @media(max-width: 767px) { margin-top: 24px; } - + .text-box{ + background-color: white !important; + } h2, .like-h2 { margin-top: var(--section-headline-margin); margin-bottom:10px; diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js index 1108402..7a203c6 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js @@ -54,5 +54,5 @@ GenericEventOverviewStage.args = { export const EventOverviewStageWithImage = Template.bind({}); EventOverviewStageWithImage.args = { - backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + backgroundImage: './dummy/hero-veranstaltung-photo.jpg', } diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index aefc55f..bd80212 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss @@ -11,7 +11,7 @@ } } .eventoverview-stage { - background-image: url('./beteiligung-cover.jpg'); + background-image: url('./hero-veranstaltung-gfx.jpg'); background-size: cover; color: white; min-height: calc(18vw + 400px); diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-gfx.jpg b/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-gfx.jpg new file mode 100644 index 0000000..afcc4a6 Binary files /dev/null and b/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-gfx.jpg differ diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-photo.jpg b/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-photo.jpg new file mode 100644 index 0000000..ab8ab48 Binary files /dev/null and b/gfi-ihk-2024/stories/sections/eventoverview-stage/hero-veranstaltung-photo.jpg differ