diff --git a/gfi-ihk-2024/stories/assets/img/footer-picto.svg b/gfi-ihk-2024/stories/assets/img/footer-picto.svg new file mode 100644 index 0000000..2ad15cf --- /dev/null +++ b/gfi-ihk-2024/stories/assets/img/footer-picto.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gfi-ihk-2024/stories/components/footer/Footer.stories.js b/gfi-ihk-2024/stories/components/footer/Footer.stories.js index ada4f8e..25438df 100644 --- a/gfi-ihk-2024/stories/components/footer/Footer.stories.js +++ b/gfi-ihk-2024/stories/components/footer/Footer.stories.js @@ -1,4 +1,5 @@ import {createFooter} from "./FooterComponent"; +import footerPicto from '../../assets/img/footer-picto.svg'; export default { title: 'Components/Footer', @@ -15,4 +16,9 @@ const Template = ({...args}) => { }; export const Footer = Template.bind({}); -Footer.args = {}; \ No newline at end of file +Footer.args = {}; + +export const FooterPicto = Template.bind({}); +FooterPicto.args = { + picto: footerPicto, +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/footer/FooterComponent.js b/gfi-ihk-2024/stories/components/footer/FooterComponent.js index 7bb6c87..94c3a10 100644 --- a/gfi-ihk-2024/stories/components/footer/FooterComponent.js +++ b/gfi-ihk-2024/stories/components/footer/FooterComponent.js @@ -29,8 +29,13 @@ export const createFooter = ({ legalText = '

© Industrie- und Handelskammer Musterstast

\n' + '

Für die Richtigkeit der in dieser Website enthaltenen Angaben können wir trotz sorgfältiger Prüfung keine Gewähr übernehmen. Bei den verlinkten externen Seiten handelt es sich ausschließlich um fremde Inhalte, für die wir keine Haftung übernehmen und deren Inhalt wir uns nicht zu eigen machen.

', legalNav = ['Impressum', 'Datenschutzerklärung', 'Pflichtinformationen nach der DSGVO'], + picto = null }) => { const footer = createElement('footer', ['page-footer']); + if (picto !== null) { + footer.classList.add('footer-picto'); + footer.style.backgroundImage = `url(${picto})`; + } const container = createElement('div', ['container'], null, footer); const rowContact = createElement('div', ['row', 'contact'], null, container); const rowSocial = createElement('div', ['row', 'social'], null, container); diff --git a/gfi-ihk-2024/stories/components/footer/footer.scss b/gfi-ihk-2024/stories/components/footer/footer.scss index 45b80a9..2d39055 100644 --- a/gfi-ihk-2024/stories/components/footer/footer.scss +++ b/gfi-ihk-2024/stories/components/footer/footer.scss @@ -6,6 +6,17 @@ background-color: var(--theme-color-primary-dimmed-04); border-bottom: var(--border-width) solid var(--theme-color-primary); z-index: 10; + &.footer-picto { + padding-top: calc(var(--section-padding) + 300px); + background-repeat: repeat-x; + background-size: auto 300px; + background-position: 50% 0; + background-image: url('../../assets/img/footer-picto.svg'); + @media(max-width: 767px) { + padding-top: calc(var(--section-padding) + 200px); + background-size: auto 200px; + } + } .container { @media(max-width: 767px) {