diff --git a/gfi-ihk-2024/stories/components/artwork/artwork.scss b/gfi-ihk-2024/stories/components/artwork/artwork.scss index c2dab3b..55da62f 100644 --- a/gfi-ihk-2024/stories/components/artwork/artwork.scss +++ b/gfi-ihk-2024/stories/components/artwork/artwork.scss @@ -92,13 +92,20 @@ section .artwork-wrapper { left: 0; top: 0; height: 100%; - width: calc(43vw - 160px); - - @media(max-width: 1199px) { + width: calc(50vw - (var(--container-width) / 2)); + + .artwork{ + width: calc(50vw - (var(--container-width) / 2)); + .foreground, .background { + height: 437px; + transform-origin: center center; + transform: rotate(0) !important; + } + } + /* @media(max-width: 1199px) { width: 50vw; margin: 1% -18%; max-height: 90vw; - } + }*/ @media(max-width: 767px) { margin: 3% -24%; @@ -112,12 +119,13 @@ section .artwork-wrapper { .foreground, .background { position: absolute; - left: -324px; + left: 0; right: 0; top: 0; - transform-origin: left top; - height: 100%; - transform: rotate(-3.762deg); + transform-origin: center center; + height: 437px; + //transform: rotate(-3.762deg); + transform: rotate(0); overflow: hidden; &:before { @@ -131,7 +139,8 @@ section .artwork-wrapper { } .background { - transform: rotate(-11.38deg); + //transform: rotate(-11.38deg); + transform: rotate(0); left: -482px; margin-right: -60px; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index d33bd69..b794c1a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -1,14 +1,15 @@ import './marketingheader.scss'; import '../../components/artwork/artwork.scss'; +import '../slider/slider.scss'; import $ from 'jquery'; import {createElement, createImage} from "../../_global/scripts/helpers"; -import {searchData, teaserData, sliderData} from "./MarketingHeaderData"; import {createArtwork} from "../../components/artwork/ArtworkComponent"; import {createSearchInput} from "../../atoms/search-input/SearchInputComponent"; import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent"; import IHKSearchTypeahead from "./marketingheader-typeahead"; import {createButton} from "../../atoms/button/ButtonComponent"; import IHKMHSlider from "./marketingheaderslider"; +import {searchData, teaserData, sliderData} from "./MarketingHeaderData"; export const createMarketingHeader = @@ -36,6 +37,7 @@ export const createMarketingHeader = backgroundImage = null, isFirstElement = false, slides = sliderData, + teasers = teaserData, }) => { const section = createElement('section', ['marketingheader'], null); const search = createElement('div', ['search'], null, section); @@ -69,8 +71,8 @@ export const createMarketingHeader = } /* SLIDER */ - const section2 = createElement('section', ['marketingheader'], null); - const container2 = createElement('div', ['container', 'small'], null, section2); + + const container2 = createElement('div', ['container', 'slidercontainer', 'rotation'], null, section); const sliderComponent = createElement('div', ['slider'], null, container2); slides.map((slideData, index) => { const slide = createElement('div', ['slide'], null, sliderComponent); @@ -120,6 +122,8 @@ export const createMarketingHeader = } } }) + new IHKMHSlider($(sliderComponent)); + /* const hasImage = imageSrc && imageSrc.length > 0; const stage = createElement('div', ['participation', 'participation-stage'], null, section); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index af0404c..58d8bc2 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -32,7 +32,6 @@ export const teaserData = [ desc: 'Neugierig auf Musterstadt 2024? Digitalisierung verändert unsere Stadt. Klicken Sie, um zu erfahren, wie Sie Teil dieser Entwicklung werden können!', link: '#', icon: 'Person', - bgimage: null, }, { category: 'IHK Mitgliedschaft', @@ -40,7 +39,6 @@ export const teaserData = [ desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', icon: 'Person', - bgimage: null, }, { category: 'IHK Mitgliedschaft', @@ -48,7 +46,6 @@ export const teaserData = [ desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', icon: 'Person', - bgimage: null, } ] diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 545b5ab..38168b4 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -1,290 +1,293 @@ @import '../../_global/styles/mixins'; @import '../../_global/styles/vars'; - -section.marketingheader .search { - position: relative; - padding: calc(0.4vw + 20px) 0 calc(1vw + 40px); - min-height: calc(24vw + 220px); - margin: 0; - - @media(max-width: 767px) { - padding: calc(1.5vw + 15px) 0 0; - margin-bottom: -10px; - } - - + section, + #toclist > section:first-child { - @media(min-width: 768px) { - margin-top: 0; - } - } - - .container { +section.marketingheader{ + margin-top:0; + .search { position: relative; - z-index: 1; - } - - .row { - min-height: 620px; - - @media(max-width: 567px) { - min-height: 0; + //padding: calc(0.4vw + 20px) 0 calc(1vw + 40px); + //min-height: calc(24vw + 220px); + overflow: hidden; + margin: 0; + background-color: var(--theme-color-primary-dimmed-04); + @media(max-width: 767px) { + padding: calc(1.5vw + 15px) 0 0; + margin-bottom: -10px; } - } - .artwork { - @media(max-width: 420px) { - top: 30px; - right: -20px; - } - @media(max-width: 340px) { - top: 40px; - right: -30px; + + section, + #toclist > section:first-child { + @media(min-width: 768px) { + margin-top: 0; + } } - } - - form { - position: relative; - margin: 32px 0 16px; - box-shadow: 0 3px 20px -5px rgba(#000, 0.3); - border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md); - @media(max-width: 567px) { - margin-top: 20px; + .container { + position: relative; + z-index: 1; } - } - h1 { - margin-left: 0; - margin-top: 0; + .row { + - @media(max-width: 567px) { - font-size: 24px; - margin: 0; + @media(max-width: 567px) { + min-height: 0; + } } - } - - .tiles { - margin: 0 -8px; - display: flex; - flex-wrap: wrap; - font-family: "Korb", sans-serif; - @media(max-width: 567px) { - margin: 0 -6px; + .artwork { + @media(max-width: 420px) { + top: 30px; + right: -20px; + } + @media(max-width: 340px) { + top: 40px; + right: -30px; + } } - .tile { + form { position: relative; - display: flex; - padding: 8px; - flex: 1 1 33.3333%; - max-width: 33.3333%; - - &::before { - position: absolute; - top: 8px; - right: 8px; - margin: 10px 8px; - font-family: Icons, sans-serif; - font-size: 18px; - line-height: 1; - text-align: center; - pointer-events: none; - z-index: 1; - } + margin: 0 0 16px; + box-shadow: 0 3px 20px -5px rgba(#000, 0.3); + border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md); - &[data-type="download"]::before { - @include icon-small-download; - } - &[data-type="external"]::before { - @include icon-small-link-external; + @media(max-width: 567px) { + margin-top: 20px; } + } + + h1 { + margin-left: 0; + margin-top: 0; @media(max-width: 567px) { - flex: 1 1 50%; - max-width: 50%; - padding: 6px; + font-size: 24px; + margin: 0; } + } - &:nth-child(3) ~ .tile { - z-index: 1; + .tiles { + margin: 0 -8px; + display: flex; + flex-wrap: wrap; + font-family: "Korb", sans-serif; + + @media(max-width: 567px) { + margin: 0 -6px; } - &.downloads, &.a-z, &.events { - order: 1; - background-color: transparent; + .tile { + position: relative; + display: flex; + padding: 8px; + flex: 1 1 33.3333%; + max-width: 33.3333%; &::before { - font-family: "Icons", sans-serif; position: absolute; - font-size: 24px; + top: 8px; + right: 8px; + margin: 10px 8px; + font-family: Icons, sans-serif; + font-size: 18px; line-height: 1; - right: 0; - top: 0; - margin: 11px 10px; + text-align: center; + pointer-events: none; z-index: 1; - background-color: white; - padding: 7px 6px 5px; - border-top-right-radius: 8px; - border-bottom-left-radius: 8px; + } - @media(max-width: 767px) { - margin: 18px; - font-size: 24px; - } + &[data-type="download"]::before { + @include icon-small-download; + } + &[data-type="external"]::before { + @include icon-small-link-external; } - .outer { - background-color: var(--theme-color-primary-dimmed-04); + @media(max-width: 567px) { + flex: 1 1 50%; + max-width: 50%; + padding: 6px; } - p { - margin-bottom: 0.4em; + &:nth-child(3) ~ .tile { + z-index: 1; } - } - &.downloads::before { - @include icon-suche-datei; - } - &.a-z::before { - @include icon-suche-az; - } - &.events::before { - @include icon-suche-veranstaltung; - } - } + &.downloads, &.a-z, &.events { + order: 1; + background-color: transparent; - .tile > a, .outer { - position: relative; - display: flex; - align-items: flex-end; - width: 100%; - min-height: 108px; - padding: 18px 24px 24px; - border-radius: var(--border-radius-md); - box-shadow: 0 4px 20px -5px rgba(#000, 0.25); - transition: 0.25s ease; - line-height: 1.2; - background-color: var(--theme-color-background); - overflow: hidden; - @include focus-visible(); - - @media(max-width: 767px) { - font-size: 16px; - padding: 10px 10px 15px; - min-height: 84px; - } + &::before { + font-family: "Icons", sans-serif; + position: absolute; + font-size: 24px; + line-height: 1; + right: 0; + top: 0; + margin: 11px 10px; + z-index: 1; + background-color: white; + padding: 7px 6px 5px; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + + @media(max-width: 767px) { + margin: 18px; + font-size: 24px; + } + } - &:before { - content: ""; - position: absolute; - display: block; - bottom: 0; - left: 0; - right: 0; - height: var(--border-width); - background-color: var(--theme-color-secondary); - transition: 0.25s $easeOutQuad; - } + .outer { + background-color: var(--theme-color-primary-dimmed-04); + } - &:hover { - color: var(--theme-color-secondary-intensed); + p { + margin-bottom: 0.4em; + } + } - &:before { - height: var(--border-width-hover); + &.downloads::before { + @include icon-suche-datei; + } + &.a-z::before { + @include icon-suche-az; + } + &.events::before { + @include icon-suche-veranstaltung; } } - } - .tile > a { - .item-title { - text-decoration: underline; - } - } + .tile > a, .outer { + position: relative; + display: flex; + align-items: flex-end; + width: 100%; + min-height: 108px; + padding: 18px 24px 24px; + border-radius: var(--border-radius-md); + box-shadow: 0 4px 20px -5px rgba(#000, 0.25); + transition: 0.25s ease; + line-height: 1.2; + background-color: var(--theme-color-background); + overflow: hidden; + @include focus-visible(); - .outer { - background-color: var(--theme-primary-light-04); - padding: 14px 20px 18px; - border: 4px solid white; + @media(max-width: 767px) { + font-size: 16px; + padding: 10px 10px 15px; + min-height: 84px; + } - &::after, &::before { - display: none; - } - } + &:before { + content: ""; + position: absolute; + display: block; + bottom: 0; + left: 0; + right: 0; + height: var(--border-width); + background-color: var(--theme-color-secondary); + transition: 0.25s $easeOutQuad; + } - .inner { - display: block; - max-width: 100%; - } + &:hover { + color: var(--theme-color-secondary-intensed); - .kicker { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; - display: block; - text-decoration: none; - } + &:before { + height: var(--border-width-hover); + } + } + } - ul { - list-style: none; - padding: 0; - font-size: 16px; - max-width: 100%; - margin: 0; + .tile > a { + .item-title { + text-decoration: underline; + } + } - li { - margin-top: 5px; + .outer { + background-color: var(--theme-primary-light-04); + padding: 14px 20px 18px; + border: 4px solid white; + + &::after, &::before { + display: none; + } } - a { + .inner { display: block; + max-width: 100%; + } + + .kicker { white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - transition: 0.2s ease; - font-weight: 500; + overflow: hidden; + max-width: 100%; + display: block; + text-decoration: none; + } - &:hover { - color: var(--color-secondary-dark); + ul { + list-style: none; + padding: 0; + font-size: 16px; + max-width: 100%; + margin: 0; + + li { + margin-top: 5px; } - } - } - .proposals { - flex: 1 1 100%; - padding: 10px 12px 0; - order: 2; + a { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: 0.2s ease; + font-weight: 500; - a { - margin: 0 0.3em 0 0.1em; + &:hover { + color: var(--color-secondary-dark); + } + } } - p { - margin-bottom: 0; + .proposals { + flex: 1 1 100%; + padding: 10px 12px 0; + order: 2; + + a { + margin: 0 0.3em 0 0.1em; + } + + p { + margin-bottom: 0; + } } - } - .all-button-wrapper { - padding: 16px 8px; - display: block; - flex: 1 1 100%; - order: 3; + .all-button-wrapper { + padding: 16px 8px; + display: block; + flex: 1 1 100%; + order: 3; - .btn { - transition: 0.2s ease; + .btn { + transition: 0.2s ease; - .count { - margin-left: 0.3em; + .count { + margin-left: 0.3em; - &::before { - content: '('; - } - &::after { - content: ')'; + &::before { + content: '('; + } + &::after { + content: ')'; + } } } } } } -} +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js index 62981a6..1ff8a98 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js @@ -6,7 +6,7 @@ class IHKMHSlider { constructor(section) { this.section = section.addClass('initiated'); this.slides = section.children(); - this.slider = new Slider(section.find('.eventteaserlargeslider')); + this.slider = new Slider(section); this.stringLength = 0; this.slider.section.on('in-viewport slide-change', () => { @@ -21,7 +21,7 @@ class IHKMHSlider { export default IHKMHSlider; $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { - $('.rotationslider:not(.initiated)').each(function() { + $('.slider:not(.initiated)').each(function() { new IHKMHSlider($(this)); }); });