punkfairie/frontend-mentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 feat: Adjust design for desktops

Browse source
This commit is contained in:
marleyrae 2023-05-28 21:44:14 -07:00
parent b765836e09
commit 2229444567
1 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
product-preview-card-component/src/style.css
View file

@ -19,11 +19,20 @@
font-size: 14px; font-size: 14px;
} }
html, body, .wrapper { /* ----------------------------------------------------------------------------------- &base ---- */
html {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
body, .wrapper {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body { body {
font-size: 1rem; font-size: 1rem;
background-color: var(--c-cream); background-color: var(--c-cream);
@ -38,6 +47,12 @@ body {
justify-content: center; justify-content: center;
} }
@media (min-width: 1000px) {
.wrapper {
height: 95%;
}
}
/* ---------------------------------------------------------------------------- &ProductCard ---- */ /* ---------------------------------------------------------------------------- &ProductCard ---- */
.ProductCard { .ProductCard {
@ -49,21 +64,49 @@ body {
border-radius: var(--ProductCard-borderRadius); border-radius: var(--ProductCard-borderRadius);
} }
@media (min-width: 1000px) {
.ProductCard {
height: min-content;
width: 50%;
display: flex;
}
}
.ProductCard-picture { .ProductCard-picture {
width: 100%; width: 100%;
border-radius: var(--ProductCard-borderRadius) var(--ProductCard-borderRadius) 0 0; border-radius: var(--ProductCard-borderRadius) var(--ProductCard-borderRadius) 0 0;
} }
@media (min-width: 1000px) {
.ProductCard-picture {
border-radius: var(--ProductCard-borderRadius) 0 0 var(--ProductCard-borderRadius);
height: 100%;
}
}
.ProductCard-body { .ProductCard-body {
padding: 1.25rem 1.75rem; padding: 1.25rem 1.75rem;
} }
@media (min-width: 1000px) {
.ProductCard-body {
width: 80%;
padding: 2.5rem 2rem;
}
}
.ProductCard-category { .ProductCard-category {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .3rem; letter-spacing: .3rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
@media (min-width: 1000px) {
.ProductCard-category {
margin-bottom: 1.5rem;
}
}
.ProductCard-title { .ProductCard-title {
font-family: var(--t-family-display); font-family: var(--t-family-display);
font-size: var(--t-size-display); font-size: var(--t-size-display);
@ -72,17 +115,35 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@media (min-width: 1000px) {
.ProductCard-title {
margin-bottom: 1.25rem;
}
}
.ProductCard-description { .ProductCard-description {
letter-spacing: .025rem; letter-spacing: .025rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
@media (min-width: 1000px) {
.ProductCard-description {
margin-bottom: 2rem;
}
}
.ProductCard-priceContainer { .ProductCard-priceContainer {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@media (min-width: 1000px) {
.ProductCard-priceContainer {
margin-bottom: 1.5rem;
}
}
.ProductCard-price { .ProductCard-price {
font-family: var(--t-family-display); font-family: var(--t-family-display);
font-size: var(--t-size-display); font-size: var(--t-size-display);