From 544e21ca40916f4bef0ad986d2e05f232f7e34e4 Mon Sep 17 00:00:00 2001 From: Douglas Tofoli Date: Wed, 25 Sep 2024 14:41:35 -0300 Subject: [PATCH] Feat/footer responsive (#219) --- assets/css/app.scss | 3 +- assets/css/footer.scss | 32 ++++++++++++++++++++ assets/css/get_in_touch.scss | 2 ++ lib/pescarte_web/design_system.ex | 10 ++++-- priv/static/images/footer/logo_ibama.svg | 23 ++++++++++++++ priv/static/images/footer/logo_ipead.svg | 9 ++++++ priv/static/images/footer/logo_petrobras.svg | 21 +++++++++++++ priv/static/images/footer/logo_uenf.svg | 9 ++++++ supabase/config.toml | 2 +- 9 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 assets/css/footer.scss create mode 100644 priv/static/images/footer/logo_ibama.svg create mode 100644 priv/static/images/footer/logo_ipead.svg create mode 100644 priv/static/images/footer/logo_petrobras.svg create mode 100644 priv/static/images/footer/logo_uenf.svg diff --git a/assets/css/app.scss b/assets/css/app.scss index 1a4129c4..2a51be76 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -155,6 +155,7 @@ footer { @import "./button.scss"; @import "./checkbox.scss"; @import "./flash.scss"; +@import "./footer.scss"; @import "./get_in_touch.scss"; @import "./input.scss"; @import "./landing.scss"; @@ -192,4 +193,4 @@ footer { @import "./pages/app/researcher/pesquisador"; // Páginas de Erros -@import "./errors/404.scss"; +@import "./errors/404.scss"; \ No newline at end of file diff --git a/assets/css/footer.scss b/assets/css/footer.scss new file mode 100644 index 00000000..211c9339 --- /dev/null +++ b/assets/css/footer.scss @@ -0,0 +1,32 @@ +footer { + @apply flex items-center justify-center fixed bg-white-100; + gap: 2rem; + bottom: 0; + padding: 1.5rem 13.5rem; + width: 100%; + + stroke-width: 1px; + stroke: var(--NEUTRAS-20, #CFCFCF); + + p { + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 1.25rem; + } +} + +@media (max-width: 768px) { + footer { + @apply absolute flex-wrap; + padding: 1.5rem 1rem; + align-items: center; + + stroke-width: 0; + box-shadow: 0px 0px 20px 2px rgba(64, 64, 64, 0.10); + + p { + text-align: center; + } + } +} \ No newline at end of file diff --git a/assets/css/get_in_touch.scss b/assets/css/get_in_touch.scss index 88c7e3bd..52c4ec45 100644 --- a/assets/css/get_in_touch.scss +++ b/assets/css/get_in_touch.scss @@ -84,6 +84,8 @@ @media (max-width: 767px) { .onde-nos-encontrar-wrapper { + margin: 0; + .redes-sociais-wrapper { margin: 1rem; diff --git a/lib/pescarte_web/design_system.ex b/lib/pescarte_web/design_system.ex index 32124a6b..71f2901c 100644 --- a/lib/pescarte_web/design_system.ex +++ b/lib/pescarte_web/design_system.ex @@ -154,8 +154,14 @@ defmodule PescarteWeb.DesignSystem do """ def footer(assigns) do ~H""" -