diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/js/app.js | 5 | ||||
| -rw-r--r-- | public/assets/ok.css | 89 |
2 files changed, 72 insertions, 22 deletions
diff --git a/public/assets/js/app.js b/public/assets/js/app.js index b38d151..aa6fef6 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -38,9 +38,6 @@ var app = (function() { })() -// app.init() - - $(".cell, .next").css({ 'height': ($(".top").height() + 'px') }); $('.top').flickity({ @@ -87,3 +84,5 @@ $(window).resize(function() { $('body').removeClass('resizing'); }, 400); }) + +// app.init() diff --git a/public/assets/ok.css b/public/assets/ok.css index 113b43e..ee7282b 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -52,8 +52,8 @@ body { -moz-column-gap: 3px; column-gap: 3px; -webkit-column-break-inside: avoid; - -moz-column-break-inside:avoid; - -moz-page-break-inside:avoid; + -moz-column-break-inside: avoid; + -moz-page-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; } @@ -68,10 +68,10 @@ menu ul { border-bottom: 1px solid; padding-bottom: 4px; padding-top: 6px; - font-size:14px; + font-size: 14px; } -.menu ul li:hover { +.desktop .menu ul li:hover { background: black; color: white; cursor: pointer; @@ -87,6 +87,14 @@ menu ul { .navopen .item { transform: translateX(50vw); /*opacity:0.5;*/ + background: black; +} + +.navopen .item .top, +.navopen .item .bottom { + opacity: 0.1; + transition: 150ms opacity cubic-bezier(0, 0, 0, 1); + background: #eee; } div, @@ -131,12 +139,31 @@ nav span { vertical-align: top; padding: 2px; } + .index { + width: 60px; + transition: 150ms width; + transition-timing-function: cubic-bezier(0, 0, 0, 1); } + +.navopen .index { + width: 50vw; +} + +nav span div:last-child { + transition: 150ms all; +} + +.navopen nav span div:last-child { + transform: translateX(110px); + transition: 150ms all; + position: absolute; + right: 5px; +} + .index:after { content: "INDEX"; - padding-right: 5px; - + padding-right: 5px; } .navopen .index:after { @@ -185,6 +212,7 @@ nav b { font-weight: normal; } + /* Flickity */ .flickity-enabled { @@ -215,13 +243,13 @@ button { } .navopen button { - pointer-events:none; + pointer-events: none; } button svg { opacity: 0; transition: 150ms all; - transition-timing-function: cubic-bezier(0, 0, 1, 1); + transition-timing-function: cubic-bezier(0, 0, 0, 1); transform: scale(0.3); } @@ -233,8 +261,8 @@ button.previous { left: 0; } -button.previous:hover svg, -button.next:hover svg { +.desktop button.previous:hover svg, +.desktop button.next:hover svg { opacity: 1; transform: scale(0.2); } @@ -244,8 +272,6 @@ button.previous:active svg { transform: scale(0.1); } - - .cell { width: 100vw; /*THIS SHOULD BE DYNAMIC*/ @@ -339,13 +365,14 @@ ul li { @media (min-width: 1300px) { .bottom { - padding:7px 0 8px 0; + padding: 7px 0 8px 0; } .texts { font-size: 13px; line-height: 16px; } - .headings, nav { + .headings, + nav { font-size: 9px; } } @@ -379,7 +406,7 @@ ul li { font-weight: 400; } nav span div:first-child { - font-size: 0; + font-weight: bold } nav span { border: 0; @@ -387,17 +414,30 @@ ul li { nav img { width: 12px; } - nav span div:nth-child(2) { + nav span div:nth-child(2), + .five span:nth-child(4) { display: none; } - + .texts { + padding: 3px 5px; + } + .five span:nth-child(2), + .five span:nth-child(3) { + width: calc(50% - 2.5px); + } + .five span:nth-child(3) { + margin-left: 5px; + } .five span { - width: 50%; + width: 100%; border-bottom: 1px solid; margin: 0; - padding: 3px; + padding: 3px 0 2px 0; font-weight: 600; } + iframe.cell { + pointer-events: none; + } .five span.description { width: 100%!important; font-weight: 400; @@ -412,6 +452,17 @@ ul li { #burger { width: 22px; } + .index { + width: 10vw; + } + .index:after, + .navopen .index:after { + content: ""; + padding-right: 0; + } + .navopen .index { + width: 90vw; + } .menu { width: 90vw; transform: translateX(-90vw); |