kocandaci/sass/_personnel.scss

59 lines
949 B
SCSS
Raw Normal View History

2024-01-11 18:10:51 +01:00
.personnel {
2024-01-11 18:18:53 +01:00
2024-01-11 19:25:02 +01:00
.filters {
display: flex;
justify-content: center;
gap: 1em;
2024-01-11 22:08:33 +01:00
margin-bottom: 4em;
2024-01-11 19:25:02 +01:00
.button {
padding: .5em 1.5em;
font-weight: bold;
2024-01-11 21:50:40 +01:00
border: 2px solid $col-bg-2-light;
border-radius: .3em;
2024-01-11 19:25:02 +01:00
cursor: pointer;
2024-01-11 21:50:40 +01:00
transition: all .2s ease-out;
2024-01-11 19:25:02 +01:00
&:hover, &.active {
2024-01-11 21:50:40 +01:00
border-color: $col-bg-3-dark;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
2024-01-11 19:34:09 +01:00
@media (prefers-color-scheme: dark) {
2024-01-11 21:50:40 +01:00
border-color: $col-bg-2-light;
2024-01-11 19:34:09 +01:00
}
}
@media (prefers-color-scheme: dark) {
2024-01-11 21:50:40 +01:00
border-color: $col-bg-3-dark;
2024-01-11 19:25:02 +01:00
}
}
}
2024-01-11 18:10:51 +01:00
.person {
text-align: center;
2024-01-11 19:25:02 +01:00
transition: opacity .5s ease-out;
2024-01-11 18:10:51 +01:00
img {
2024-01-12 01:09:40 +01:00
display: block;
2024-01-11 18:10:51 +01:00
border-radius: 1em;
margin-bottom: 1em;
2024-01-11 19:25:02 +01:00
box-shadow: 0 0 15px rgba(0,0,0,0.3);
2024-01-11 18:10:51 +01:00
}
.name {
2024-01-11 22:08:33 +01:00
font-size: 1.1em;
2024-01-11 18:10:51 +01:00
font-weight: bold;
}
2024-01-11 19:25:02 +01:00
&.hidden {
2024-01-11 22:08:33 +01:00
opacity: .1;
2024-01-11 19:25:02 +01:00
}
2024-01-11 18:10:51 +01:00
}
}
2024-01-11 18:18:53 +01:00
@media only screen and (max-width: $width-mobile) {
2024-01-12 01:09:40 +01:00
.personnel .person img {
margin-bottom: .5em;
}
2024-01-11 18:18:53 +01:00
}