From be2309cf1005ae1f22ff64de49388d8bbc584fa7 Mon Sep 17 00:00:00 2001
From: Douglas Tofoli <tofoli.douglas@hotmail.com>
Date: Wed, 25 Sep 2024 14:47:55 -0300
Subject: [PATCH] feat: add new css to responsive template (#220)

---
 assets/css/app.scss                           |  2 +-
 assets/css/sedes.scss                         | 57 +++++++++++++++++++
 .../templates/sedes_html/show.html.heex       |  6 +-
 3 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 assets/css/sedes.scss

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 2a51be76..b9818372 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -177,7 +177,7 @@ footer {
 @import "./aboutus.scss";
 @import "./noticias.scss";
 @import "./cooperativas.scss";
-
+@import "./sedes.scss";
 @import "./agenda.scss";
 @import "./contact.scss";
 @import "./article.scss";
diff --git a/assets/css/sedes.scss b/assets/css/sedes.scss
new file mode 100644
index 00000000..eb6ad948
--- /dev/null
+++ b/assets/css/sedes.scss
@@ -0,0 +1,57 @@
+.sedes-wrapper {
+  @apply flex flex-col;
+  gap: 5rem;
+
+  .mapa {
+    @apply flex justify-center;
+    margin-top: 5rem;
+    padding: 0 2.5rem;
+
+    img {
+      border-radius: 1.5rem;
+    }
+  }
+
+  .nossas-sedes {
+    @apply flex flex-col justify-center;
+    align-items: center;
+    gap: 5rem;
+
+    .nossas-sedes-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 2.5rem;
+      padding: 0 7.19rem;
+
+      .sede-detail {
+        @apply flex;
+        gap: 0.62rem;
+
+        .sede-text {
+          font-size: 1rem;
+
+          h5:nth-child(1) {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mapa {
+      padding: 0 1rem;
+    }
+
+    .nossas-sedes {
+      h2 {
+        text-align: center;
+      }
+
+      .nossas-sedes-container {
+        grid-template-columns: 1fr;
+        padding: 0 1rem;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/pescarte_web/templates/sedes_html/show.html.heex b/lib/pescarte_web/templates/sedes_html/show.html.heex
index 39d6ce90..e7f3133e 100644
--- a/lib/pescarte_web/templates/sedes_html/show.html.heex
+++ b/lib/pescarte_web/templates/sedes_html/show.html.heex
@@ -1,10 +1,10 @@
-<main class="equipes-wrapper">
+<main class="sedes-wrapper">
   <!-- MAPA -->
-  <div class="mapa-wrapper">
+  <div class="mapa">
     <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/equipes/mapa.jpeg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2VxdWlwZXMvbWFwYS5qcGVnIiwiaWF0IjoxNzI0MTU2NjYwLCJleHAiOjE3NTU2OTI2NjB9.cpDBGFmH-HhwRjZ27FUpBLZ_tsulytz7MlcngJLlyyI&t=2024-08-20T12%3A24%3A20.597Z" />
   </div>
   <!-- NOSSAS SEDES MUNICIPAIS -->
-  <div class="nossas-sedes-wrapper">
+  <div class="nossas-sedes">
     <.text size="h2" color="text-blue-100">Nossas Sedes Municipais</.text>
     <div class="nossas-sedes-container">
       <div class="sede-detail">