diff --git a/src/components/ProductLandingPage/Cards/Card.scss b/src/components/ProductLandingPage/Cards/Card.scss index 6ab8b4e0c..592a05411 100644 --- a/src/components/ProductLandingPage/Cards/Card.scss +++ b/src/components/ProductLandingPage/Cards/Card.scss @@ -1,19 +1,25 @@ -// ImageCard Styling +// ImageCard Styling .image-card-container { margin: 0 1rem 0 1rem; border: 1px solid var(--ifm-color-emphasis-100); - border-radius: 0.5rem; - img { border-radius: 0.5rem 0.5rem 0 0; }; - box-shadow: 0 2px 3px hsla(222,8%,43%,.1),0 8px 16px -10px hsla(222,8%,43%,.2); + border-radius: 0.5rem; + img { + border-radius: 0.5rem 0.5rem 0 0; + } + // box-shadow: 0 2px 3px hsla(222,8%,43%,.1),0 8px 16px -10px hsla(222,8%,43%,.2); } .image-card__image { - @media (min-width: 769px) { height: 145px; } + @media (min-width: 769px) { + height: 145px; + } img { object-fit: cover; height: 100%; - @media (max-width: 768px) { height: auto; } + @media (max-width: 768px) { + height: auto; + } } } @@ -23,14 +29,14 @@ h4 { display: -webkit-box; -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; } - p { + p { display: -webkit-box; -webkit-line-clamp: 4; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #727274; @@ -42,15 +48,16 @@ max-width: 275px; min-height: 325px; background-color: white; - box-shadow: 0 2px 3px hsla(222,8%,43%,.1),0 8px 16px -10px hsla(222,8%,43%,.2); + box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1), + 0 8px 16px -10px hsla(222, 8%, 43%, 0.2); border-radius: 0.5rem; padding: 2rem; transition: 300ms; - &:hover { - box-shadow: 0 0 0 2px rgba(38,53,61,.15), - 0 2px 3px hsla(222,8%,43%,.15), - 0 16px 16px -10px hsla(222,8%,43%,.2) + &:hover { + box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15), + 0 2px 3px hsla(222, 8%, 43%, 0.15), + 0 16px 16px -10px hsla(222, 8%, 43%, 0.2); } .info-card__body { @@ -59,7 +66,7 @@ height: 100%; .latest-tag { - margin-left: 0.5rem; + margin-left: 0.5rem; font-size: 1rem; color: var(--ifm-color-main); } @@ -81,12 +88,12 @@ display: flex; justify-content: space-between; margin-top: auto; - + .card-cta__docs-link { display: flex; align-items: center; color: var(--ifm-color-main); - + img { max-width: 25px; margin-left: 0.25rem; @@ -94,17 +101,21 @@ } } -.card-cta__logo { max-width: 40px; } +.card-cta__logo { + max-width: 40px; +} -// LinkCard Styling +// LinkCard Styling .link-card-container { transition: 300ms; max-width: 450px; max-height: 400px; - background-color: #1D1E1F; + background-color: #1d1e1f; padding: 2rem; border-radius: 0.5rem; - &:hover { background-color: #343536 } + &:hover { + background-color: #343536; + } .link-card__body { display: flex; @@ -114,6 +125,6 @@ .link-card__list { max-height: 200px; - padding-left: 0; + padding-left: 0; } }