diff --git a/web/public/assets/graphics/grisemonster.png b/web/public/assets/graphics/grisemonster.png new file mode 100644 index 0000000..3d0eed1 Binary files /dev/null and b/web/public/assets/graphics/grisemonster.png differ diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx index ea56e73..67ba0fb 100644 --- a/web/src/components/layout/Footer.tsx +++ b/web/src/components/layout/Footer.tsx @@ -36,6 +36,7 @@ async function OpeningHoursTable() { export const Footer = () => { return ( + <> +
+
+ ); }; diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss index 74d8196..a84f042 100644 --- a/web/src/components/layout/footer.module.scss +++ b/web/src/components/layout/footer.module.scss @@ -115,6 +115,32 @@ } } +.pigPattern { + background-color: var(--color-background); + background-image: url("/assets/graphics/grisemonster.png"); + background-size: 100% auto; + background-position: 0 100%; + background-attachment: fixed; + background-repeat: no-repeat; + width: 100%; + height: 50vh; + position: relative; + z-index: 700; + + @media (orientation: landscape) { + background-size: 100% auto; + } + + @media (orientation: portrait) { + background-size: auto 50%; + } + + @media (hover: none) { + background-attachment: initial; + background-size: cover; + } +} + @media (max-width: 900px) { .social, .contact,