Style the login form

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "cosc212-assignment-1",
+  "name": "carbon",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

spec.js

@@ -2,121 +2,126 @@ module.exports = [
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",
-		target: "/static/whitney-500.woff"
+		target: "/static/whitney-500.woff",
 	},
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-400.woff",
-		target: "/static/whitney-400.woff"
+		target: "/static/whitney-400.woff",
 	},
 	{
 		type: "js",
 		source: "/js/basic.js",
-		target: "/static/basic.js"
+		target: "/static/basic.js",
 	},
 	{
 		type: "js",
 		source: "/js/groups.js",
-		target: "/static/groups.js"
+		target: "/static/groups.js",
 	},
 	{
 		type: "js",
 		source: "/js/chat-input.js",
-		target: "/static/chat-input.js"
+		target: "/static/chat-input.js",
 	},
 	{
 		type: "js",
 		source: "/js/room-picker.js",
-		target: "/static/room-picker.js"
+		target: "/static/room-picker.js",
 	},
 	{
 		type: "js",
 		source: "/js/store/store.js",
-		target: "/static/store/store.js"
+		target: "/static/store/store.js",
 	},
 	{
 		type: "js",
 		source: "/js/store/Subscribable.js",
-		target: "/static/store/Subscribable.js"
+		target: "/static/store/Subscribable.js",
 	},
 	{
 		type: "js",
 		source: "/js/store/SubscribeValue.js",
-		target: "/static/store/SubscribeValue.js"
+		target: "/static/store/SubscribeValue.js",
 	},
 	{
 		type: "js",
 		source: "/js/store/SubscribeMapList.js",
-		target: "/static/store/SubscribeMapList.js"
+		target: "/static/store/SubscribeMapList.js",
 	},
 	{
 		type: "js",
 		source: "/js/store/SubscribeSet.js",
-		target: "/static/store/SubscribeSet.js"
+		target: "/static/store/SubscribeSet.js",
 	},
 	{
 		type: "js",
 		source: "/js/sync/sync.js",
-		target: "/static/sync/sync.js"
+		target: "/static/sync/sync.js",
 	},
 	{
 		type: "js",
 		source: "/js/lsm.js",
-		target: "/static/lsm.js"
+		target: "/static/lsm.js",
 	},
 	{
 		type: "js",
 		source: "/js/Timeline.js",
-		target: "/static/Timeline.js"
+		target: "/static/Timeline.js",
 	},
 	{
 		type: "js",
 		source: "/js/Anchor.js",
-		target: "/static/Anchor.js"
+		target: "/static/Anchor.js",
 	},
 	{
 		type: "js",
 		source: "/js/chat.js",
-		target: "/static/chat.js"
+		target: "/static/chat.js",
 	},
 	{
 		type: "js",
 		source: "/js/functions.js",
-		target: "/static/functions.js"
+		target: "/static/functions.js",
 	},
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",
-		target: "/static/whitney-500.woff"
+		target: "/static/whitney-500.woff",
 	},
 	{
 		type: "file",
 		source: "/assets/icons/directs.svg",
-		target: "/static/directs.svg"
+		target: "/static/directs.svg",
 	},
 	{
 		type: "file",
 		source: "/assets/icons/channels.svg",
-		target: "/static/channels.svg"
+		target: "/static/channels.svg",
 	},
 	{
 		type: "file",
 		source: "/assets/icons/join-event.svg",
-		target: "/static/join-event.svg"
+		target: "/static/join-event.svg",
 	},
 	{
 		type: "sass",
 		source: "/sass/main.sass",
-		target: "/static/main.css"
+		target: "/static/main.css",
+	},
+	{
+		type: "sass",
+		source: "/sass/login.sass",
+		target: "/static/login.css",
 	},
 	{
 		type: "pug",
 		source: "/home.pug",
-		target: "/index.html"
+		target: "/index.html",
 	},
 	{
 		type: "pug",
 		source: "/login.pug",
-		target: "/login.html"
-	}
-]
+		target: "/login.html",
+	},
+];

src/login.pug

@@ -2,20 +2,28 @@ doctype html
 html
 	head
 		meta(charset="utf-8")
-		link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
+		link(rel="stylesheet" type="text/css" href=getStatic("/sass/login.sass"))
 		title Carbon
+		meta(name="viewport" content= "width=device-width, initial-scale=1.0") 
+
 	body
 		main.main
-			form
-				div
-					label(for="login") Username
-					input(type="text" name="login" autocomplete="username" placeholder="example:matrix.org" required)#login
-				div
-					label(for="password") Password
-					input(type="text" name="password" autocomplete="current-password" required)#password
-				div
+			div.center-login-container
+				h1 Welcome to the Matrix!
+				form.login-form
+					div.data-input
+						div.form-input-container
+							label(for="login") Username
+							input(type="text" name="login" autocomplete="username" required)#login
+						div.form-input-container
 	
-					label(for="homeserver") Homeserver
-					input(type="text" name="homeserver" value="matrix.org" required)#homeserver
-				div
-					input(type="submit" value="Login")
+							label(for="password") Password
+							input(name="password" autocomplete="current-password" type="password" required)#password
+						div.form-input-container
+	
+	
+							label(for="homeserver") Homeserver
+							input(type="text" name="homeserver" value="matrix.org" required)#homeserver
+					div.form-input-container
+	
+						input(type="submit" value="Login")

src/sass/login.sass

@@ -0,0 +1,58 @@
+@use "./base"
+@use "./colors.sass" as c
+
+.main
+  justify-content: center
+  align-items: center
+
+.center-login-container
+  display: flex
+  flex-flow: column
+  justify-content: center
+  align-items: center
+  width: min(100vw, 30rem)
+  padding: max(1rem,3vw) 2rem
+  height: 27rem
+  box-shadow: -2px 2px 10px c.$darkest
+  background-color: c.$darker
+  border-radius: 5px
+
+.login-form
+  align-items: center
+  flex: 1 1 auto
+  width: 100%
+  display: flex
+  justify-content: space-around
+  flex-flow: column
+
+.data-input
+  width: 100%
+  
+  
+.form-input-container
+  width: 100%
+  display: flex
+  flex-direction: column
+  margin: 1em 0
+
+input
+  width: 100%
+  height: 2.4rem
+  border-radius: 5px
+  box-sizing: border-box
+  transition: background-color 1s, border-color 1s
+  padding: 0px 1ch
+  border: 0px
+
+input[type="text"],input[type="password"]
+  border: 3px solid transparent
+  margin: 0.4em 0px
+  &:hover
+    border-color: c.$mild
+
+input[type="submit"]:hover
+    background-color: c.$mild
+
+label
+  font-size: 1.2em
+