forked from crowetic/commerce
Merge pull request #14 from okbel/arzfran/improve-imgs
Improve Image styles
This commit is contained in:
commit
876ea34b78
@ -4,20 +4,20 @@
|
||||
@screen md {
|
||||
@apply flex-row;
|
||||
}
|
||||
}
|
||||
|
||||
.asideWrapper {
|
||||
@apply pr-3 w-full relative;
|
||||
& .asideWrapper {
|
||||
@apply pr-3 w-full relative;
|
||||
|
||||
@screen md {
|
||||
@apply w-48;
|
||||
}
|
||||
}
|
||||
|
||||
.aside {
|
||||
@apply flex flex-row w-full justify-around mb-12;
|
||||
|
||||
@screen md {
|
||||
@apply mb-0 block sticky top-32;
|
||||
@screen md {
|
||||
@apply w-48;
|
||||
}
|
||||
}
|
||||
|
||||
& .aside {
|
||||
@apply flex flex-row w-full justify-around mb-12;
|
||||
|
||||
@screen md {
|
||||
@apply mb-0 block sticky top-32;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
.root {
|
||||
@apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
|
||||
@apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
|
||||
height: 100% !important;
|
||||
|
||||
&:hover {
|
||||
& .squareBg:before {
|
||||
@ -119,17 +120,19 @@
|
||||
}
|
||||
|
||||
.wishlistButton {
|
||||
@apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer z-10;
|
||||
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
@apply absolute z-10 inset-0 flex items-center justify-center;
|
||||
|
||||
& > div {
|
||||
@apply h-full;
|
||||
& > div {
|
||||
@apply h-full;
|
||||
padding-bottom: 0 !important;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 120% !important;
|
||||
top: -10% !important;
|
||||
}
|
||||
|
@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
|
||||
variant={p.variants.edges?.[0]!}
|
||||
/>
|
||||
</div>
|
||||
<div className={cn(s.imageContainer)}>
|
||||
<div className={s.imageContainer}>
|
||||
<EnhancedImage
|
||||
alt={p.name}
|
||||
className={cn('w-full object-cover', s['product-image'])}
|
||||
|
@ -79,8 +79,8 @@ export default function Home({
|
||||
key={node.path}
|
||||
product={node}
|
||||
// The first image is the largest one in the grid
|
||||
imgWidth={i === 0 ? '65vw' : '30vw'}
|
||||
imgHeight={i === 0 ? '45vw' : '22vw'}
|
||||
imgWidth={i === 0 ? 1600 : 820}
|
||||
imgHeight={i === 0 ? 1600 : 820}
|
||||
priority
|
||||
/>
|
||||
))}
|
||||
|
Loading…
x
Reference in New Issue
Block a user