Style the login form
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
bbb7ee50eb
commit
3e28d4b6e1
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "cosc212-assignment-1",
|
||||
"name": "carbon",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
|
|
|
|||
57
spec.js
57
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",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
Loading…
Reference in New Issue