Improve UI with some CSS.

44622b27 · Sven Franck · Romain Courteaud · 15dcf792 · 44622b27 · 44622b27
Commit 44622b27 authored Aug 19, 2015 by Sven Franck Committed by Romain Courteaud Aug 19, 2015
Hide whitespace changes
Inline Side-by-side

Showing with 46 additions and 22 deletions

index.css index.css +38 -16

index.html index.html +8 -6

No files found.
--- a/index.css
+++ b/index.css
-html,
+/* for color lovers: https://color.adobe.com/Neutral-Blue-color-theme-22361 */
 body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  width: 100%;
+  font-size: 1em;
+	line-height: 1.3;
+	font-family: sans-serif;
+	font-weight: 400;
+	background-color: #D1DBBD;
+  border-color: #193441;
+  color: #3E606F;
+  text-shadow: 0 1px 0 #f3f3f3;
 }
-
-body {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+.custom-content-block {
+  width: 50%;
+  margin: 0 auto;
+  padding: 1em;
+  background: #FCFFF5;
+  border: 1px solid #193441;
+  -webkit-border-radius: .3125em;
+  border-radius: .3125em;
+}
+.custom-content-intro {
+  text-align: center;
+}
+.custom-content-header {
+  font-size: 1.5em;
+  font-weight: 300;
+  color: #193441;
+  padding: .25em;
+  margin: 0 0 .5em;
+}
+textarea {
+  width: 99%;
 }
-
-#log {
-  -webkit-box-flex: 1;
+@media (max-width: 60em) {
+  .custom-content-block {
+    width: 80%;
+  }
 }
-
-#log,
-#input {
-  display: block;
+@media (max-width: 40em) {
+  .custom-content-block {
+    width: auto;
+  }
 }
--- a/index.html
+++ b/index.html
@@ -7,11 +7,13 @@
    <script src="index.js"></script>
  </head>
  <body>
-    <p>This is a WebSocket server which broadcasts all messages to all connected clients</p>
-    <h2>Server URLs</h2>
-    <textarea readonly id="server_url_list"></textarea>
-    <h2>Peer list</h2>
-    <p>Connected peers: <span id="client_count">0</span></p>
-    <textarea readonly id="peer_list"></textarea>
+    <div class="custom-content-block">
+      <p class="custom-content-intro">This is a WebSocket server which broadcasts all messages to all connected clients</p>
+      <h2 class="custom-content-header">Server URLs</h2>
+      <textarea readonly rows="1" id="server_url_list"></textarea>
+      <h2 class="custom-content-header">Peer list</h2>
+      <p>Connected peers: <span id="client_count">0</span></p>
+      <textarea readonly rows="19" id="peer_list"></textarea>
+    </div>
  </body>
 </html>