diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/nav')
3 files changed, 52 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js new file mode 100644 index 0000000..8d04e8b --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js @@ -0,0 +1,21 @@ +import React from 'react' + +const EfluxChrome = React.memo(() => ( + <div className="eflux-header"> + <div className="eflux-logo"> + <a href="/"> + <img src="/static/img/elements/e-flux-logo.svg" /> + </a> + </div> + <div className="eflux-nav"> + <a href="/"> + <img src="/static/img/elements/close.svg" /> + </a> + <a href="/"> + <img src="/static/img/elements/menu.svg" /> + </a> + </div> + </div> +)) + +export default EfluxChrome diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css new file mode 100644 index 0000000..2dbd0be --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/eflux.css @@ -0,0 +1,24 @@ +.eflux-header { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 2; +} +.eflux-logo { + position: absolute; + top: 20px; + left: 28px; +} +.eflux-logo img { + height: 28px; +} +.eflux-nav { + position: absolute; + top: 23px; + right: 32px; +} +.eflux-nav img { + height: 20px; + margin-left: 34px; +} diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 5c62b03..b28996a 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -4,16 +4,23 @@ left: 0; width: 100%; font-size: 18px; + transition: all 0.2s; } .main-nav { transition: all 0.2s; transform: translateZ(0) translateY(0); + border-top: 1px solid transparent; } .sections-open .main-nav { transform: translateZ(0) translateY(-22rem); + border-top: 1px solid #fff; background: black; color: white; } +.transcript-open .viewer-nav { + width: calc(100vw - 31.875rem); +} + /* The main nav row */ |
