You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
1.1 KiB
SCSS

@import "_common.scss";
.plants-list {
width: 100%;
display: block;
.plant-item {
display: flex;
float: left;
margin: 1em;
border-radius: 0.25em;
box-shadow: 0.5em 0.5em $highlight;
transition-duration: 0.25s;
height: 128px;
width: 256px;
a.plant-link {
display: block;
position: relative;
img {
border-radius: 0.25em;
height: 128px;
width: 256px;
}
h2.plant-title {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25em 0.25em 0 0;
text-decoration: none;
}
}
&:hover {
margin: 0.75em 1.25em 0.75em 0.75em;
box-shadow: 0.75em 0.75em $highlight;
}
&:active {
margin: 1em;
box-shadow: 0.5em 0.5em $highlight;
}
}
}
@media (max-width: 600px) {
.plants-list {
display: block;
.plant-item {
display: block;
float: none;
margin: 1em auto;
}
}
}