book.yml

# - title:
#   subtitle:
#   author:
#   img: https://images-na.ssl-images-amazon.com/images/P/#.01._SCLZZZZZZZ_.jpg
#   url:
#   rating:
#   notes:
- year: 2018
  books:
  - title: Showa 1953-1989
    subtitle: A History of Japan
    author: Shigeru Mizuki
    img: https://images-na.ssl-images-amazon.com/images/P/1770462015.01._SCLZZZZZZZ_.jpg
    url: https://www.amazon.com/Showa-1953-1989-History-Japan/dp/1770462015/
    rating: (In Progress)
    notes: 
  - title: Going Offline
    subtitle: 
    author: Jeremy Keith
    img: https://cdn.shopify.com/s/files/1/0051/7692/products/aba-cover-26_100x@3x.png?v=1501539475
    url: https://abookapart.com/products/going-offline
    rating: Parti Pris
    notes: While I know about PWAs and have built PWAs and have given talks on PWAs, I wanted to get Jeremy's perspective of building an offline Service Worker. He's such a good explainer of things and he filled the gaps on Offline Experiences and Service Worker capabilities that I had never put together.

# ...

bookshelf.html

--- 
title: Bookshelf
layout: default 
---

<div class="bookshelf">
    {% for year in site.data.books %}
    <h1 class="year">{{ year.year }}</h1>
    <div class="books">
        {% for book in year.books %}
        <div class="book">
            <a href="{{ book.url }}" aria-label="Buy {{ book.title }}">
                <img src="{{ book.img }}" alt="">
            </a>
            <h2>{{ book.title }}</h2>
            {% if book.title %}<p>{{ book.subtitle }}</p>{% endif %}
            <p>{{ book.author }}</p>
            {% if book.notes %}
            <details>
                <summary>{{ book.rating }}</summary>
                <div class="notes">{{ book.notes | markdownify }}</div>
            </details>
            {% else %}
            {% if book.rating %}<p>{{ book.rating }}</p>{% endif %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>

<style>
    .year {
        margin-bottom: 1.5em;
    }

    .books + .year {
        margin-top: 3em;
    }

    .bookshelf {
        margin: 0 var(--pad);
        position: relative;
    }

    .books {
        display: grid;
        grid-gap: calc(1em + 2vw);
        grid-template-columns: 1fr 1fr;

        font-size: 0.875em;
        margin-bottom: calc(1em + 2vw);
        line-height: 1.2;
    }

    .book img {
        height: 200px;
        object-fit: contain;
    }

    @media (min-width: 30em) {
        .books {
            grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));

        }
        .book img {
            height: 270px;
        }
    }

    .book > *+* {
        margin-top: 0.5em;
    }

    .book details {
        display: block;
        position: relative;
    }
    .book details > div {
        top: 100%;
        position: absolute;
        z-index:1;
        background: var(--bg);
        padding: 1.5em 0.5em 0.5em;
        border: 1px solid var(--border);
        margin: -1.5em -0.5em;
    }
    

    details > summary {
        cursor: pointer;
        position: relative;
        outline: 0;
    }

    details > *:not(summary) {
        display: none;
        animation: fadeIn 0.2s ease-out;
    }

    details[open] > summary {
        z-index: 2;
    }

    details[open] > *:not(summary) {
        display: block;
    }

    @keyframes fadeIn {
        0% { opacity: 0; transform: scale( 0.9 ) }
        100% { opacity: 1; transform: scale( 1 ); }
    }
</style>

<script>
/*
Details Element Polyfill 2.0.0
Copyright © 2017 Javan Makhmali
 */
