#projects {
|
|
|
|
.wrapper {
|
|
// Position
|
|
margin-top: 25px;
|
|
|
|
// Grid
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 50px;
|
|
|
|
// Responsive Design
|
|
@include media("max-width", "large") {
|
|
// Grid
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
// Responsive Design
|
|
@include media("max-width", "almost-medium") {
|
|
// Grid
|
|
grid-template-columns: none;
|
|
}
|
|
|
|
.project {
|
|
// Size
|
|
min-height: 350px;
|
|
border-radius: 4px;
|
|
|
|
// Flexbox
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
|
|
// Visual
|
|
background-color: #ffffff;
|
|
@include materialShadow(1, false);
|
|
|
|
@for $i from 1 through length($gradients) {
|
|
&:nth-child(#{length($gradients)}n+#{$i}) {
|
|
.button {
|
|
@include gradient(
|
|
map-get(nth($gradients, $i), "colorA"),
|
|
map-get(nth($gradients, $i), "colorB")
|
|
);
|
|
|
|
@if nth($gradients, $i) == $yellow-gradient {
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
// Position
|
|
padding: 35px;
|
|
|
|
p {
|
|
// Position
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
// Size
|
|
margin: 15px 15px 20px 15px;
|
|
padding: 20px 50px;
|
|
border-radius: 40px;
|
|
|
|
// Visual
|
|
color: #fff;
|
|
@include materialShadow(2, true);
|
|
|
|
font-family: $ibm-plex-sans;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
@include materialShadow(3, false);
|
|
}
|
|
|
|
&:active {
|
|
// Visual
|
|
@include materialShadow(2, false);
|
|
}
|
|
|
|
&:focus {
|
|
// Visual
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|