From d5c6494b02759dd18cb5ad12b42aff77e14cee68 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Wed, 7 May 2025 23:57:06 +0200 Subject: [PATCH] footer picto --- .../stories/assets/img/footer-picto.svg | 146 ++++++++++++++++++ .../components/footer/Footer.stories.js | 8 +- .../components/footer/FooterComponent.js | 5 + .../stories/components/footer/footer.scss | 11 ++ 4 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 gfi-ihk-2024/stories/assets/img/footer-picto.svg 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) {