stubbed in modal dialog

app/templates/modal/index.js

@@ -0,0 +1,15 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  return html`
+  <div class="modal" onclick=${close}>
+    <div class="modal__box" onclick=${e => e.stopPropagation()}>
+      ${state.modal(state, close)}
+    </div>
+  </div>`;
+
+  function close(event) {
+    state.modal = null;
+    emit('render');
+  }
+};

app/templates/modal/modal.css

@@ -0,0 +1,22 @@
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.7);
+  animation: fade-in 0.5s forwards;
+}
+
+.modal__box {
+  max-width: 480px;
+  max-height: 300px;
+  background: var(--pageBGColor);
+  border-radius: 4px;
+  color: var(--textColor);
+}