diff options
Diffstat (limited to 'public/css')
| -rw-r--r-- | public/css/login.css | 41 | ||||
| -rw-r--r-- | public/css/main.css | 126 |
2 files changed, 167 insertions, 0 deletions
diff --git a/public/css/login.css b/public/css/login.css new file mode 100644 index 0000000..6a08c8f --- /dev/null +++ b/public/css/login.css @@ -0,0 +1,41 @@ +.login { + background-color: #f0f2f5; + display: flex; + justify-content: center; + align-content: center; + flex-direction: row; + padding: 8em 0em; +} + +.prompt { + display: flex; + flex-direction: column; + background-color: white; + box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); + border-radius: 8px; + width: 396px; +} + +.show { + display: flex; + flex-direction: column; + justify-content: center; +} + +.login-button { + margin-bottom: 10px; + font-size: 20px; + font-weight: 10000; +} + +.newacc { + margin: 10px 70px; + margin-bottom: 20px; +} + +@media (max-aspect-ratio: 2/3) { + .login { + flex-direction: column; + align-items: center; + } +}
\ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..c8fb85e --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,126 @@ +body { + background-color: white; + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; +} + +@font-face { + font-family: facebook; + src: url("../fonts/facebook.otf") format("opentype"); +} + +@font-face { + font-family: sfpro; + src: url("../fonts/sfpro.otf") format("opentype"); +} + +.logo { + color: #1778f2; + font-size: 3.5em; + font-family: facebook; +} + +.text { + font-family: sfpro; + font-size: 28px; + font-weight: normal; + line-height: 32px; + width: 500px; +} + +.btext { + font-family: sfpro; + color: #1778f2 +} + +.ctext { + font-family: sfpro; + text-align: center; +} + +a { + text-decoration: none; + cursor: pointer; +} + +p { + padding: 0; + margin: 0; +} + +span { + padding: 0; + margin: 0; +} + +footer { + bottom: 0; + height: 400px; + background-color: white; +} + +input { + all: unset; + font-family: sfpro; + background-color: white; + padding: 10px; + margin: 20px; + margin-bottom: 0; + border-radius: 5px; + border: 1px solid #dddfe2; + color: #1d2129; + font-size: 18px; +} + +input:focus { + border: 1px solid #1778f2; +} + +.primary { + all: unset; + font-family: sfpro; + background-color: #1778f2; + color: white; + padding: 10px; + margin: 20px; + border-radius: 5px; + font-weight: 1000; + text-align: center; + cursor: pointer; +} + +.success { + all: unset; + font-family: sfpro; + background-color: #42b72a; + color: white; + padding: 10px; + margin-bottom: 10px; + margin-left: 10px; + margin-right: 10px; + border-radius: 5px; + text-align: center; + cursor: pointer; +} + +.line { + width: calc(100% - 40px); + margin-left: 20px; + margin-right: 20px; + border-bottom: 1px solid #dadde1; + margin-bottom: 10px; + margin-top: 10px; +} + +footer { + text-align: center; + font-family: sfpro; + padding-top: 30px; + padding-bottom: 30px; + font-size: 13px; + color: #737373; +} |