feat: added noticia style

peapescarte · Nov 21, 2024 · 336094d · 336094d
1 parent b492523
commit 336094d
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 3 deletions.
diff --git a/assets/css/noticias.scss b/assets/css/noticias.scss
@@ -143,3 +143,78 @@
     margin-top: 20px;
   }
 }
+
+.noticia {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 220px;
+}
+
+.noticia h1 {
+  margin-bottom: 30px;
+  line-height: 46px;
+  font-weight: 700;
+}
+
+.noticia .noticia-descricao h2 {
+  color: #0064C8;
+  font-size: 32px;
+  line-height: 38px;
+  font-weight: 700;
+  margin-top: 60px;
+  margin-bottom: 30px;
+}
+
+.noticia .noticia-descricao h3 {
+  font-size: 24px;
+  line-height: 28px;
+  font-weight: 700;
+  color: #404040;
+  margin-bottom: 30px;
+}
+
+.noticia .noticia-descricao strong em {
+  text-decoration: underline;
+  color: #0064C8;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.noticia .noticia-descricao p {
+  font-size: 16px;
+  color: #404040;
+  margin-bottom: 40px;
+}
+
+
+.noticia .noticia-descricao p a {
+  font-weight: 700;
+  line-height: 24px;
+  color: #0064C8;
+}
+
+.noticia .noticia-descricao p a::after {
+  content: "➔";
+  display: inline-block;
+  color: inherit;
+  font-size: 0.8em;
+  position: relative;
+  transform: rotate(-45deg);
+  bottom: 2px;
+}
+
+.noticia .noticia-descricao p a:hover {
+  text-decoration-line: underline;
+}
+
+.noticia .noticia-descricao img {
+  width: 100%;
+  border-radius: 16px;
+}
+
+@media (max-width: 768px) {
+  .noticia {
+    padding: 40px;
+  }
+}
diff --git a/lib/pescarte_web/live/blog/post_live/show.ex b/lib/pescarte_web/live/blog/post_live/show.ex
@@ -15,10 +15,16 @@ defmodule PescarteWeb.Blog.PostLive.Show do
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
-      <h1><%= @post.titulo %></h1>
-      <div><%= raw(Markdown.to_html(@post.conteudo)) %></div>
+    <div class="noticia">
+      <h1 class="text-4xl leading-10 font-bold text-blue-100"><%= @post.titulo %></h1>
+      <div class="noticia-descricao"><%= raw(Markdown.to_html(@post.conteudo)) %></div>
+      <DesignSystem.link href="/noticias" class="text-sm font-semibold">
+        <.button style="primary">
+          <Lucideicons.arrow_left class="text-white-100" /> Voltar para Notícias
+        </.button>
+      </DesignSystem.link>
     </div>
+    <PescarteWeb.DesignSystem.GetInTouch.render />
     """
   end
 end