*: Added media queries to make it less awful on mobile.

marko/components/content-list-item/style.less

@@ -7,6 +7,11 @@ tr.content-list-item {
     text-align: center;
     width: 2.5ch;
     outline: 0.05px solid;
+
+    @media screen and (max-width: 700px) {
+      width: 1.25ch;
+      font-size: 1.5em;
+    }    
   }
 
   > td.content {

marko/components/menu-gap/index.marko

@@ -1 +1 @@
-<div class="menu-gap"></div>
+<div class=["menu-gap", input.class]></div>

marko/components/menu-link/component.js

@@ -6,7 +6,7 @@ module.exports = class {
   }
 
   onInput(input) {
-    this.state.classes = ["menu-link", "color-menu"]
+    this.state.classes = ["menu-link", "color-menu"].concat(input.class)
 
     if (input.dark) {
       this.state.classes.push(input)

marko/components/menu/component.js

@@ -3,9 +3,14 @@ module.exports = class {
     this.state = {
       loggingIn: false,
       loggingOut: false,
+      enabled: false,
     }
   }
 
+  toggleEnabled() {
+    this.state.enabled = !this.state.enabled
+  }
+
   loginClicked() {
     this.state.loggingIn = true
   }

marko/components/menu/index.marko

@@ -1,5 +1,7 @@
-<div class="menu">
+<div class=["menu", state.enabled ? "enabled" : "disabled"]>
   <div class="menu-body">
+    <menu-link icon=(state.enabled ? "<" : ">") on-click("toggleEnabled") class="showhide">${state.enabled ? "Hide Menu" : "Show Menu"}</menu-link>
+    <menu-gap class="showhide" />
     <include(input.renderBody) />
   </div>
   <if(input.user != null)>

marko/components/menu/style.less

@@ -12,4 +12,28 @@
   user-select: none;
   overflow-x: hidden;
   overflow-y: auto;
+
+  .showhide {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .menu.disabled {
+    .menu-link, .menu-header, .menu-blurb, .menu-gap {
+      display: none;
+    }
+  }
+
+  .showhide {
+    display: block !important;
+  }
+
+  .menu {
+    position: static;
+    width: 100%;
+    box-sizing: border-box;
+    margin-left: -0.25ch;
+    font-size: 1.25em;
+  }
 }

marko/global/base.less

@@ -16,10 +16,19 @@ body {
   }
 }
 
+@media screen and (max-width: 700px) {
+  body {
+    main {
+      margin-left: 0.25ch;
+      width: 100%;
+    }
+  }
+}
+
 /* 
  * Less glaring chrome/ium scrollbars.
  */
- ::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 2px;
   /* for vertical scrollbars */
   height: 2px;

marko/global/navbar.less

@@ -30,4 +30,14 @@ nav.layout-navbar {
       color: white;
     }
   }
-}
+}
+
+@media screen and (max-width: 700px) {
+  nav.layout-navbar {
+    position: static;
+    margin-left: 0;
+    width: 100%;
+
+    font-size: 1.25em;
+  }
+}

marko/page/data/components/data-menu/index.marko

@@ -2,8 +2,8 @@
   <menu-header>List</menu-header>
   <menu-link key="characters" selected=input.selected.characters icon="C" href="/data/characters/">Characters</menu-link>
   <menu-link key="channels" selected=input.selected.channels icon="#" href="/data/channels/">Channels</menu-link>
-  <menu-gap />
   <if-permitted user=input.user permission=["member", "character.add", "channel.add"]>
+    <menu-gap />
     <menu-header>Add</menu-header>
     <if-permitted user=input.user permission=["character.add", "member"]>
       <menu-link dark key="characters_add" icon="+" on-click("emit", "open", "character.add")>Character</menu-link>

marko/page/layout.marko

@@ -4,6 +4,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8"/>
+    <head>
+      <meta content="AiteStory is a timeline of aiterp IC content that doesn't fit the wiki format" name="description" />
+      <meta charset="UTF-8" />
+      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport" />
+      <meta content="#111111" name="theme-color" />
+      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    </head>
     <title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title>
     <lasso-head/>
   </head>

marko/page/logs-content/components/post/style.less

@@ -9,7 +9,7 @@ div.post {
   div.options {
     position: absolute;
     text-align: right;
-    width: calc(100% - 35.5ch);
+    width: calc(100% - 38.75ch);
     max-width: 95ch;
 
     a {

marko/page/logs/components/logs-menu/index.marko

@@ -8,5 +8,4 @@
   <menu-header key="filters">Filters</menu-header>
   <menu-link for(filter in state.filters) textClass=filter.color unselectable icon=filter.icon on-click("emit", "removefilter", filter.type, filter.id)>${filter.text}</menu-link>
   <menu-link key="add_filter" dark on-click("select", "filter.add") icon="+">Add Filter</menu-link>
-  <menu-gap />
 </menu>

marko/page/logs/components/logs-table-row/component.js

@@ -4,7 +4,7 @@ module.exports = class {
   onCreate(input) {
     this.state = {
       expand: false,
-      dateStr: moment(input.log.date).format("MMM D, YYYY"),
+      dateStr: moment(input.log.date).format("MMM D, YYYY"),
     }
   }
 }

marko/page/logs/components/logs-table-row/index.marko

@@ -8,7 +8,7 @@ $ const fullNames = (input.log.characters.length < 4);
     <a on-click("emit", "addfilter", "channels", input.log.channelName)>${input.log.channelName}</a>
   </td>
   <td class="event color-tag-event">
-    <a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "").replace(/\s/g, " ")}</a>
+    <a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "")}</a>
   </td>
   <td class="characters color-menu">
     <span for(character in input.log.characters | status-var=loop)>

marko/page/logs/components/logs-table-row/style.less

@@ -16,4 +16,10 @@ tr.logs-table-row {
   td.channel, td.date, td.event {
     width: 12%;
   }
+
+  td.character {
+    a.name {
+      white-space: nowrap;
+    }
+  }
 }

marko/page/logs/components/logs-table/index.marko

@@ -4,7 +4,7 @@ import moment from "moment"
   <tr key="_header">
     <th>Date</th>
     <th>Channel</th>
-    <th>Event</th>
+    <th class="event">Event</th>
     <th>Characters</th>
   </tr>
   <logs-table-row for(log in input.logs) key=log.shortId log=log on-addfilter("emit", "addfilter") />

marko/page/logs/components/logs-table/style.less

@@ -8,4 +8,18 @@ table.logs-table {
     cursor: pointer;
     text-decoration: underline;
   }
+
+  @media screen and (max-width: 900px) {
+    td.event, th.event {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 700px) {
+    td.date {
+      white-space: normal !important;
+    }
+
+    font-size: 0.66em;
+  }
 }

marko/page/story-content/components/chapter/style.less

@@ -22,7 +22,7 @@
   .options {
     position: absolute;
     text-align: right;
-    width: calc(100% - 35.5ch);
+    width: calc(100% - 38.75ch);
     max-width: 95ch;
 
     pointer-events: none;

marko/page/story/components/story-menu/index.marko

@@ -18,5 +18,4 @@
   <menu-gap />
   <menu-header>Categories</menu-header>
   <menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=("/story/by-category/"+category.name) icon=category.name.charAt(0)>${category.name}</menu-link>
-  <menu-gap />
 </menu>