More actions
No edit summary |
No edit summary |
||
(29 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
.equipment-card { | .equipment-card { | ||
border: 0; | border: 0; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
display: inline-table; | display: inline-table; | ||
margin: 2px; | margin: 1px 2px 4px 0px; | ||
border-radius: 6px; | |||
} | } | ||
.equipment-card:hover { | .equipment-card:hover { | ||
box-shadow: 0px 0px 0px 2px #f7bb2b | |||
} | } | ||
Line 14: | Line 14: | ||
width: 100px; | width: 100px; | ||
color: #ffffff; | color: #ffffff; | ||
background-color: | background-color: var(--color-pill); | ||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif; | font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif; | ||
font-weight: bold; | font-weight: bold; | ||
font-size: | font-size: 0.95em; | ||
font-style: italic; | font-style: italic; | ||
border-radius: 0 0 6px 6px; | border-radius: 0 0 6px 6px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
overflow: hidden; | overflow: hidden; | ||
} | |||
.equipment-card__label a { | |||
text-decoration: none; | |||
color: #fff; | |||
display: flex; | |||
justify-content: center; | |||
width: 100%; | |||
} | } | ||
.equipment-card__background { | .equipment-card__background { | ||
background: linear-gradient( | background: linear-gradient(#808b9a, #d5e2e6); | ||
border-radius: 6px 6px 0 0; | border-radius: 6px 6px 0 0; | ||
} | } | ||
Line 32: | Line 42: | ||
.equipment-card__background img { | .equipment-card__background img { | ||
width: 100px; | width: 100px; | ||
height: | height: 100%; | ||
object-position: center; | object-position: center; | ||
object-fit: contain; | |||
border-radius: 6px 6px 0 0; | |||
} | |||
@media only screen and (max-width: 640px) { | |||
.equipment-card__label { | |||
width: 95px; | |||
font-size: 15px; | |||
} | |||
.equipment-card__background img { | |||
height: 105px; | |||
width: 95px; | |||
} | |||
} | } |
Latest revision as of 07:14, 17 December 2024
.equipment-card {
border: 0;
transition: all 0.3s ease;
display: inline-table;
margin: 1px 2px 4px 0px;
border-radius: 6px;
}
.equipment-card:hover {
box-shadow: 0px 0px 0px 2px #f7bb2b
}
.equipment-card__label {
width: 100px;
color: #ffffff;
background-color: var(--color-pill);
display:flex;
align-items:center;
justify-content:center;
font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
font-weight: bold;
font-size: 0.95em;
font-style: italic;
border-radius: 0 0 6px 6px;
text-transform: uppercase;
overflow: hidden;
}
.equipment-card__label a {
text-decoration: none;
color: #fff;
display: flex;
justify-content: center;
width: 100%;
}
.equipment-card__background {
background: linear-gradient(#808b9a, #d5e2e6);
border-radius: 6px 6px 0 0;
}
.equipment-card__background img {
width: 100px;
height: 100%;
object-position: center;
object-fit: contain;
border-radius: 6px 6px 0 0;
}
@media only screen and (max-width: 640px) {
.equipment-card__label {
width: 95px;
font-size: 15px;
}
.equipment-card__background img {
height: 105px;
width: 95px;
}
}