Add in some hand-rolled styles

6 files changed, 149 insertions, 11 deletions

diff --git a/ui/app.css b/ui/app.css
index b316dea..c4b464b 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,13 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url("styles/reset.css");
+@import url("styles/variables.css");
+@import url("styles/overscroll.css");
+@import url("styles/app-bar.css");
+@import url("styles/sidebar.css");
 
-/* This should help minimize swipe-to-go-back behaviour, enabling our
-* swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
-* Safari, when swiping from the screen edge, the OS gets th event and
-* handles it before the browser does.
-*/
-html,
-body {
-  overscroll-behavior-x: none;
+/* Debugging */
+div {
+  outline: 1px dashed grey;
+  background-color: var(--colour-background);
+  box-shadow: 5px 5px 5px var(--colour-border);
 }
diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
new file mode 100644
index 0000000..401a278
--- /dev/null
+++ b/ui/styles/app-bar.css
@@ -0,0 +1,25 @@
+/* App Bar */
+.app-bar {
+  height: var(--app-bar-height);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.app-bar > * {
+  display: inline-block;
+}
+
+.app-bar .lead {
+  flex-basis: 60px;
+}
+
+.app-bar .trail {
+  flex-basis: 60px;
+}
+
+.app-bar button,
+.app-bar button img {
+  height: var(--app-bar-height);
+}
diff --git a/ui/styles/overscroll.css b/ui/styles/overscroll.css
new file mode 100644
index 0000000..8898f9a
--- /dev/null
+++ b/ui/styles/overscroll.css
@@ -0,0 +1,9 @@
+/* This should help minimize swipe-to-go-back behaviour, enabling our
+* swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
+* Safari, when swiping from the screen edge, the OS gets th event and
+* handles it before the browser does.
+*/
+html,
+body {
+  overscroll-behavior-x: none;
+}
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
new file mode 100644
index 0000000..e29c0f5
--- /dev/null
+++ b/ui/styles/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
new file mode 100644
index 0000000..e512847
--- /dev/null
+++ b/ui/styles/sidebar.css
@@ -0,0 +1,39 @@
+/* Sidebar and channel selector */
+#sidebar {
+  background-color: var(--colour-background-alt);
+}
+
+.list-nav li {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--colour-border);
+  margin: 0.25rem;
+}
+
+.list-nav li.active {
+  background-color: var(--colour-okay);
+}
+
+.list-nav li:hover {
+  background-color: var(--colour-warn);
+}
+
+/* create channel form */
+.create-channel form {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.create-channel input {
+  padding: 0.5rem;
+  border-radius: 0.5rem 0 0 0.5rem;
+  border: 1px solid var(--colour-border);
+  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  flex-grow: 1;
+}
+
+.create-channel button {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
new file mode 100644
index 0000000..e948c71
--- /dev/null
+++ b/ui/styles/variables.css
@@ -0,0 +1,18 @@
+:root {
+  /*
+   * Not great that these are in px, but not sure what else to do.
+   */
+  --app-bar-height: 48px;
+  --input-row-height: 2rem;
+  --interface-padding: 16px;
+  --nav-width: 21rem;
+
+  /* coloUrs */
+  --colour-background: rgba(0, 0, 0, 0.25);
+  --colour-background-alt: rgba(0, 0, 0, 0.35);
+  --colour-border: rgba(0, 0, 0, 0.45);
+  --colour-text: rgb(240, 240, 240);
+  --colour-okay: #2a9d8f;
+  --colour-warn: #e9c46a;
+  --colour-error: #e76f51;
+}