diff --git a/gfi-ihk-2024/stories/components/election-form/election-form.scss b/gfi-ihk-2024/stories/components/election-form/election-form.scss index a3da3bf..5cc8e86 100644 --- a/gfi-ihk-2024/stories/components/election-form/election-form.scss +++ b/gfi-ihk-2024/stories/components/election-form/election-form.scss @@ -9,6 +9,7 @@ padding: 30px 30px 0 30px; border-radius: var(--border-radius-xs); color: #fff; + margin-top: 40px; margin-bottom: 20px; @media(max-width: 567px) { padding-bottom: 14px; diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js index 1a49c46..f27e168 100644 --- a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js +++ b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js @@ -16,7 +16,7 @@ export const createHowToList = listItems.map((item) => { const li = createElement('li', [], null, ul); const a = createElement('a', [], null, li); - createImage(item.icon, 100, 100, '', [], a); + createElement('div', ['icon-box', item.icon], null, a); createElement('h3', [], item.headline, a); createElement('p', [], item.text, a); createElement('span', [], item.more, a); diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListData.js b/gfi-ihk-2024/stories/components/howto-list/HowToListData.js index 2e17d69..f041d21 100644 --- a/gfi-ihk-2024/stories/components/howto-list/HowToListData.js +++ b/gfi-ihk-2024/stories/components/howto-list/HowToListData.js @@ -4,20 +4,20 @@ export const howToListData = [ text: 'Ihr Unternehmen ist IHK-Mitglied? Dann bekommen Sie automatisch am 12.02.2024 die Wahlunterlagen zugesandt.', more: 'Mehr erfahren', link: '#', - icon: './dummy/howto-list-01.svg', + icon: 'pictogram-bueroklammer', }, { headline: '2. Kandidat:innen', text: 'Informieren Sie sich über die Kandidat:innen und deren Programm um Ihre Entscheidung zu fällen.', more: 'Mehr erfahren', link: '#', - icon: './dummy/howto-list-02.svg', + icon: 'pictogram-fabrik', }, { headline: '3. Stimmabgabe', text: 'Geben Sie Ihre Stimmen auf den Ihnen zugesandten Unterlagen ab und schicken sie diese mit dem Rückumschlag an uns.', more: 'Mehr erfahren', link: '#', - icon: './dummy/howto-list-03.svg', + icon: 'pictogram-diagramm-wachstum', }, ] diff --git a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss index 365a339..826141c 100644 --- a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss +++ b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss @@ -58,12 +58,29 @@ span { text-decoration: underline; } - img { + img, + .icon-box { position: absolute; left: -132px; top: 2px; width: 100px; - height: auto; + height: 100px; + font-family: "Pictograms", sans-serif; + font-size: 70px; + line-height: 1.4285; + text-align: center; + color: var(--theme-color-primary) !important; + &:after { + content: ""; + position: absolute; + z-index: -1; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 50%; + background: var(--theme-color-secondary); + } @media(max-width: 399px) { position: static; left: auto; diff --git a/gfi-ihk-2024/stories/sections/feature/feature.scss b/gfi-ihk-2024/stories/sections/feature/feature.scss index 7033258..4fd187f 100644 --- a/gfi-ihk-2024/stories/sections/feature/feature.scss +++ b/gfi-ihk-2024/stories/sections/feature/feature.scss @@ -9,6 +9,26 @@ padding: var(--section-padding) 0; border-bottom: var(--border-width) solid var(--theme-color-secondary); margin: var(--section-margin) auto; + position: relative; + + &:after { + content: ""; + background: var(--theme-color-primary); + border-bottom: var(--border-width) solid var(--theme-color-secondary); + position: absolute; + left: 50%; + top: 0; + width: 100vw; + height: calc(100% + var(--border-width)); + margin: 0 -50vw; + z-index: -1; + } + .has-sidebar & { + padding: var(--section-padding); + &:after { + display: none; + } + } h2 { margin-bottom: 0.4em;