Feat/responsivity publications (#212)

* extract common tasks aliases * feat: responsivity for item-cards * fix: mix format * bug: testing git hooks --------- Co-authored-by: Zoey de Souza Pessanha <[email protected]>
peapescarte · Sep 13, 2024 · 63713b9 · 63713b9
1 parent 1cf8ded
commit 63713b9
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 4 deletions.
diff --git a/assets/css/boletins.scss b/assets/css/boletins.scss
@@ -3,3 +3,30 @@
     width: 15.5rem;
   }
 }
+
+@media (min-width: 530px) and (max-width: 770px){
+
+  .boletim-wrapper {
+    .links-item {
+      @apply flex flex-col justify-start items-start m-8;
+      width: 60%;
+      height: 16rem;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+    }
+  }
+}
+@media (min-width: 350px) and (max-width: 529px){
+
+  .boletim-wrapper {
+    .links-item {
+      @apply flex flex-col justify-start items-start m-8;
+      width: 70%;
+      height: 13rem;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+    }
+  }
+}
diff --git a/assets/css/landing.scss b/assets/css/landing.scss
@@ -34,7 +34,10 @@
     img {
       width: 100%;
       height: 100%;
+      max-width: 1100px;
+      max-height: 600px;
       background-size: cover;
+      margin: 0 auto;
     }
   }
 
@@ -141,6 +144,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
 
     .publications-main-text {
       margin: 5rem 30rem;
@@ -493,3 +497,113 @@
     width: 1360px;
   }
 }
