-artist='pawel szvmanski'

-srcs=[
-'//images.unsplash.com/photo-1538757057474-3bc6694c0801?ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80',
-'//images.unsplash.com/photo-1575848944679-ea6f12ab64cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80',
-'//images.unsplash.com/photo-1571932404401-688edf70f0fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80',
-'//images.unsplash.com/photo-1570362242196-3aa44348389b?ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80',
-'//images.unsplash.com/photo-1563954091936-36539ebb174b?ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80'
-]

-AY_PREV = 'previous page'
-AY_NEXT = 'next page'

mixin pages()
  -i=0
  while (i < srcs.length)
    section.page(id=`p${i+1}`)
      if i > 0 
        a.prev(href=`#p${i}` aria-label=AY_PREV) <
      b.curr=`${i+1} / ${srcs.length}`
      if i < srcs.length - 1
        a.next(href=`#p${i+2}` aria-label=AY_NEXT) >
      section.content
        img(src=srcs[i])
    - i++


.vp
  .info
    .artist
      | photo by 
      a(href='https://unsplash.com/@szvmanski')=`${artist}` 
  +pages()

@import url('https://fonts.googleapis.com/css?family=Baskervville&display=swap');

body {
    display:grid; width:100%; height:100vh;
    place-content:center;
    font:1em/1 'Baskervville', serif;
}

.vp {
    display:grid; width:12vw; height:80vh; min-width:33ch;
    overflow:hidden;
    grid-template:
        'page' 1fr
        'info' 2em
    ~'/' 1fr;
}

.info {
    grid-area:info;
    display:grid; place-content:center end; width:100%;
    grid-auto-flow:column;
    padding:0 1ch; box-sizing:border-box;
    color:#ccc; background:#222;
    a {
        color:inherit;
    }
}

.page {
    grid-area:page;
    display:grid; width:100%; height:100%; overflow:hidden;
    place-items:center;
    background: white;
    opacity:0; pointer-events:none;
    grid-template:
        'g1 p c n g2' 2em
        'i i i i i' 1fr
    ~'/' 1fr 5ch 8ch 5ch 1fr;
    gap: 1ch 0;
    transition:all 1s;
    
    &:target, &#p1 {
        opacity:1; pointer-events:auto;
    }
    
    // nav
    .prev { grid-area:p }
    .next { grid-area:n }
    .curr { grid-area:c }
    a {
        width:100%; height:100%;
        display:grid; place-content:center;
        background:#222; color:#ddd;
    }
    
    // content section 
    .content {
        grid-area:i;
        display:grid; width:100%; height:100%;
        img {
            width:100%; height:100%; object-fit:cover;
            background:#222;
        }
    } 
}