Style the login form
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Bad 2020-10-20 20:22:13 +02:00
parent bbb7ee50eb
commit 3e28d4b6e1
4 changed files with 112 additions and 41 deletions

2
package-lock.json generated
View file

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

57
spec.js
View file

@ -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",
},
];

View file

@ -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
label(for="homeserver") Homeserver
input(type="text" name="homeserver" value="matrix.org" required)#homeserver
div
input(type="submit" value="Login")
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="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")

58
src/sass/login.sass Normal file
View file

@ -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