grav-theme-libretic/scss/template/modular/_team.scss

86 lines
2.2 KiB
SCSS

// variables
$module-bg: #EEEEEE;
// styling
.team {
background: $module-bg;
padding: 4rem 0;
text-align: center;
@include clearfix;
h2 {
color: $light-gray;
margin: 0;
line-height: 100%;
}
p {
margin: 1rem 0;
}
.members {
width: 100%;
text-align: left;
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
.member {
display: inline-block;
float: left;
width: 29%;
margin: 0 1rem;
margin-bottom: 2rem;
@include breakpoint(mobile-only) {
display: block;
width: 100%;
text-align: center;
margin: 0;
margin-bottom: 2rem;
}
@include breakpoint(tablet-range) {
display: block;
width: 44%;
margin-bottom: 2rem;
}
h4 {
text-align: left;
margin-bottom: 0;
@include breakpoint(mobile-only) {
text-align: center;
}
}
hr {
margin: 1rem 0;
}
}
.social-icons {
line-height: 2rem;
margin: 0;
list-style: none;
@include breakpoint(mobile-only) {
text-align: center;
display: inline-flex;
}
li {
@extend .default-animation;
float: left;
width: 2.1rem;
height: 2.1rem;
background: $white;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem;
a {
@extend .default-animation;
color: $black;
display: block;
margin-top: 0.1rem;
}
&:hover {
background: transparentize($white, 0.5);
i {
color: $core-accent;
}
}
}
}
}
}