expanding log

log.css

[data-tags~="show-log"] #passages {
  margin-bottom: 5em;
}

#log {
  position: fixed;
  height: 4em;
  padding: 1em 4em 0 4em;
  z-index: 1;
  bottom: 0;
  width: 100%;
  background: #000;
  box-shadow: 0 0 6px #000;
  border-top: 1px solid #555;
  overflow: hidden;
  transition: height 250ms;
}

#log div {
  margin: auto;
  max-width: 50%;
}

#log div p {
  margin: 0.2em 0;
  padding: 0;
}

#log.open {
  height: 40rem;
  max-height: 80%;
  overflow: auto hidden;
}

#log::after {
  content: '';
  width: 100%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,1));
  display: block;
  position: absolute;
  height: 3em;
  bottom: 0;
}
  
#log.open::after {
  display: none;
}

@media only screen and (max-width: 900px) {
  #log div {
    max-width: 90%;
  }
}

log.js

$(document).on(':passagestart', function (ev) {
    if (ev.passage.tags.includes('show-log') && !($('#log')[0])) {
        $(document.body).append($(document.createElement('div')).attr('id', 'log').ariaClick({ title : "Expand" }, function () {
            $(this).toggleClass('open');
        })
        .append(document.createElement('div')));
    } else {
        $('#log')[0] && $('#log').remove();
    }
});

function logMe (content) {
    $('#log div').prepend($(document.createElement('p')).wiki(content));
}

Macro.add('log', {
    tags: null,
    handler: function () {
        logMe(this.payload[0].contents);
    }
});