From 9f513d8a1b086cc6bccd2c3a26d01008724e873d Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 19 Sep 2020 00:40:05 -0600
Subject: [PATCH] Add styling

---
 src/App.vue                     | 36 ++++++++++++++++++++++++++++++++-
 src/components/WebsocketURL.vue | 20 +++++++++++++++++-
 src/theme.styl                  | 23 +++++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/theme.styl

diff --git a/src/App.vue b/src/App.vue
index 8c7546a..ee1fcb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,8 +40,42 @@ export default {
 </script>
 
 <style lang="stylus">
+@import "theme.styl"
+
+html, body, #app {
+	font-family: $fonts
+	font-style: normal
+	overflow: hidden
+	padding: 0
+	margin: 0
+}
+
 #app {
+	background-color: $main-background-colour
 	height: 100vh
 	width: 100vw
 }
-</style>
+
+.input {
+	background-color: $input-background
+	border-radius: $input-border-radius
+	border-color: $input-border-colour
+	border-width: $input-border-width
+	border-style: solid
+	text-align: center
+	padding: 10px 15px
+	color: $input-text
+	outline: none
+}
+
+input[type="text"] {
+	@extend .input
+}
+
+button {
+	@extend .input
+	font-family: $fonts
+	letter-spacing: $input-letter-spacing
+	font-size: 17px
+}
+</style>
\ No newline at end of file
diff --git a/src/components/WebsocketURL.vue b/src/components/WebsocketURL.vue
index 6d0b49d..11e4484 100644
--- a/src/components/WebsocketURL.vue
+++ b/src/components/WebsocketURL.vue
@@ -38,14 +38,32 @@ export default {
 </script>
 
 <style lang="stylus">
+@import "../theme.styl"
+
 #websocket_entry {
 	text-align: center
+	margin: 0 auto
 	height: 100vh
 	width: 33vw
-	margin: 0 auto
+	color: $main-text-colour
+
+	h1, h3 {
+		letter-spacing: $title-letter-spacing
+	}
+
+	p {
+		letter-spacing: $body-letter-spacing
+	}
 
 	@media screen and (max-width: 600px) {
 		width: 90vw
 	}
 }
 </style>
+<style lang="stylus" scoped>
+@import "../theme.styl"
+
+input[type="text"] {
+	margin-bottom: 10px
+}
+</style>
\ No newline at end of file
diff --git a/src/theme.styl b/src/theme.styl
new file mode 100644
index 0000000..455a6c8
--- /dev/null
+++ b/src/theme.styl
@@ -0,0 +1,23 @@
+/* Import all the fonts and whatnot */
+@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
+$fonts = 'Germania One', sans-serif
+
+$title-letter-spacing = 2px
+$body-letter-spacing = 1px
+
+$main-background-colour = #23272A
+$main-text-colour = #99AAB5
+
+/* Styling for inputs (not all input types use all values) */
+$input-background = #2C2F33
+$input-background-hover = $input-background
+$input-background-active = $input-background
+$input-text = $main-text-colour
+$input-text-hover = $input-text
+$input-text-active = $input-text
+$input-letter-spacing = 1px
+$input-border-width = 2px
+$input-border-radius = 7px
+$input-border-colour = transparent
+$input-border-colour-hover = transparent
+$input-border-colour-active = transparent
\ No newline at end of file