From e4d6f8f9abdbb5dd0651cc8d881d1884b3210d76 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Fri, 15 Aug 2014 06:52:14 -0700
Subject: [PATCH] Fix responsive interface

---
 client/css/style.css | 1412 +++++++++++++++++++++---------------------
 client/index.html    |   17 +-
 client/js/chat.js    |    7 +-
 3 files changed, 703 insertions(+), 733 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index e3a750f7..9406598b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,719 +1,693 @@
-@import url(
-	http://fonts.googleapis.com/css?family=Lato:400,700
-);
-@font-face {
-	font-family: "Octicons";
-	src: url("fonts/octicons.svg") format("svg"), url("fonts/octicons.woff") format("woff");
-}
-html,
-body {
-	height: 100%;
-}
-body {
-	background: #505d70;
-	color: #222;
-	font: 16px Lato, sans-serif;
-	margin: 0;
-	min-width: 780px;
-}
-a {
-	transition: opacity .2s;
-}
-a:hover {
-	text-decoration: none;
-	opacity: .8;
-}
-h1,
-h2 {
-	font: inherit;
-	line-height: inherit;
-	margin: 0;
-}
-input {
-	outline: 0;
-}
-button {
-	border: none;
-	background: none;
-	margin: 0;
-	outline: none;
-	padding: 0;
-}
-.tooltip-inner {
-	background: #fff;
-	border-radius: 2px;
-	color: #262c36;
-}
-.tooltip.top .tooltip-arrow {
-	border-top-color: #fff;
-}
-.btn {
-	border: 2px solid #84d1ff;
-	border: 2px solid #84ce88;
-	border-radius: 3px;
-	color: #84d1ff;
-	color: #84ce88;
-	display: inline-block;
-	font: bold 12px Lato, sans-serif;
-	letter-spacing: 1px;
-	margin-bottom: 10px;
-	padding: 9px 17px;
-	text-transform: uppercase;
-	transition: background .2s, border-color .2s, color .2s;
-	word-spacing: 3px;
-}
-.btn:disabled,
-.btn:hover {
-	background: #84d1ff;
-	background: #84ce88;
-	color: #fff;
-}
-.btn:active {
-	box-shadow: none;
-	opacity: .8;
-}
-.btn:disabled {
-	opacity: .6;
-}
-.container {
-	margin: 10% auto;
-	max-width: 420px;
-	overflow: hidden;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-	padding: 0 30px;
-}
-::-moz-placeholder {
-	color: rgba(0, 0, 0, .25);
-	opacity: 1;
-}
-::-webkit-input-placeholder {
-	color: rgba(0, 0, 0, .25);
-}
-:-ms-input-placeholder {
-	color: rgba(0, 0, 0, .25) !important;
-}
-#wrap {
-	height: 100%;
-	overflow: hidden;
-}
-#viewport {
-	height: 100%;
-	transition: all .4s;
-	-webkit-transform: translateZ(0);
-	        transform: translateZ(0);
-	-webkit-perspective: 1000;
-	        perspective: 1000;
-}
-#sidebar {
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-	position: absolute;
-	top: 0;
-	width: 220px;
-	z-index: 2;
-}
-#sidebar button,
-#sidebar .sign-out {
-	border: 1px solid transparent;
-	border-radius: 2px;
-	color: #bcc4d3;
-	font-size: 14px;
-}
-#sidebar button:hover,
-#sidebar .active {
-	color: #fff;
-}
-#sidebar button.active {
-	color: #fff;
-}
-#sidebar .networks {
-	min-height: 100%;
-	padding: 25px 40px 80px;
-}
-#sidebar .network + .network {
-	margin-top: 30px;
-}
-#sidebar .empty {
-	color: #818b9e;
-	line-height: 1.6;
-	font-size: 12px;
-	margin-top: 20px;
-	padding: 20px 40px;
-	text-align: center;
-	position: absolute;
-	top: 0;
-}
-#sidebar .chan {
-	display: block;
-	margin: 1px -10px;
-	padding: 6px 10px 8px;
-	position: relative;
-	text-align: left;
-	transition: all .2s;
-	width: 160px;
-}
-#sidebar .chan:first-child {
-	color: #84ce88;
-	font-size: 15px;
-	font-weight: bold;
-}
-#sidebar .chan:first-child:hover,
-#sidebar .chan:first-child.active {
-	color: #c0f8c3;
-}
-#sidebar .chan:hover .badge {
-	opacity: 0;
-}
-#sidebar .chan:hover .close {
-	opacity: .2;
-}
-#sidebar .badge {
-	background: rgba(255, 255, 255, .06);
-	border-radius: 3px;
-	color: #afb6c0;
-	font-size: 10px;
-	margin-top: 1px;
-	padding: 3px 6px;
-	position: absolute;
-	right: 10px;
-	transition: all .2s;
-}
-#sidebar .badge.highlight {
-	background: #fff;
-	color: #49505a;
-}
-#sidebar .badge:empty {
-	display: none;
-}
-#sidebar .close {
-	background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+);
-	background-size: 50%;
-	background-position: 5px 6px;
-	border-radius: 3px;
-	height: 18px;
-	margin-top: 1px;
-	margin-right: 10px;
-	opacity: 0;
-	position: absolute;
-	right: 0;
-	transition: all .2s;
-	width: 18px;
-}
-#sidebar .close:hover {
-	background-color: rgba(0, 0, 0, .1);
-	opacity: .7 !important;
-}
-#footer {
-	height: 70px;
-	line-height: 70px;
-	margin-top: -70px;
-	padding: 0 8px;
-	text-align: center;
-	width: 220px;
-}
-#footer button {
-	border: 0;
-}
-#footer button.active {
-	background: none;
-}
-#footer .icon {
-	color: #818b9e;
-	display: inline-block;
-	font: 16px Octicons;
-	line-height: 34px;
-	padding: 0px 12px;
-}
-.signed-out #footer .sign-in {
-	display: inline-block;
-}
-.signed-out #footer .connect,
-.signed-out #footer .sign-out {
-	display: none;
-}
-.public #footer .sign-in,
-.public #footer .sign-out {
-	display: none;
-}
-#footer .sign-in {
-	display: none;
-}
-#footer .sign-in:before {
-	content: "\f036";
-}
-#footer .connect:before {
-	content: "\f085";
-}
-#footer .settings:before {
-	content: "\f02f";
-}
-#footer .sign-out:before {
-	content: "\f032";
-}
-#main {
-	border-radius: 2px;
-	bottom: 4px;
-	left: 220px;
-	overflow: hidden;
-	position: absolute;
-	right: 5px;
-	top: 4px;
-}
-#header {
-	border-bottom: 1px solid #e9ecef;
-	display: none;
-	height: 40px;
-	position: absolute;
-	top: 0;
-	width: 100%;
-}
-#header h1 {
-	color: #222;
-	font-size: 15px;
-	line-height: 40px;
-	text-align: center;
-}
-#header button {
-	color: #666;
-	font: 16px Octicons;
-	height: 32px;
-	opacity: .5;
-	position: absolute;
-	top: 4px;
-	transition: opacity .2s;
-	padding: 0 10px;
-	width: 64px;
-}
-#header button:hover {
-	opacity: 1;
-}
-#header #lt {
-	left: 4px;
-	text-align: left;
-}
-#header #rt {
-	display: none;
-	right: 4px;
-	text-align: right;
-}
-#header #lt:before {
-	content: "\f05e";
-}
-#header #rt:before {
-	content: "\f037";
-}
-#windows {
-	bottom: 48px;
-	position: absolute;
-	top: 0px;
-	width: 100%;
-}
-#windows .input {
-	border: 1px solid #cdd3da;
-	border-radius: 3px;
-	color: #222;
-	font-size: 14px;
-	margin: 2px 0;
-	outline: 0;
-	padding: 8px 10px;
-	transition: border-color .2s;
-	-webkit-appearance: none;
-	width: 100%;
-}
-#windows .input:hover,
-#windows .input:focus {
-	border-color: #79838c;
-}
-#windows .window:before,
-#windows .chan:before {
-	background: #f4f4f4;
-	background-image: linear-gradient(#f4f4f4, #ececec);
-	border-bottom: 1px solid #ddd;
-	content: " ";
-	display: block;
-	height: 10px;
-	position: relative;
-	z-index: 10;
-}
-#windows .chan,
-#windows .window {
-	background: #fff;
-	bottom: 0;
-	display: none;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-#windows .window {
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-}
-#windows .window h1 {
-	font: 36px Lato;
-}
-#windows .active {
-	display: block;
-}
-#chat {
-	bottom: 0;
-	font: 12px Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-#chat button:hover {
-	opacity: .6;
-}
-#chat .chat {
-	bottom: 0;
-	left: 0;
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-	position: absolute;
-	right: 180px;
-	top: 10px;
-}
-#chat .sidebar {
-	background: #fff;
-	border-left: 1px solid #e9ecef;
-	border-left: 1px solid #e4eaee;
-	bottom: 0;
-	position: absolute;
-	right: 0;
-	top: 10px;
-	width: 180px;
-}
-#chat .show-more {
-	color: #b1c3ce;
-	position: absolute;
-	width: 100%;
-	border-bottom: 1px solid #ddd;
-	height: 41px;
-	background: #fff;
-}
-#chat .show-more + .messages .msg:first-child span {
-	padding-top: 46px;
-}
-#chat .messages {
-	display: table;
-	height: 100%;
-	width: 100%;
-}
-#chat .msg {
-	display: table-row;
-	word-wrap: break-word;
-}
-#chat .msg:first-child > span {
-	padding-top: 10px;
-}
-#chat .msg:last-child {
-	height: 100%;
-}
-#chat .msg:last-child .text {
-	padding-bottom: 10px;
-}
-#chat .msg .type {
-	color: #ccc;
-	color: #d0dbe2;
-	display: none;
-}
-#chat .time,
-#chat .from,
-#chat .text {
-	display: table-cell;
-	padding: 4px 0;
-}
-#chat .time {
-	background: #fcfdfd;
-	color: #e4eaee;
-	text-align: right;
-	width: 46px;
-	min-width: 46px;
-}
-#chat .from {
-	background: #fcfdfd;
-	border-right: 1px solid #f6f8f9;
-	color: #b1c3ce;
-	padding-right: 10px;
-	text-align: right;
-	width: 134px;
-	min-width: 134px;
-}
-#chat a,
-#chat .message .from button,
-#chat .sidebar button {
-	color: #84ce88;
-}
-#chat .text {
-	padding-left: 10px;
-	padding-right: 6px;
-}
-#chat .text a {
-	word-break: break-all;
-}
-#chat .join .type,
-#chat .part .type,
-#chat .mode .type,
-#chat .nick .type,
-#chat .kick .type,
-#chat .quit .type,
-#chat .quit .type,
-#chat .topic .type {
-	display: inline;
-}
-#chat .error,
-#chat .error .from,
-#chat .highlight,
-#chat .highlight .from {
-	color: #f00;
-}
-#chat.hide-join .join,
-#chat.hide-nick .nick,
-#chat.hide-part .nick,
-#chat.hide-mode .mode,
-#chat.hide-quit .quit {
-	display: none !important;
-}
-#chat .notice .type {
-	display: none;
-}
-#chat .action,
-#chat .action .user {
-	color: #f39c12;
-}
-#chat .action .user:before {
-	content: '* ';
-}
-#chat .meta {
-	font-family: "Lato";
-	height: 80px;
-	padding: 25px 0 0 20px;
-}
-#chat .meta h1 {
-	color: #222;
-	font-size: 15px;
-}
-#chat .meta .type {
-	color: #ccc;
-	color: #b1c3ce;
-	font-size: 12px;
-	text-transform: capitalize;
-}
-#chat .count {
-	border-top: 1px dashed #e4eaee;
-	border-bottom: 1px solid #e4eaee;
-	height: 40px;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 80px;
-}
-#chat .count:before {
-	color: #eee;
-	font: 16px Octicons;
-	content: "\f02e";
-	position: absolute;
-	right: 18px;
-	line-height: 40px;
-	transition: color .2s;
-	z-index: 0;
-}
-#chat .search {
-	color: #222;
-	border: 0;
-	background: none;
-	font: inherit;
-	outline: 0;
-	padding: 12px 20px;
-	position: relative;
-	width: 100%;
-}
-#chat .names {
-	bottom: 0;
-	overflow: auto;
-	overflow-x: hidden;
-	-webkit-overflow-scrolling: touch;
-	padding: 15px 20px;
-	position: absolute;
-	top: 120px;
-	width: 100%;
-}
-#chat .names button {
-	display: block;
-	line-height: 1.8em;
-}
-#sign-in label {
-	display: block;
-	margin-top: 10px;
-}
-#sign-in .title {
-	margin-bottom: 10px;
-}
-#sign-in .btn {
-	margin-top: 25px;
-}
-#sign-in .error {
-	color: #e74c3c;
-	margin-top: 1em;
-}
-#connect label {
-	display: block;
-	margin-top: 10px;
-}
-#connect .title {
-	margin-bottom: 10px;
-}
-#connect .port:before {
-	content: ":";
-	margin: 28px 0 0 -17px;
-	position: absolute;
-}
-#connect .btn {
-	margin-top: 25px;
-}
-#settings h2 {
-	border-bottom: 1px solid #eee;
-	color: #7f8c8d;
-	font-size: 22px;
-	margin: 30px 0 10px;
-	padding-bottom: 7px;
-}
-#settings .title {
-	margin-bottom: -10px;
-}
-#settings .opt {
-	display: block;
-	padding: 10px 0 10px 1px;
-}
-#settings .opt input {
-	float: left;
-	margin: 4px 10px 0 0;
-}
-#settings .about,
-#settings #play {
-	color: #7f8c8d;
-}
-#settings #play:hover {
-	opacity: .8;
-}
-#settings #play:before {
-	content: "\f0ba";
-	font: 16px Octicons;
-	margin-right: 9px;
-}
-#settings .about {
-	font-size: 14px;
-	padding-top: 2px;
-	line-height: 1.8;
-}
-#form {
-	background: #e4eaee;
-	border-top: 1px solid #cfdae1;
-	bottom: 0;
-	height: 48px;
-	left: 0;
-	position: absolute;
-	right: 0px;
-	z-index: 1;
-}
-#form input {
-	border: 1px solid #cfdae1;
-	font: 13px Consolas, monospace;
-	border-radius: 2px;
-	height: 100%;
-	outline: none;
-	padding: 0 12px;
-	-webkit-appearance: none;
-	width: 100%;
-}
-#form .inner {
-	bottom: 7px;
-	left: 7px;
-	position: absolute;
-	right: 7px;
-	top: 6px;
-}
-#form #submit {
-	height: 0;
-	margin-left: -9999px;
-	position: absolute;
-	width: 0;
-}
-
-/*
-@media (max-width: 768px) {
-	#viewport.rt {
-		-webkit-transform: translate3d(-180px, 0, 0);
-		        transform: translate3d(-180px, 0, 0);
-	}
-	#header {
-		display: block;
-	}
-	#header #lt {
-		display: none;
-	}
-	#windows {
-		top: 40px;
-	}
-	#chat .chat {
-		right: 0;
-	}
-	#chat .sidebar {
-		bottom: -40px;
-		right: -180px;
-		top: -40px;
-	}
-}
-
-@media (max-width: 480px) {
-	.title {
-		display: none;
-	}
-	.container {
-		margin-bottom: 5%;
-	}
-	#viewport.lt {
-		-webkit-transform: translate3d(220px, 0, 0);
-		        transform: translate3d(220px, 0, 0);
-	}
-	#header #lt {
-		display: inherit;
-	}
-	#sidebar {
-		left: -220px;
-	}
-	#sidebar .empty:before {
-		margin-top: 0;
-	}
-	#main {
-		left: 0;
-	}
-	#chat .messages {
-		display: block;
-		padding: 5px 10px;
-	}
-	#chat .msg {
-		display: block;
-		padding: 2px 0;
-	}
-	#chat .msg:last-child {
-		height: auto;
-	}
-	#chat .from,
-	#chat .text {
-		background: none;
-		border: 0;
-		display: inline;
-		padding: 0;
-	}
-	#chat .time {
-		display: none;
-	}
-}
-*/
+@import url(
+	http://fonts.googleapis.com/css?family=Lato:400,700
+);
+@font-face {
+	font-family: "Octicons";
+	src: url("fonts/octicons.svg") format("svg"), url("fonts/octicons.woff") format("woff");
+}
+html,
+body {
+	height: 100%;
+}
+body {
+	background: #505d70;
+	color: #222;
+	font: 16px Lato, sans-serif;
+	margin: 0;
+}
+a {
+	/*transition: opacity .2s;*/
+}
+a:hover {
+	text-decoration: none;
+	opacity: .8;
+}
+h1,
+h2 {
+	font: inherit;
+	line-height: inherit;
+	margin: 0;
+}
+input {
+	outline: 0;
+}
+button {
+	border: none;
+	background: none;
+	margin: 0;
+	outline: none;
+	padding: 0;
+}
+.tooltip-inner {
+	background: #fff;
+	border-radius: 2px;
+	color: #262c36;
+}
+.tooltip.top .tooltip-arrow {
+	border-top-color: #fff;
+}
+.btn {
+	border: 2px solid #84d1ff;
+	border: 2px solid #84ce88;
+	border-radius: 3px;
+	color: #84d1ff;
+	color: #84ce88;
+	display: inline-block;
+	font: bold 12px Lato, sans-serif;
+	letter-spacing: 1px;
+	margin-bottom: 10px;
+	padding: 9px 17px;
+	text-transform: uppercase;
+	transition: background .2s, border-color .2s, color .2s;
+	word-spacing: 3px;
+}
+.btn:disabled,
+.btn:hover {
+	background: #84d1ff;
+	background: #84ce88;
+	color: #fff;
+}
+.btn:active {
+	box-shadow: none;
+	opacity: .8;
+}
+.btn:disabled {
+	opacity: .6;
+}
+.container {
+	margin: 80px auto;
+	max-width: 420px;
+	overflow: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	padding: 0 30px;
+}
+::-moz-placeholder {
+	color: rgba(0, 0, 0, .25);
+	opacity: 1;
+}
+::-webkit-input-placeholder {
+	color: rgba(0, 0, 0, .25);
+}
+:-ms-input-placeholder {
+	color: rgba(0, 0, 0, .25) !important;
+}
+#wrap {
+	height: 100%;
+	overflow: hidden;
+}
+#viewport {
+	height: 100%;
+	transition: all .4s;
+	-webkit-transform: translateZ(0);
+	        transform: translateZ(0);
+	-webkit-perspective: 1000;
+	        perspective: 1000;
+}
+#sidebar {
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	position: absolute;
+	top: 0;
+	width: 220px;
+}
+#sidebar button,
+#sidebar .sign-out {
+	border: 1px solid transparent;
+	border-radius: 2px;
+	color: #bcc4d3;
+	font-size: 14px;
+}
+#sidebar button:hover,
+#sidebar .active {
+	color: #fff;
+}
+#sidebar button.active {
+	color: #fff;
+}
+#sidebar .networks {
+	min-height: 100%;
+	padding: 25px 40px 80px;
+}
+#sidebar .network + .network {
+	margin-top: 30px;
+}
+#sidebar .empty {
+	color: #818b9e;
+	line-height: 1.6;
+	font-size: 12px;
+	margin-top: 20px;
+	padding: 20px 40px;
+	text-align: center;
+	position: absolute;
+	top: 0;
+}
+#sidebar .chan {
+	display: block;
+	margin: 1px -10px;
+	padding: 6px 10px 8px;
+	position: relative;
+	text-align: left;
+	transition: all .2s;
+	width: 160px;
+}
+#sidebar .chan:first-child {
+	color: #84ce88;
+	font-size: 15px;
+	font-weight: bold;
+}
+#sidebar .chan:first-child:hover,
+#sidebar .chan:first-child.active {
+	color: #c0f8c3;
+}
+#sidebar .chan:hover .badge {
+	opacity: 0;
+}
+#sidebar .chan:hover .close {
+	opacity: .2;
+}
+#sidebar .badge {
+	background: rgba(255, 255, 255, .06);
+	border-radius: 3px;
+	color: #afb6c0;
+	font-size: 10px;
+	margin-top: 1px;
+	padding: 3px 6px;
+	position: absolute;
+	right: 10px;
+	transition: all .2s;
+}
+#sidebar .badge.highlight {
+	background: #fff;
+	color: #49505a;
+}
+#sidebar .badge:empty {
+	display: none;
+}
+#sidebar .close {
+	background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+);
+	background-size: 50%;
+	background-position: 5px 6px;
+	border-radius: 3px;
+	height: 18px;
+	margin-top: 1px;
+	margin-right: 10px;
+	opacity: 0;
+	position: absolute;
+	right: 0;
+	transition: all .2s;
+	width: 18px;
+}
+#sidebar .close:hover {
+	background-color: rgba(0, 0, 0, .1);
+	opacity: .7 !important;
+}
+#footer {
+	height: 70px;
+	line-height: 70px;
+	margin-top: -70px;
+	padding: 0 8px;
+	text-align: center;
+	width: 220px;
+}
+#footer button {
+	border: 0;
+}
+#footer button.active {
+	background: none;
+}
+#footer .icon {
+	color: #818b9e;
+	display: inline-block;
+	font: 16px Octicons;
+	line-height: 34px;
+	padding: 0px 12px;
+}
+.signed-out #footer .sign-in {
+	display: inline-block;
+}
+.signed-out #footer .connect,
+.signed-out #footer .sign-out {
+	display: none;
+}
+.public #footer .sign-in,
+.public #footer .sign-out {
+	display: none;
+}
+#footer .sign-in {
+	display: none;
+}
+#footer .sign-in:before {
+	content: "\f036";
+}
+#footer .connect:before {
+	content: "\f085";
+}
+#footer .settings:before {
+	content: "\f02f";
+}
+#footer .sign-out:before {
+	content: "\f032";
+}
+#main {
+	background: #fff;
+	border-radius: 2px;
+	bottom: 4px;
+	left: 220px;
+	overflow: hidden;
+	position: absolute;
+	right: 5px;
+	top: 4px;
+}
+#header {
+	display: none;
+	height: 40px;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+#windows {
+	bottom: 48px;
+	position: absolute;
+	top: 0px;
+	width: 100%;
+}
+#windows .input {
+	border: 1px solid #cdd3da;
+	border-radius: 3px;
+	color: #222;
+	font-size: 14px;
+	margin: 2px 0;
+	outline: 0;
+	padding: 8px 10px;
+	transition: border-color .2s;
+	-webkit-appearance: none;
+	width: 100%;
+}
+#windows .input:hover,
+#windows .input:focus {
+	border-color: #79838c;
+}
+#windows .window:before,
+#windows .chan:before {
+	background: #f4f4f4;
+	background-image: linear-gradient(#f4f4f4, #ececec);
+	border-bottom: 1px solid #d7d7d7;
+	content: " ";
+	display: block;
+	height: 10px;
+	position: relative;
+	z-index: 10;
+}
+#windows .chan,
+#windows .window {
+	background: #fff;
+	bottom: 0;
+	display: none;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+#windows .window {
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+#windows .window h1 {
+	font: 36px Lato;
+}
+#windows .active {
+	display: block;
+}
+#chat {
+	bottom: 0;
+	font: 12px Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+#chat button:hover {
+	opacity: .6;
+}
+#chat .header {
+	border-bottom: 1px solid #e7e7e7;
+	line-height: 50px;
+	height: 48px;
+	padding: 0 20px;
+}
+#chat .header .lt,
+#chat .header .rt {
+	color: #ccc;
+	display: none;
+	float: left;
+	line-height: 40px;
+	height: 36px;
+	margin: 6px 12px 0 -12px;
+	width: 36px;
+}
+#chat .header .lt:before {
+	font: 16px Octicons;
+	content: "\f05e";
+}
+#chat .header .rt {
+	float: right;
+}
+#chat .header .title {
+	font: 16px Lato;
+}
+#chat .header .topic {
+	color: #777;
+	margin-left: 8px;
+	text-transform: capitalize;
+}
+#chat .chat,
+#chat .sidebar {
+	top: 58px;
+}
+#chat .chat {
+	bottom: 0;
+	left: 0;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+	position: absolute;
+	right: 180px;
+}
+#chat .sidebar {
+	background: #fff;
+	border-left: 1px solid #e7e7e7;
+	bottom: 0;
+	position: absolute;
+	right: 0;
+	width: 180px;
+}
+#chat .lobby .chat,
+#chat .query .chat {
+	right: 0;
+}
+#chat .lobby .sidebar,
+#chat .query .sidebar {
+	display: none;
+}
+#chat .show-more {
+	color: #b1c3ce;
+	position: absolute;
+	width: 100%;
+	border-bottom: 1px solid #e7e7e7;
+	height: 41px;
+	background: #fff;
+}
+#chat .show-more + .messages .msg:first-child span {
+	padding-top: 46px;
+}
+#chat .messages {
+	display: table;
+	height: 100%;
+	width: 100%;
+}
+#chat .msg {
+	display: table-row;
+	word-wrap: break-word;
+}
+#chat .msg:first-child > span {
+	padding-top: 10px;
+}
+#chat .msg:last-child {
+	height: 100%;
+}
+#chat .msg:last-child .text {
+	padding-bottom: 10px;
+}
+#chat .msg .type {
+	color: #ccc;
+	color: #d0dbe2;
+	display: none;
+}
+#chat .time,
+#chat .from,
+#chat .text {
+	display: table-cell;
+	padding: 4px 0;
+}
+#chat .time {
+	background: #fcfdfd;
+	background: #fcfcfc;
+	color: #e4eaee;
+	text-align: right;
+	width: 46px;
+	min-width: 46px;
+}
+#chat .from {
+	background: #fcfdfd;
+	background: #fcfcfc;
+	border-right: 1px solid #f6f8f9;
+	border-right: 1px solid #f6f6f6;
+	color: #b1c3ce;
+	padding-right: 10px;
+	text-align: right;
+	width: 134px;
+	min-width: 134px;
+}
+#chat a,
+#chat .from button,
+#chat .sidebar button {
+	color: #84ce88;
+}
+#chat .text {
+	padding-left: 10px;
+	padding-right: 6px;
+}
+#chat .text a {
+	word-break: break-all;
+}
+#chat .join .type,
+#chat .part .type,
+#chat .mode .type,
+#chat .nick .type,
+#chat .kick .type,
+#chat .quit .type,
+#chat .quit .type,
+#chat .topic .type {
+	display: inline;
+}
+#chat .error,
+#chat .error .from,
+#chat .highlight,
+#chat .highlight .from {
+	color: #f00;
+}
+#chat.hide-join .join,
+#chat.hide-nick .nick,
+#chat.hide-part .nick,
+#chat.hide-mode .mode,
+#chat.hide-quit .quit {
+	display: none !important;
+}
+#chat .notice .type {
+	display: none;
+}
+#chat .action,
+#chat .action .user {
+	color: #f39c12;
+}
+#chat .action .user:before {
+	content: '* ';
+}
+#chat .count {
+	background: #fcfcfc;
+	background: #fff;
+	border-bottom: 1px dashed #e7e7e7;
+	height: 48px;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+#chat .count:before {
+	color: #eee;
+	font: 16px Octicons;
+	content: "\f02e";
+	position: absolute;
+	right: 18px;
+	line-height: 50px;
+	transition: color .2s;
+	z-index: 0;
+}
+#chat .search {
+	color: #222;
+	border: 0;
+	background: none;
+	font: inherit;
+	outline: 0;
+	padding: 18px 16px;
+	position: relative;
+	width: 100%;
+}
+#chat .names {
+	bottom: 0;
+	overflow: auto;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+	padding: 12px 16px;
+	position: absolute;
+	top: 48px;
+	width: 100%;
+}
+#chat .names button {
+	display: block;
+	line-height: 1.8em;
+}
+#sign-in label {
+	display: block;
+	margin-top: 10px;
+}
+#sign-in .title {
+	margin-bottom: 10px;
+}
+#sign-in .btn {
+	margin-top: 25px;
+}
+#sign-in .error {
+	color: #e74c3c;
+	margin-top: 1em;
+}
+#connect label {
+	display: block;
+	margin-top: 10px;
+}
+#connect .title {
+	margin-bottom: 10px;
+}
+#connect .port:before {
+	content: ":";
+	margin: 28px 0 0 -17px;
+	position: absolute;
+}
+#connect .btn {
+	margin-top: 25px;
+}
+#settings h2 {
+	border-bottom: 1px solid #eee;
+	color: #7f8c8d;
+	font-size: 22px;
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
+#settings .title {
+	margin-bottom: -10px;
+}
+#settings .opt {
+	display: block;
+	padding: 10px 0 10px 1px;
+}
+#settings .opt input {
+	float: left;
+	margin: 4px 10px 0 0;
+}
+#settings .about,
+#settings #play {
+	color: #7f8c8d;
+}
+#settings #play:hover {
+	opacity: .8;
+}
+#settings #play:before {
+	content: "\f0ba";
+	font: 16px Octicons;
+	margin-right: 9px;
+}
+#settings .about {
+	font-size: 14px;
+	padding-top: 2px;
+	line-height: 1.8;
+}
+#form {
+	background: #e4eaee;
+	border-top: 1px solid #cfdae1;
+	bottom: 0;
+	height: 48px;
+	left: 0;
+	position: absolute;
+	right: 0px;
+	z-index: 1;
+}
+#form input {
+	border: 1px solid #cfdae1;
+	font: 13px Consolas, monospace;
+	border-radius: 2px;
+	height: 100%;
+	outline: none;
+	padding: 0 12px;
+	-webkit-appearance: none;
+	width: 100%;
+}
+#form .inner {
+	bottom: 7px;
+	left: 7px;
+	position: absolute;
+	right: 7px;
+	top: 6px;
+}
+#form #submit {
+	height: 0;
+	margin-left: -9999px;
+	position: absolute;
+	width: 0;
+}
+
+@media (max-width: 768px) {
+	#viewport.lt {
+		-webkit-transform: translate3d(220px, 0, 0);
+		        transform: translate3d(220px, 0, 0);
+	}
+	#viewport.rt {
+		-webkit-transform: translate3d(-180px, 0, 0);
+		        transform: translate3d(-180px, 0, 0);
+	}
+	#sidebar {
+		left: -220px;
+	}
+	#sidebar .empty:before {
+		margin-top: 0;
+	}
+	#main {
+		left: 5px;
+		right: 5px;
+	}
+	#chat .chat {
+		right: 0;
+	}
+	#chat .header .lt {
+		display: block;
+	}
+	#chat .sidebar {
+		right: -180px;
+	}
+}
+
+@media (max-width: 480px) {
+	#chat .messages {
+		display: block;
+		padding: 5px 10px;
+	}
+	#chat .msg {
+		display: block;
+		padding: 2px 0;
+	}
+	#chat .msg:last-child {
+		height: auto;
+	}
+	#chat .from,
+	#chat .text {
+		background: none;
+		border: 0;
+		display: inline;
+		padding: 0;
+	}
+	#chat .time {
+		display: none;
+	}
+}
diff --git a/client/index.html b/client/index.html
index 37b4cf2d..3e86b2f2 100644
--- a/client/index.html
+++ b/client/index.html
@@ -32,11 +32,6 @@
 			</footer>
 		</aside>
 		<div id="main">
