crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: FeaturedBlogCard

Browse Source
This commit is contained in:
unknown 2021-09-02 20:10:55 +07:00
parent 384cbf342d
commit 27b452b0c0
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
View File

@ -2,14 +2,18 @@
.featuredCard{ .featuredCard{
@apply flex flex-row justify-center spacing-horizontal; @apply flex flex-row justify-center spacing-horizontal;
.featuredCardWrapper{
@apply flex flex-row justify-between;
max-width: 121.6rem;
}
} }
.left{ .left{
max-width: 59.8rem; max-width: 59.8rem;
min-height: 33.6rem; min-height: 33.6rem;
} }
.right{ .right{
padding-left: 6.4rem; margin-left: 6.4rem;
max-width: 61.8rem; max-width: 55.4rem;
min-height: 16.8rem; min-height: 16.8rem;
} }
.titleWrapper{ .titleWrapper{

4
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
View File

@ -15,7 +15,7 @@ interface FeaturedCardBlogProps{
const FeaturedCardBlog = ({ title, content, imgSrc, imgAuthor, date, authorName }: FeaturedCardBlogProps) => { const FeaturedCardBlog = ({ title, content, imgSrc, imgAuthor, date, authorName }: FeaturedCardBlogProps) => {
return ( return (
<section className={s.featuredCard}> <section className={s.featuredCard}>
<div className={s.featuredCardWrapper}>
<div className={s.left}> <div className={s.left}>
<Image src={imgSrc} alt="image feature card"/> <Image src={imgSrc} alt="image feature card"/>
</div> </div>
@ -27,7 +27,7 @@ const FeaturedCardBlog = ({ title, content, imgSrc, imgAuthor, date, authorName
<Author name={authorName} image={imgAuthor}/> <Author name={authorName} image={imgAuthor}/>
<div className={s.content}>{content}</div> <div className={s.content}>{content}</div>
</div> </div>
</div>
</section> </section>
) )
} }