src/assets/less/resume.less
@import (reference) "libs/constants.less";@import (reference) "libs/mixins.less"; #SVG_EFFECT { display: none;} .options { position: relative; padding: 10px 0 20px 0; display: flex; align-items: normal; flex-wrap: wrap; &-option { font-family: 'Lato-Bold', sans-serif; .font-size(1.2); .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); display: block !important; padding: 10px; margin-right: 10px; margin-bottom: 10px; user-select: none; cursor: pointer; color: @background-bloc-0; background: white; border: 1px solid @background-shadow; min-width: 50px; text-align: center; position: relative; overflow: hidden; &-linkedin { position: absolute; right: 0; } & span { position: relative; pointer-events: none; z-index: @LAYER-COUCHE-1; } &.invisible { opacity: 0; } &.desactivate { pointer-events: none; } &.desactivate:not(&--active) { opacity: 0.2; } &::before { content: ' '; position: absolute; background: #1d1d23; top: 0; left: 0; width: 100%; height: 100%; .transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1)); } &--active { background: @text-color; color: @text-color-white; box-shadow: none; opacity: 1; } } &.mounted { & .tags-tag { opacity: 1; } }} @media screen and (min-width: @SCREEN_900) { .options { &-option { &:hover { color: @text-color-white; background: @background-bloc-0; box-shadow: none; &::before { filter: url('#wave'); } } &--active { &::before { background: @text-color; } } } }} #RESUME { position: relative; overflow: hidden; & > canvas { position: absolute; top: 0; } & .mask { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; max-width: initial; background: linear-gradient(0deg, rgba(17, 17, 22, 1) 19%, rgba(0, 0, 0, 0) 100%); } &.locked { pointer-events: none; } & h1 { padding-top: 100px; margin: 0; color: @text-color-white; text-transform: uppercase; .font-size(5); } & > div { margin: auto; max-width: 1200px; width: 100%; position: relative; z-index: 1; & > span { margin: 20px 0 20px; text-align: justify; .font-size(2); } } & iframe { height: 1460px; width: 100%; opacity: 1; border: 1px solid #000; .transition(all 0.4s cubic-bezier(0.87, 0.32, 0.81, 0.36)); &.invisible { opacity: 0; } }} @media screen and (max-width: @SCREEN_1800) { #RESUME > div { max-width: 1200px; }} @media screen and (max-width: @SCREEN_1500) { #RESUME > div { max-width: 1000px; }} @media screen and (max-width: @SCREEN_1400) { #RESUME { & > div { max-width: 900px; } & iframe { height: 1270px; } }} @media screen and (max-width: @SCREEN_1200) { #RESUME { & > div { max-width: 800px; } & iframe { height: 1140px; } }} @media screen and (max-width: @SCREEN_1100) { #RESUME { & > div { max-width: 600px; } & iframe { height: 850px; } }} @media screen and (max-width: @SCREEN_900) { #RESUME { & > div { width: 90%; margin: auto; } & h1 { padding-top: 135px; text-align: center; .font-size(6); } & iframe { height: 500px; } & span:nth-child(3) { .font-size(2); } & .options-option-linkedin { position: relative; right: unset; } }}