story-content: Added edit story modal, added toggle component.

marko/components/modal/style.less

@@ -23,7 +23,9 @@ div.overlay {
     label {
       display: block;
       margin-top: 1em;
+      margin-left: 0.5ch;
       font-size: 0.75em;
+      opacity: 0.5;
     }
   
     input {

marko/components/toggle/component.js

@@ -0,0 +1,7 @@
+module.exports = class {
+  set(value) {
+    if (value !== this.input.value) {
+      this.emit("change", {target: {value}})
+    }
+  }
+}

marko/components/toggle/index.marko

@@ -0,0 +1,7 @@
+<div class="toggle">
+  <div class="toggle-pill color-primary">
+    <a on-click("set", false) class=["toggle-option", !input.value ? "color-highlight-primary" : "color-primary"]>${input.off}</a>
+    <a on-click("set", true) class=["toggle-option", input.value ? "color-highlight-primary" : "color-primary"]>${input.on}</a>
+  </div>
+  <div class="toggle-content color-text">${input.value ? input.onDesc : input.offDesc}</div>
+</div>

marko/components/toggle/style.less

@@ -0,0 +1,27 @@
+div.toggle {
+  div.toggle-pill {
+    display: inline-block;
+    margin: 0.5em;
+    margin-bottom: 0;
+
+    a.toggle-option {
+      padding: 0.125em 0.5ch;
+      display: inline-block;
+      width: 8ch;
+      text-align: center;
+      outline: 0.5px dotted;
+      cursor: pointer;
+      opacity: 0.75;
+    }
+    a.toggle-option.color-highlight-primary {
+      outline: 1px solid;
+    }
+    a.toggle-option:hover {
+      opacity: 1;
+    }
+  }
+
+  div.toggle-content {
+    display: inline-block;
+  }
+}