59 lines
949 B
SCSS
59 lines
949 B
SCSS
.personnel {
|
|
|
|
.filters {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
margin-bottom: 4em;
|
|
|
|
.button {
|
|
padding: .5em 1.5em;
|
|
font-weight: bold;
|
|
border: 2px solid $col-bg-2-light;
|
|
border-radius: .3em;
|
|
cursor: pointer;
|
|
transition: all .2s ease-out;
|
|
|
|
&:hover, &.active {
|
|
border-color: $col-bg-3-dark;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
border-color: $col-bg-2-light;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
border-color: $col-bg-3-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
.person {
|
|
text-align: center;
|
|
transition: opacity .5s ease-out;
|
|
|
|
img {
|
|
display: block;
|
|
border-radius: 1em;
|
|
margin-bottom: 1em;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.name {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.hidden {
|
|
opacity: .1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $width-mobile) {
|
|
.personnel .person img {
|
|
margin-bottom: .5em;
|
|
}
|
|
}
|