-			<header id="header">
-				<button id="lt"></button>
-				<button id="rt"></button>
-				<h1></h1>
-			</header>
 			<div id="windows">
 				<div id="chat"></div>
 				<div id="sign-in" class="window">
@@ -211,7 +206,13 @@
 
 		<script type="text/html" class="chat">
 		{{#each channels}}
-		<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan">
+		<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan {{type}}">
+			<div class="header">
+				<button class="lt"></button>
+				<button class="rt"></button>
+				<span class="title">{{name}}</span>
+				<span class="topic">{{type}} </span>
+			</div>
 			<div class="chat">
 				{{#equal 100 messages.length}}
 				<button class="show-more" data-id="{{id}}">
@@ -223,10 +224,6 @@
 				</div>
 			</div>
 			<aside class="sidebar">
-				<div class="meta">
-					<h1>{{name}}</h1>
-					<span class="type">{{type}}</span>
-				</div>
 				<div class="users">
 					{{partial "users"}}
 				</div>
diff --git a/client/js/chat.js b/client/js/chat.js
index 90d6d6c6..2d610d81 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -249,9 +249,10 @@ $(function() {
 		.trigger("change");
 
 	var viewport = $("#viewport");
-	$("#rt, #lt").on("click", function(e) {
+
+	viewport.on("click", ".lt, .rt", function(e) {
 		var self = $(this);
-		viewport.toggleClass(self.attr("id"));
+		viewport.toggleClass(self.attr("class"));
 		if (viewport.is(".lt, .rt")) {
 			e.stopPropagation();
 			chat.find(".chat").one("click", function() {
@@ -300,8 +301,6 @@ $(function() {
 			favico.badge("");
 		}
 
-		$("#rt").toggle(self.hasClass("chan"));
-		$("#header").find("h1").html(self.data("title"));
 		viewport.removeClass();
 
 		$("#windows .active").removeClass("active");