add BlogMain - enhancement_410_page_blog

Studio-Yandex-Practicum · Jun 16, 2024 · 8e8a2d9 · 8e8a2d9
1 parent c2420d1
commit 8e8a2d9
Show file tree

Hide file tree

Showing 26 changed files with 501 additions and 445 deletions.
diff --git a/src/assets/images/blogMainItem/img-article-02-1500x1000.webp.svg b/src/assets/images/blogMainItem/img-article-02-1500x1000.webp.svg
diff --git a/src/components/BlogItemForContainer/BlogItemForContainer.tsx b/src/components/BlogItemForContainer/BlogItemForContainer.tsx
diff --git a/src/components/BlogItemForContainer/blog-item-for-container.module.scss b/src/components/BlogItemForContainer/blog-item-for-container.module.scss
diff --git a/src/components/BlogMainItem/BlogMainItem.tsx b/src/components/BlogMainItem/BlogMainItem.tsx
diff --git a/src/components/BlogMainItem/blog-main-item.module.scss b/src/components/BlogMainItem/blog-main-item.module.scss
diff --git a/src/entities/BlogCard/ui/BlogCard.module.scss b/src/entities/BlogCard/ui/BlogCard.module.scss
@@ -5,27 +5,48 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 15px;
+  gap: 8px;
   width: 100%;
   user-select: none;
 
   @include media.respond-to('middle') {
     width: 260px;
+    gap: 7px;
+  }
+
+  &_blog {
+    width: 100%;
   }
 }
 
 .heading {
   line-height: 22px;
   font-size: 16px;
   font-weight: 500;
+  padding-top: 12px;
   transition: 0.5s;
 }
 
+.subheading {
+  font-size: 17px;
+}
+
+.imageContainer {
+  position: relative;
+  display: flex;
+}
+
 .image {
   width: 100%;
   border-radius: 10px;
   object-fit: cover;
-  transition: 0.25s ease-in-out;
+  transition: 0.25s;
+
+  &_blog {
+    @include media.respond-to('small-middle') {
+      height: 418px;
+    }
+  }
 }
 
 .noImage {
@@ -41,5 +62,16 @@
 }
 
 .blogCard:hover .image {
-  transform: scale(1.025);
+  transform: scale(1.02);
+}
+
+.tags {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 20px;
+  cursor: auto;
 }