diff options
Diffstat (limited to 'public/assets/ok.css')
| -rw-r--r-- | public/assets/ok.css | 88 |
1 files changed, 46 insertions, 42 deletions
diff --git a/public/assets/ok.css b/public/assets/ok.css index 95f5f95..1964120 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -26,7 +26,7 @@ a:visited { color: blue; font-weight: bold; font-size: 11px; - cursor:pointer; + cursor: pointer; } body { @@ -39,15 +39,17 @@ body { .hidden { display: none!important; } + .item.hidden { display: block; opacity: 0; pointer-events: none; } + .item { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; } h1 { @@ -117,19 +119,23 @@ h3 { -webkit-filter: grayscale(100%); filter: grayscale(100%); } + .intro.cover .left span#cred { width: 100%; border-top: 1px solid; padding: 15px 0 10px 0; } + .intro.cover .left small { - display:none; + display: none; } + .intro.cover .right { background: url(https://upload.wikimedia.org/wikipedia/commons/d/de/Victoria_crater_from_HiRise.jpg)no-repeat center; background-size: cover; - width:75%; + width: 75%; } + .menu { position: fixed; height: 100vh; @@ -154,8 +160,7 @@ h3 { } .menu ul { - height:100%; - + height: 100%; } .menu ul li { @@ -185,49 +190,50 @@ h3 { /*opacity:0.5;*/ background: black; } + nav svg g g rect { - transition:150ms transform 50ms cubic-bezier(0, 0, 0, 1); + transition: 150ms transform 50ms cubic-bezier(0, 0, 0, 1); width: 100px; } - -nav svg g g:first-child rect{ +nav svg g g:first-child rect { transform: rotate(0deg); transform-origin: center; } -nav svg g g:nth-child(2) rect{ - opacity:1; +nav svg g g:nth-child(2) rect { + opacity: 1; } -nav svg g g:last-child rect{ +nav svg g g:last-child rect { transform: rotate(0deg); transform-origin: center; } - - -.navopen nav svg g g:first-child rect{ +.navopen nav svg g g:first-child rect { transform: rotate(45deg); transform-origin: center; width: 100px; } -.navopen nav svg g g:nth-child(2) rect{ - opacity:0; +.navopen nav svg g g:nth-child(2) rect { + opacity: 0; } -.navopen nav svg g g:last-child rect{ +.navopen nav svg g g:last-child rect { transform: rotate(-45deg); transform-origin: center; width: 100px; } +.navopen .item { + cursor: url(img/x-w.png) 32 32, pointer; +} + .navopen .item > * { opacity: 0.1; transition: 150ms opacity cubic-bezier(0, 0, 0, 1); background: #eee; - cursor: url(img/x-w.png) 32 32, pointer; } div, @@ -351,7 +357,7 @@ nav span div:last-child { } .top { - background: #f7f7f7; + background: #f9f9f9; width: 100%; /*height: 80vh;*/ flex: 1 auto; @@ -363,25 +369,26 @@ nav b { font-weight: normal; } + /*animations*/ .bottom { - float: none; + float: none; } - .up .showing.item { - transform:translateY(-10px); - opacity:0; - background:white; + transform: translateY(-10px); + opacity: 0; + background: white; } -.down .showing.item { - transform:translateY(10px); - opacity:0; - background:white; +.down .showing.item { + transform: translateY(10px); + opacity: 0; + background: white; } + /* Flickity */ .flickity-enabled { @@ -401,13 +408,12 @@ nav b { cursor: url(img/u.png) 32 0, pointer; } - .page-down { height: 20vw; width: 60vw; position: absolute; z-index: 3; - bottom:0; + bottom: 0; left: 0; margin-left: 20vw; cursor: url(img/d.png)32 64, pointer; @@ -431,8 +437,7 @@ button { background: transparent; } -.navopen button, -.navopen iframe.cell { +.navopen .item * { pointer-events: none; } @@ -550,7 +555,7 @@ ul li { } .press ul { - cursor:default; + cursor: default; height: 100% } @@ -559,7 +564,6 @@ ul li { } @media (min-width: 1300px) { - .texts { font-size: 13px; line-height: 16px; @@ -594,17 +598,17 @@ ul li { @media (max-width:680px) { .intro div { - width:100%!important; - height:auto; + width: 100%!important; + height: auto; } .intro.cover .left { - height:25%; + height: 25%; } .intro.cover .right { - height:75%; + height: 75%; } .intro.cover .left span#cred { - display:none; + display: none; } .intro .left { justify-content: center; |