+
+@media (min-width: 530px) and (max-width: 770px){
+  .links-landing {
+    @apply flex flex-col justify-center items-center ;
+    width: 100%;
+
+    .links-item {
+      @apply flex flex-col justify-start items-start m-8;
+      width: 60%;
+      height: 16rem;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+
+      a {
+        @apply flex flex-col mt-auto;
+      }
+
+      img {
+        border-radius: 8px;
+        width: inherit;
+        height: inherit;
+        @apply absolute;
+        z-index: -10;
+      }
+
+      h3 {
+        padding-left: 1rem;
+      }
+
+      p {
+        text-wrap: wrap;
+        margin-top: 0.5rem;
+        padding: 0 1rem 1.5rem 1rem;
+      }
+
+      button {
+        width: 100%;
+        padding: 0 1rem 1.5rem 0;
+        background-color: transparent;
+
+        p {
+          display: inline-flex;
+          width: inherit;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+@media (min-width: 350px) and (max-width: 529px){
+
+
+
+  .links-landing {
+    @apply flex flex-col justify-center items-center;
+    width: 100%;
+
+    .links-item {
+      @apply flex flex-col justify-start items-start m-8;
+      width: 70%;
+      height: 13rem;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
+
+      a {
+        @apply flex flex-col mt-auto;
+      }
+
+      img {
+        border-radius: 8px;
+        width: inherit;
+        height: inherit;
+        @apply absolute;
+        z-index: -10;
+      }
+
+      h3 {
+        padding-left: 1rem;
+      }
+
+      p {
+        text-wrap: wrap;
+        margin-top: 0.5rem;
+        padding: 0 1rem 1.5rem 1rem;
+      }
+
+      button {
+        width: 100%;
+        padding: 0 1rem 1.5rem 0;
+        background-color: transparent;
+
+        p {
+          display: inline-flex;
+          width: inherit;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/pescarte_web/templates/livros_html/show.html.heex b/lib/pescarte_web/templates/livros_html/show.html.heex
@@ -7,7 +7,7 @@
     <section class="publications-text">
       <!-- criando os cards dos livros -->
       <div class="links-landing">
-        <div class="links-item" style="width: 16rem">
+        <div class="links-item">
           <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/livro1_capa.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9saXZybzFfY2FwYS5wbmciLCJpYXQiOjE3MjUzODQ1NDIsImV4cCI6MjA0MDc0NDU0Mn0.Kq788YF3Rsd0TwBCZ8kxDZEV3eTZ8IQ7BlGmUgJ1rZk&t=2024-09-03T17%3A29%3A02.533Z" />
           <DesignSystem.link
             href="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/Livro-1-eBook.pdf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9MaXZyby0xLWVCb29rLnBkZiIsImlhdCI6MTcyNTM4NDQ4MSwiZXhwIjoyMDQwNzQ0NDgxfQ.dKC0IaO9-WzjH8FTcLTqst0WsVybS2LHcVomDjsmguU&t=2024-09-03T17%3A28%3A02.492Z"
@@ -17,7 +17,7 @@
             <.text size="h3" color="text-white-100">Livro Pescarte 1</.text>
           </DesignSystem.link>
         </div>
-        <div class="links-item" style="width: 16rem">
+        <div class="links-item">
           <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/livro2_capa.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9saXZybzJfY2FwYS5wbmciLCJpYXQiOjE3MjUzODQ1NjEsImV4cCI6MjA0MDc0NDU2MX0.U6ClO169WPPLv9ZrrrwdUNTP6dGSW0IL5KQdbwzkfgM&t=2024-09-03T17%3A29%3A21.965Z" />
           <DesignSystem.link
             href="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/boletins/boletim%202/Boletim%20Pescarte%2002.pdf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2JvbGV0aW5zL2JvbGV0aW0gMi9Cb2xldGltIFBlc2NhcnRlIDAyLnBkZiIsImlhdCI6MTcyNDQyMjM5NywiZXhwIjoyMDM5NzgyMzk3fQ.9D1fAdjMSm5eSf707SP8DjRCDi_nFmtoKzctpAyKZd8&t=2024-08-23T14%3A13%3A17.771Z"
@@ -27,7 +27,7 @@
             <.text size="h3" color="text-white-100">Livro Pescarte 2</.text>
           </DesignSystem.link>
         </div>
-        <div class="links-item" style="width: 16rem">
+        <div class="links-item">
           <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/livro3_capa.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9saXZybzNfY2FwYS5wbmciLCJpYXQiOjE3MjUzODQ1NzksImV4cCI6MjA0MDc0NDU3OX0.KQq3jvtCbA3FebhWspy1I9OG6khjLeGLNdadvSf7udM&t=2024-09-03T17%3A29%3A39.188Z" />
           <DesignSystem.link
             href="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/Livro-3-eBook.pdf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9MaXZyby0zLWVCb29rLnBkZiIsImlhdCI6MTcyNTM4NDUyNCwiZXhwIjoyMDQwNzQ0NTI0fQ.K-y0xz8VHAqRSCdr62RKpGFYdeu5e5RSVbYJDhN20jE&t=2024-09-03T17%3A28%3A44.852Z"
@@ -37,7 +37,7 @@
             <.text size="h3" color="text-white-100">Livro Pescarte 3</.text>
           </DesignSystem.link>
         </div>
-        <div class="links-item" style="width: 16rem">
+        <div class="links-item">
           <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/livro4_capa.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9saXZybzRfY2FwYS5wbmciLCJpYXQiOjE3MjU3NTg2NjgsImV4cCI6MjA0MTExODY2OH0.a1IBvYpIUKWUjnyhPWRoaAyotcSHnHPn8XqHFqgRDjY&t=2024-09-08T01%3A24%3A28.346Z" />
           <DesignSystem.link
             href="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/publicacoes/livros/Livro-4-eBook.pdf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3B1YmxpY2Fjb2VzL2xpdnJvcy9MaXZyby00LWVCb29rLnBkZiIsImlhdCI6MTcyNTc2NDIzNCwiZXhwIjoyMDQxMTI0MjM0fQ.TNyd3J5ClL5NI9iUARwTllK_PevXU1GfJt_X2tD42iY&t=2024-09-08T02%3A57%3A14.612Z"