diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss index 061a38f..dee5585 100644 --- a/src/css/layout/_nav.scss +++ b/src/css/layout/_nav.scss @@ -25,9 +25,49 @@ opacity: 0; position: fixed; color: _palette(white); - bottom: 100%; - right: 100%; - margin: 0 -50% -50% 0; + bottom: 100vh; + right: 0; + left: 0; + margin: 0 auto -50vh; + + li { + transform: translate3d(0,0,0); + margin: 0 40%; + &:before { + @include vendor('transition', ( + 'width #{_duration(transition)} ease', + )); + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + background-color: _palette(white); + width: 0; + } + &:after { + opacity: 0; + content: attr(data-text); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + color: _palette(menu); + } + &:hover { + &:before { + left: 0; + right: auto; + width: 100%; + } + &:after { + opacity: 1; + } + } + } } > span { @@ -71,7 +111,9 @@ cursor: pointer; height: 80px; padding: 10px 23.1px; - left: calc(50% - 60px); + left: 0; + right: 0; + margin: auto; &:hover { @include vendor('filter', 'grayscale(0)'); @@ -156,7 +198,6 @@ > a > #logo > img { height: 60px; padding: 7.5px 17.3px; - left: calc(50% - 45px); } > #menuToggle { diff --git a/src/css/libs/_vars.scss b/src/css/libs/_vars.scss index 0d12c53..f4e02c3 100644 --- a/src/css/libs/_vars.scss +++ b/src/css/libs/_vars.scss @@ -34,7 +34,7 @@ menu: #0e0e0e, white: #ffffff, bg: #f2f2f2, - + /* bg: #935d8c, fg: rgba(255,255,255,0.65), diff --git a/src/index.html b/src/index.html index baf9ac2..09fb7ae 100644 --- a/src/index.html +++ b/src/index.html @@ -50,10 +50,10 @@