diff --git a/assets/css/boletins.scss b/assets/css/boletins.scss index a8ce45d8..edb8eb9e 100644 --- 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 index 35d5f1f0..b4bdb2ab 100644 --- 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 index 5db0f2b2..b8257554 100644 --- a/lib/pescarte_web/templates/livros_html/show.html.heex +++ b/lib/pescarte_web/templates/livros_html/show.html.heex @@ -7,7 +7,7 @@