JustalK/PORTFOLIO

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

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
// Partial Meyer Reset
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
 
a {
text-decoration: none;
color: inherit;
}
 
.font-face('Lato-Light','../../fonts/Lato-Light', normal, normal);
.font-face('Lato-Bold','../../fonts/Lato-Bold', normal, normal);
.font-face('Lato-Black','../../fonts/Lato-Black', normal, normal);
.font-face(@font-name-1,'../../fonts/Lato-LightItalic', normal, normal);
 
html {
font-size: 62.5%;
height: 100%;
}
 
body {
overflow-x: hidden;
height: inherit;
}
 
#app {
height: inherit;
}
 
html,
body,
#app {
margin: 0;
background-color: @background-color;
-webkit-font-smoothing: antialiased;
font-family: 'Lato-Light', sans-serif;
color: @text-color;
width: 100%;
}
 
#PROJECT,
#PORTFOLIO,
#RESUME {
&::before,
&::after {
content: ' ';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
z-index: @LAYER-ANIMATION;
}
 
&::before {
.transition(all 0.6s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
background: @background-color-transition-d;
opacity: 0.7;
}
 
&::after {
.transition(all 1s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
background: @background-color-transition-l;
}
 
&.unmounted {
&::before,
&::after {
width: 100%;
}
}
}