(function(){}).call(this),function(){var t,e,n,r,u,o,i,a,s,l,c,d;l={element:function(){var t,e,n,r,u;return e=document.createElement("details"),"open"in e?(e.innerHTML="<summary>a</summary>b",e.setAttribute("style","position: absolute; left: -9999px"),r=null!=(u=document.body)?u:document.documentElement,r.appendChild(e),t=e.offsetHeight,e.open=!0,n=e.offsetHeight,r.removeChild(e),t!==n):!1}(),toggleEvent:function(){var t;return t=document.createElement("details"),"ontoggle"in t}()},l.element&&l.toggleEvent||(i=function(){return document.head.insertAdjacentHTML("afterbegin",'<style>@charset"UTF-8";details:not([open])>*:not(summary){display:none;}details>summary{display:block;}details>summary::before{content:"\u25ba";padding-right:0.3rem;font-size:0.6rem;cursor:default;}details[open]>summary::before{content:"\u25bc";}</style>')},o=function(){var t,e,n,r,u;return t=document.createElement("details").constructor.prototype,r=t.setAttribute,n=t.removeAttribute,u=null!=(e=Object.getOwnPropertyDescriptor(t,"open"))?e.set:void 0,Object.defineProperties(t,{open:{set:function(t){return"DETAILS"===this.tagName?(t?this.setAttribute("open",""):this.removeAttribute("open"),t):null!=u?u.call(this,t):void 0}},setAttribute:{value:function(t,e){return d(this,function(n){return function(){return r.call(n,t,e)}}(this))}},removeAttribute:{value:function(t){return d(this,function(e){return function(){return n.call(e,t)}}(this))}}})},a=function(){return r(function(t){var e;return e=t.querySelector("summary"),t.hasAttribute("open")?(t.removeAttribute("open"),e.setAttribute("aria-expanded",!1)):(t.setAttribute("open",""),e.setAttribute("aria-expanded",!0))})},u=function(){var e,n,r,u,o;for(u=document.querySelectorAll("summary"),e=0,n=u.length;n>e;e++)o=u[e],t(o);return"undefined"!=typeof MutationObserver&&null!==MutationObserver?(r=new MutationObserver(function(e){var n,r,u,i,a;for(i=[],r=0,u=e.length;u>r;r++)n=e[r].addedNodes,i.push(function(){var e,r,u;for(u=[],e=0,r=n.length;r>e;e++)a=n[e],"DETAILS"===a.tagName&&(o=a.querySelector("summary"))?u.push(t(o,a)):u.push(void 0);return u}());return i}),r.observe(document.documentElement,{subtree:!0,childList:!0})):document.addEventListener("DOMNodeInserted",function(e){return"SUMMARY"===e.target.tagName?t(e.target):void 0})},t=function(t,e){return null==e&&(e=n(t,"DETAILS")),t.setAttribute("aria-expanded",e.hasAttribute("open")),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("role")?void 0:t.setAttribute("role","button")},s=function(){var t;return"undefined"!=typeof MutationObserver&&null!==MutationObserver?(t=new MutationObserver(function(t){var e,n,r,u,o,i;for(o=[],n=0,r=t.length;r>n;n++)u=t[n],i=u.target,e=u.attributeName,"DETAILS"===i.tagName&&"open"===e?o.push(c(i)):o.push(void 0);return o}),t.observe(document.documentElement,{attributes:!0,subtree:!0})):r(function(t){var e;return e=t.getAttribute("open"),setTimeout(function(){return t.getAttribute("open")!==e?c(t):void 0},1)})},e=function(t){return!(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||t.target.isContentEditable)},r=function(t){return addEventListener("click",function(r){var u,o;return e(r)&&r.which<=1&&(u=n(r.target,"SUMMARY"))&&"DETAILS"===(null!=(o=u.parentElement)?o.tagName:void 0)?t(u.parentElement):void 0},!1),addEventListener("keydown",function(r){var u,o,i;return e(r)&&(13===(o=r.keyCode)||32===o)&&(u=n(r.target,"SUMMARY"))&&"DETAILS"===(null!=(i=u.parentElement)?i.tagName:void 0)?(t(u.parentElement),r.preventDefault()):void 0},!1)},n=function(){return"function"==typeof Element.prototype.closest?function(t,e){return t.closest(e)}:function(t,e){for(;t;){if(t.tagName===e)return t;t=t.parentElement}}}(),c=function(t){var e;return e=document.createEvent("Events"),e.initEvent("toggle",!0,!1),t.dispatchEvent(e)},d=function(t,e){var n,r;return n=t.getAttribute("open"),r=e(),t.getAttribute("open")!==n&&c(t),r},l.element||(i(),o(),a(),u()),l.element&&!l.toggleEvent&&s())}.call(this),function(){}.call(this);
</script>