forked from CRSS/Website
94 lines
1.6 KiB
SCSS
94 lines
1.6 KiB
SCSS
|
@import 'variables.module';
|
||
|
@import 'global.module';
|
||
|
|
||
|
.teamList {
|
||
|
display: grid;
|
||
|
|
||
|
gap: 1rem;
|
||
|
|
||
|
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||
|
|
||
|
> .teamCard {
|
||
|
padding: 0;
|
||
|
|
||
|
width: 100%;
|
||
|
|
||
|
> .memberBanner {
|
||
|
position: relative;
|
||
|
|
||
|
height: 150px;
|
||
|
|
||
|
background: #537f53;
|
||
|
|
||
|
border-top-left-radius: calc(1rem - 1px);
|
||
|
border-top-right-radius: calc(1rem - 1px);
|
||
|
|
||
|
> img {
|
||
|
position: absolute;
|
||
|
|
||
|
bottom: -52px;
|
||
|
left: 16px;
|
||
|
|
||
|
border: 4px solid $colorSurfaceLight2;
|
||
|
border-radius: 1rem;
|
||
|
|
||
|
@media (prefers-color-scheme: dark) {
|
||
|
border-color: $colorSurfaceDark2;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&[data-has-background] {
|
||
|
background: var(--background);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
> .memberContent {
|
||
|
padding: 1rem;
|
||
|
|
||
|
> .memberLinks {
|
||
|
display: flex;
|
||
|
|
||
|
justify-content: end;
|
||
|
align-items: end;
|
||
|
|
||
|
gap: .5rem;
|
||
|
|
||
|
list-style: none;
|
||
|
|
||
|
margin: 0 0 .5rem;
|
||
|
|
||
|
> li {
|
||
|
> a {
|
||
|
display: flex;
|
||
|
|
||
|
align-items: center;
|
||
|
|
||
|
padding: 4px;
|
||
|
|
||
|
color: $colorBorderLight3;
|
||
|
|
||
|
&:hover {
|
||
|
color: $colorPrimary;
|
||
|
}
|
||
|
|
||
|
@media (prefers-color-scheme: dark) {
|
||
|
color: $colorBorderDark3;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
> h3 {
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 992px) {
|
||
|
grid-template-columns: repeat(2, minmax(200px, 1fr));
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
grid-template-columns: 1fr;
|
||
|
}
|
||
|
}
|