[ux] float menu buttons

public/css/otalk.css

@@ -571,26 +571,25 @@ button.secondary:hover:not(:disabled) {
   user-select: none;
 }
 #menu .main {
-  margin-bottom: 10px;
-}
-#menu .main li {
-  list-style-type: none;
-  margin: 10px 0 5px 0;
+  margin: 10px 0 0 0;
   text-align: center;
 }
-#menu .main li:last-child {
-  margin: 0;
+#menu .main li {
+  display: inline-block;
+}
+#menu .main li:last-of-type a {
+  margin-left: 5px;
+  padding-left: 30px;
 }
 #menu .main li svg {
   position: absolute;
   top: 50%;
-  left: 10px;
+  left: 5px;
   margin-top: -13px;
   fill: #fff;
 }
 #menu .main li a {
   position: relative;
-  width: 150px;
 }
 #menu h1 {
   font-size: 12px;

public/css/pages/roster.styl

@@ -15,25 +15,25 @@
   noselect()
 
   .main
-    margin-bottom: 10px
+    margin: 10px 0 0 0
+    text-align: center
     li
-      list-style-type: none
-      margin: 10px 0 5px 0
-      text-align: center
+      display: inline-block
 
-      &:last-child
-        margin: 0
+      &:last-of-type
+        a
+          margin-left: 5px
+          padding-left: 30px
 
       svg
         position: absolute
         top: 50%
-        left: 10px
+        left: 5px
         margin-top: -13px
         fill: white
 
       a
         position: relative
-        width: 150px
 
   h1
     font-size: $font-size-small

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382715439961
+# 0.0.1 1382716344670
 
 CACHE:
 /app.js