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.
158 lines
2.5 KiB
CSS
158 lines
2.5 KiB
CSS
.card{
|
|
background:white;
|
|
display:inline-block;
|
|
position:relative;
|
|
margin:20px 5%;
|
|
width:90%;
|
|
top:0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
|
}
|
|
|
|
:global(.cardContainer) .card {
|
|
width: calc(100% / 3 - 10%);
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
:global(.cardContainer) .card {
|
|
width: calc(100% / 2 - 10%);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
:global(.cardContainer) .card{
|
|
width: calc(100% / 1 - 10%);
|
|
}
|
|
}
|
|
|
|
.card:last-child {
|
|
/* Fixes the odd flickering bug */
|
|
margin-bottom:0px;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
|
top:-3px;
|
|
}
|
|
|
|
.card h3{
|
|
font-family:'Cormorant Infant', serif;
|
|
font-weight:600;
|
|
font-size:22px;
|
|
border-bottom:solid 1px black;
|
|
text-align:center;
|
|
margin:5px;
|
|
}
|
|
|
|
|
|
.card h3{
|
|
border-bottom:none;
|
|
}
|
|
.card h3 a{
|
|
color:inherit;
|
|
text-decoration:none;
|
|
border-bottom:solid 1px black;
|
|
}
|
|
|
|
.card a:hover, .card button:global(.buttonLink):hover{
|
|
color: #760c88;
|
|
border-color: #760c88;
|
|
transition: .2s ease-in-out;
|
|
transition-property: color, border-color;
|
|
}
|
|
|
|
.card .card-text {
|
|
margin:0;
|
|
left: 40%;
|
|
top: 34px;
|
|
}
|
|
|
|
.card .card-text p:first-child{
|
|
margin-top:0px;
|
|
}
|
|
|
|
.card .card-text{
|
|
padding:10px;
|
|
}
|
|
|
|
.card .card-text:after{
|
|
content:'';
|
|
display:block;
|
|
clear:both;
|
|
}
|
|
|
|
.card .card-image{
|
|
width: 40%;
|
|
padding: 10px;
|
|
position:relative;
|
|
float:left;
|
|
}
|
|
|
|
.card img{
|
|
width:80%;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
padding:10px;
|
|
background: #d4d4fb;
|
|
border: solid 1px #dec8e2;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
}
|
|
|
|
.card p, .card a, .card button:global(.buttonLink){
|
|
font-family: inherit;
|
|
color:black;
|
|
opacity:.87;
|
|
}
|
|
|
|
.card .card-details{
|
|
font-family: 'Cormorant SC', serif;
|
|
list-style:none;
|
|
text-align:center;
|
|
margin-top:0px;
|
|
padding:0;
|
|
}
|
|
|
|
.card .card-details.out-of-stock{
|
|
opacity:.54;
|
|
}
|
|
|
|
.card .card-details li a.disabled{
|
|
opacity:.54;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.card .card-details.out-of-stock li.numberInStock{
|
|
color:#5d0000
|
|
}
|
|
|
|
.card .card-details li{
|
|
display:inline-block;
|
|
margin-right:20px;
|
|
}
|
|
|
|
.card .card-details .numberInStock{
|
|
font-weight:600;
|
|
}
|
|
|
|
.card .card-details li:last-child{
|
|
margin-right:0;
|
|
}
|
|
.catalogue{
|
|
max-width:2000px;
|
|
column-count: 3;
|
|
}
|
|
|
|
@media (max-width:400px){
|
|
.card .card-image{
|
|
width:100%;
|
|
float:none;
|
|
padding:0;
|
|
display: block;
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
}
|
|
.card .card-image img{
|
|
margin: 10px;
|
|
}
|
|
}
|