This is the repository of my personal website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

95 lines
2.3 KiB

#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;
}
}
}
}
}