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

improve spacings

Browse Source
This commit is contained in:
Julián Benegas 2020-10-23 19:59:55 -03:00
parent 505b1e45d9
commit 60ceee9080
5 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/product/ProductCard/ProductCard.module.css
View File

@ -97,13 +97,13 @@
}
.productTitle {
@apply pt-4 leading-8;
@apply pt-2 max-w-full;
width: 400px;
font-size: 2rem;
letter-spacing: 0.4px;
& span {
@apply inline p-4 bg-primary text-primary font-bold;
@apply inline py-4 px-6 bg-primary text-primary font-bold;
font-size: inherit;
letter-spacing: inherit;
box-decoration-break: clone;
@ -112,7 +112,7 @@
}
.productPrice {
@apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
@apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
letter-spacing: 0.4px;
}

2
components/product/ProductCard/ProductCard.tsx
View File

@ -52,7 +52,7 @@ const ProductCard: FC<Props> = ({
>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{p.name}</span>
</h3>

16
components/product/ProductView/ProductView.module.css
View File

@ -8,15 +8,15 @@
.productDisplay {
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
margin-right: -2rem;
margin-left: -2rem;
min-height: 400px;
min-height: 600px;
@screen md {
min-height: 700px;
}
@screen lg {
margin-right: -2rem;
margin-left: -2rem;
@apply mx-0 col-span-6;
min-height: 100%;
height: 100%;
@ -28,7 +28,11 @@
}
.nameBox {
@apply absolute top-6 left-6 z-20;
@apply absolute top-6 left-0 z-20 pr-16;
@screen lg {
@apply left-6 pr-16;
}
& .name {
@apply px-6 py-2 bg-primary text-primary font-bold;
@ -49,10 +53,10 @@
}
.sidebar {
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
@screen lg {
@apply col-span-5 pl-12 pt-20;
@apply col-span-6 pt-20;
}
}

4
components/ui/Container/Container.tsx
View File

@ -9,7 +9,9 @@ interface Props {
}
const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
const rootClassName = cn(className, {
'mx-auto max-w-8xl px-6': !clean,
})
let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement

2
pages/index.tsx
View File

@ -119,7 +119,7 @@ export default function Home({
/>
))}
</Marquee>
<div className="py-12 flex flex-row w-full px-12">
<div className="py-12 flex flex-row w-full px-6">
<div className="pr-3 w-48 relative">
<div className="sticky top-32">
<ul className="mb-10">