rmcg.dev/projects/FrontendMentor/newbie/blog-preview-card/assets/css/theme.css

36 lines
655 B
CSS

body {
background-color: var(--clr-yellow);
}
article {
background-color: var(--clr-white);
border-radius: 20px;
border: black 1px solid;
/* shadow scales from 8px at 375, to 16 at 1440 */
box-shadow: var(--sizing-box-shadow) var(--sizing-box-shadow) black;
/*! design shows desktop active with 16px, but desktop inactive with 8px */
/* box-shadow: 8px 8px black; */
img {
border-radius: 10px;
}
a {
color: var(--clr-black);
text-decoration: none;
}
a:has(:hover, :focus) {
color: var(--clr-yellow);
}
.category {
background-color: var(--clr-yellow);
border-radius: 4px;
}
}
article:hover {
--sizing-box-shadow: 16px;
}