JustalK/PORTFOLIO

View on GitHub
src/assets/less/project.less

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
#PROJECT {
position: relative;
overflow: hidden;
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1) 1.5s);
 
&.locked {
pointer-events: none;
}
 
& > div {
margin: auto;
max-width: 1200px;
width: 100%;
position: relative;
}
 
& .text {
opacity: 1;
 
&::before,
&::after {
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
}
}
 
&.invisible {
opacity: 0;
}
}
 
@media screen and (max-width: @SCREEN_1800) {
#PROJECT > div {
max-width: 1200px;
}
}
 
@media screen and (max-width: @SCREEN_1500) {
#PROJECT > div {
max-width: 1000px;
}
}
 
@media screen and (max-width: @SCREEN_1400) {
#PROJECT > div {
max-width: 900px;
}
}
 
@media screen and (max-width: @SCREEN_1200) {
#PROJECT > div {
max-width: 800px;
}
}
 
@media screen and (max-width: @SCREEN_1100) {
#PROJECT > div {
max-width: 700px;
}
}
 
@media screen and (max-width: @SCREEN_900) {
#PROJECT > div {
width: 90%;
margin: auto;
}
}