Merge branch 'develop' into home

midianinja · Jul 22, 2024 · b62cd7e · b62cd7e
2 parents bf2c5b8 + 78f1b23
commit b62cd7e
Showing 1 changed file with 142 additions and 0 deletions.
diff --git a/themes/midia-ninja-theme/assets/scss/6-pages/_p-home.scss b/themes/midia-ninja-theme/assets/scss/6-pages/_p-home.scss
@@ -43,6 +43,148 @@
         font-weight: 400;
     }
 
+	.wp-block-newspack-blocks-homepage-articles.destaque-principal {
+        border-radius: 8px;
+        margin-bottom: size(30);
+        overflow: hidden;
+
+        @include mobile {
+            margin-bottom: -1rem;
+            overflow: inherit;
+
+        }
+
+        article {
+            aspect-ratio: 16/10;
+            display: block;
+            position: relative;
+            padding: 0;
+
+            @include desktop {
+             height: 506px;
+
+         	}
+
+            @include mobile {
+                max-height: 200px;
+				aspect-ratio: 16/9;
+            }
+
+            .post-thumbnail {
+                height: 100%;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100%;
+                z-index: 1;
+
+                a {
+                    display: block;
+                    // aspect-ratio: 16 / 9;
+                    // overflow: hidden;
+
+                    &::before {
+                        content: "";
+                        padding-top: 56.25%;
+                        float: left;
+                    }
+
+                    &::after {
+                        clear: left;
+                        content: " ";
+                        display: table;
+                    }
+
+                    img {
+                        height: 100%;
+                        object-fit: cover;
+                        position: absolute;
+                        width: 100%;
+
+                        @include mobile {
+                            border-radius: 8px;
+                            margin-bottom: 30px;
+                        }
+
+                        @media (max-width: $tablet-width) {
+                            min-width: 100%;
+                        }
+                    }
+                }
+            }
+
+            .entry-wrapper {
+                background: linear-gradient(0deg, rgba(38, 38, 38, 0.64) 49.5%, rgba(38, 38, 38, 0.00) 100%);
+                color: var(--wp--preset--color--secondary-light);
+                display: flex;
+                flex-direction: column;
+                height: 45%;
+                justify-content: flex-end;
+                left: 0;
+                max-width: 100%;
+                padding: 15px 80px 44px 60px;
+                position: relative;
+                right: 0;
+                z-index: 2;
+                top: 56%;
+
+                @include mobile {
+                    border-radius: 8px;
+                    gap: .2rem;
+                    padding: size(20) size(20);
+                    justify-content: flex-end;
+                    height: 100%;
+                    top: 0;
+                }
+
+                .cat-links {
+                    margin: 0 0 0.8rem;
+
+                    @include mobile {
+                        margin: 0 0 0.2rem;
+
+                    }
+                }
+
+                p {
+                    color: #fff;
+                    font-family: $f_title;
+                    margin-top: 0;
+                    line-height: 140%;
+
+                    @media (max-width: 782px) {
+                        font-size: 14px;
+                    }
+
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+
+                    @include mobile {
+                        display: none;
+                    }
+                }
+
+                h2 {
+                    color: #fff;
+                    font-size: 2rem;
+                    font-weight: 800;
+                    line-height: 120%;
+                    letter-spacing: -0.64px;
+                    margin-bottom: 0.5rem;
+
+                    @include mobile {
+                        font-size: 1rem !important;
+                        margin-bottom: 0;
+                        padding-bottom: 0;
+                        font-weight: 700;
+                        line-height: 22.4px;
+                    }
+                }
+            }
+        }
+    }
+
     .grid-latest-posts {
         margin-top: -1.7rem;
         margin-bottom: 0.5rem;