diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js index b547d04..d000922 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js @@ -31,7 +31,6 @@ export const createEventOverviewStage = ({ const tilesrow = createElement('div', ['row'], null, tilescontainer); const tilescol = createElement('div', ['col'], null, tilesrow); if (backgroundImage && backgroundImage.length > 0) { - //section.content('style=background: red;'); sectiondiv.style = 'background-image: url(' + backgroundImage + ');'; sectiondiv.classList.add('background-image'); } 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 27a7bc1..c3f062a 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss @@ -4,6 +4,85 @@ margin: 0; .tilescontainer{ margin-top: calc(-138px / 2); + .tiles { + background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, rgba(1.01, 40.28, 80.75, 0.86) 54%, rgba(0, 51, 102, 0) 100%); + &.row { + margin: -10px; + @media(min-width: 1481px) { + flex-wrap: nowrap; + } + } + + + .icon-box { + font-size: 40px !important; + margin-top:0 !important; + } + .title { + font-weight: 400; + font-size: 20px; + line-height:21px; + margin: 8px 0 5px 0 !important; + } + + .col { + position: relative; + display: flex; + flex: 1 1 100%; + max-width: 100%; + padding: 10px; + @media(max-width: 1480px) { + flex: 1 1 33.3333333333%; + max-width: 33.3333333333%; + } + @media(max-width: 767px) { + padding: 6px; + flex: 1 1 50%; + max-width: 50%; + } + @media (max-width: 767px) { + &:nth-child(2n+1):last-child { + flex: 1 1 100%; + max-width: 100%; + } + } + &.width-half{ + @media(max-width: 1480px) { + flex: 1 1 50%; + max-width: 50%; + } + + .width-half{ + @media(max-width: 767px) { + flex: 1 1 100%; + max-width: 100%; + } + } + + } + &.width-third{ + flex: 1 1 25%; + max-width: 25%; + @media(max-width: 1480px) { + flex: 1 1 50%; + max-width: 50%; + } + } + .topic-teaser{ + --topic-tile-padding: 10px; + border-radius: 0.75rem; + //box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14); + box-shadow: var(--theme-24dp); + min-height:138px; + } + } + + &[data-type='list'] .col { + @media(max-width: 567px) { + max-width: 100%; + flex: 1 1 100%; + } + } + } > .row > .col{ padding-top:0; margin-top:0; @@ -179,82 +258,3 @@ } } -.tiles { -background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, rgba(1.01, 40.28, 80.75, 0.86) 54%, rgba(0, 51, 102, 0) 100%); - &.row { - margin: -10px; - @media(min-width: 1481px) { - flex-wrap: nowrap; - } - } - - - .icon-box { - font-size: 40px !important; - margin-top:0 !important; - } - .title { - font-weight: 400; - font-size: 20px; - line-height:21px; - margin: 8px 0 5px 0 !important; - } - - .col { - position: relative; - display: flex; - flex: 1 1 100%; - max-width: 100%; - padding: 10px; - @media(max-width: 1480px) { - flex: 1 1 33.3333333333%; - max-width: 33.3333333333%; - } - @media(max-width: 767px) { - padding: 6px; - flex: 1 1 50%; - max-width: 50%; - } - @media (max-width: 767px) { - &:nth-child(2n+1):last-child { - flex: 1 1 100%; - max-width: 100%; - } - } - &.width-half{ - @media(max-width: 1480px) { - flex: 1 1 50%; - max-width: 50%; - } - + .width-half{ - @media(max-width: 767px) { - flex: 1 1 100%; - max-width: 100%; - } - } - - } - &.width-third{ - flex: 1 1 25%; - max-width: 25%; - @media(max-width: 1480px) { - flex: 1 1 50%; - max-width: 50%; - } - } - .topic-teaser{ - --topic-tile-padding: 10px; - border-radius: 0.75rem; - //box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14); - box-shadow: var(--theme-24dp); - min-height:138px; - } - } - - &[data-type='list'] .col { - @media(max-width: 567px) { - max-width: 100%; - flex: 1 1 100%; - } - } -} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js index 167fd2d..a1d8abb 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js @@ -30,7 +30,7 @@ class IHKEventOverviewTiles { export default IHKEventOverviewTiles; $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { - $('.topics:not(.initiated)').each(() => { + $('.eventoverview-section:not(.initiated)').each(() => { new IHKEventOverviewTiles($(this)); }); }) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 0d5bb20..6c490aa 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -28,6 +28,9 @@ section.marketingheader{ overflow: hidden; margin: 0; background-color: var(--theme-color-primary-dimmed-04); + transition:all 5s ease-in-out; + max-height:100px; + //height:100%; .sc.container{ position: absolute; top: 0; @@ -81,15 +84,21 @@ section.marketingheader{ } &.open{ + //height:100%; + //animation: slowopen 2s forwards; + //transition:all 5s ease-in-out; + max-height: 2000px; .close-search{ display:block !important; } .tiles{ //display:flex !important; - height:auto; - opacity: 1; - transition:none; - transition:height 0.25s ease; + //height:auto; + //opacity: 1; + //transition:none; + //transition:all 2s ease; + margin-top:0; + padding-bottom:9px; } form{ max-width: 580px; @@ -105,7 +114,7 @@ section.marketingheader{ transition: 0.25s ease; @media(max-width: 767px) { font-size: 18px; - margin-top: 8px auto !important; + margin: 8px auto !important; } } + section, + #toclist > section:first-child { @@ -206,11 +215,12 @@ section.marketingheader{ display: flex; flex-wrap: wrap; font-family: "Korb", sans-serif; - height:0; - opacity: 0; - transition: all 1s ease-in; - padding-bottom:9px; - transition:height 0.25s ease; + //height:0; + //opacity: 0; + transition: all 5s ease-in; + padding-bottom:0px; + //transition:all 2s ease; + margin-top:100px; @media(max-width: 567px) { margin: 0 -6px; } @@ -702,4 +712,4 @@ section.marketingheader{ display:none !important; } } -} \ No newline at end of file +}