diff options
| -rw-r--r-- | public/assets/js/app.js | 8 | ||||
| -rw-r--r-- | public/assets/ok.css | 88 | ||||
| -rw-r--r-- | templates/index.liquid | 2 |
3 files changed, 51 insertions, 47 deletions
diff --git a/public/assets/js/app.js b/public/assets/js/app.js index c6d31ec..a0fc05c 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -63,14 +63,14 @@ var app = (function() { } app.resize = function(){ - $(".active .cell,.active .next,.active .previous").css({ 'display': 'none' }) + $(".active .gallery .cell,.active .next,.active .gallery .previous").css({ 'display': 'none' }) $('body').addClass('resizing') debounce(function() { $(".active.item").addClass("hidden") setTimeout(function(){ - $(".active .cell,.active .next,.active .previous").css({ 'height': ($(".active .top").height() + 'px'), 'display': 'inline-block' }) + $(".active .gallery.cell,.active .gallery .next,.active .gallery .previous").css({ 'height': ($(".active .gallery.top").height() + 'px'), 'display': 'inline-block' }) app.view.$el.removeClass("hidden") - $('.active .top').flickity('resize') + $('.active .gallery.top').flickity('resize') $('body').removeClass('resizing') }, 400) }, 400) @@ -87,7 +87,7 @@ $(".top").each(function(i){ $(".cell", this).css({ 'height': (height + 'px') }) }) -$('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) { +$('.gallery.top').flickity(app.flickity_options).on( 'cellSelect', function(e) { var gallery = $(e.target).data('flickity') app.header.updateSlideNumber( gallery.selectedIndex ) }) 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; diff --git a/templates/index.liquid b/templates/index.liquid index 4cebc42..323a982 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -113,7 +113,7 @@ </div> {% for project in projects %} <div class="item" data-id="{{ project.id }}"> - <div class="top"> + <div class="top {% if project.media[2] %}gallery{% endif %}"> {% for media in project.media %} {% if media.type == 'image' %} <div class="cell" style="background-image:url({{ media.uri }}); {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div> |