From c6f9049d39f382bd23a68e45b5f1c43b25482347 Mon Sep 17 00:00:00 2001
From: Joel Mizzoni <jpmizzoni@gmail.com>
Date: Sat, 23 May 2015 14:51:48 -0600
Subject: [PATCH] some quick and dirty responsive css

---
 public/src/components/lobby.js |  2 +-
 public/style.css               | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/public/src/components/lobby.js b/public/src/components/lobby.js
index 77ebb76..e03d324 100644
--- a/public/src/components/lobby.js
+++ b/public/src/components/lobby.js
@@ -79,7 +79,7 @@ function Create() {
       onClick: App._save('type', type)
     }, type))
 
-  return d.div({},
+  return d.div({ className: 'menu' },
     d.div({},
       d.button({ onClick: App._emit('create') }, 'create'),
       ' room for ',
diff --git a/public/style.css b/public/style.css
index 2eb5c41..fb82ac4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -141,3 +141,35 @@ time {
 #chat input {
   flex-shrink: 0
 }
+
+
+@media(max-width: 1020px) {
+  .menu {
+    /* so the footer doesn't get in the way when we scroll to the bottom with limited vertical space (landscape) */
+    padding-bottom: 55px; 
+  }
+  .menu > div {
+    display: block;
+    width: 50%;
+    margin-left: 5%;
+    margin-bottom: 16px;
+    font-size: 32px;
+    text-align: center;
+  }
+
+  .menu > div:nth-child(1) > button,
+  .menu > div:nth-child(1) > select,
+  .menu > div:nth-child(1) > span {
+    display: inline-block;
+    width: 30%;
+  }
+
+
+  .menu > div > button,
+  .menu > div > select {
+    display: block;
+    width: 90%;
+    margin: auto;
+    margin-bottom: 8px;
+  }
+}
\ No newline at end of file