diff --git a/app/assets/auth/forms.css b/app/assets/auth/forms.css index fd4f1d5..aa10681 100644 --- a/app/assets/auth/forms.css +++ b/app/assets/auth/forms.css @@ -2,27 +2,40 @@ --input-padding-x: 1.5rem; --input-padding-y: 0.75rem; } - +body { + background-image: url('https://images.unsplash.com/photo-1501618669935-18b6ecb13d6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1464&q=80'); + background-position: 60% 20%; +} +@media all and (max-width: 768px) { + body { + background-image: none; + background-color: #F1EFE7; + } +} .login, .image { min-height: 100vh; } - -.bg-image { - background-image: url('https://source.unsplash.com/4812YdII6W0/2592x1728'); - background-size: cover; - background-position: center; +.name-banner{ + font-family: 'Merienda', cursive; } - .login-heading { font-weight: 300; } .btn-login { - font-size: 0.9rem; - letter-spacing: 0.05rem; - padding: 0.75rem 1rem; - border-radius: 2rem; + border: solid 7px #41403E; + align-self: center; + background: transparent; + padding: 1rem 1rem; + -webkit-transition: all .5s ease; + transition: all .5s ease; + color: #41403E; + font-size: 2rem; + letter-spacing: 1px; + outline: none; + box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; } .form-label-group { @@ -92,7 +105,7 @@ } .form-submit-button { - margin-top: 50px; + margin-top: 30px; margin-bottom: 50px; } diff --git a/app/views/auth/auth_page.pug b/app/views/auth/auth_page.pug index dcfe053..fc4bfc8 100644 --- a/app/views/auth/auth_page.pug +++ b/app/views/auth/auth_page.pug @@ -4,14 +4,16 @@ html meta(name='viewport' content='width=device-width initial-scale=1') link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') link(rel='stylesheet' href='/assets/auth/forms.css') + link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet") body .container-fluid .row.no-gutter - .d-none.d-md-flex.col-md-6.col-lg-8.bg-image - .col-md-6.col-lg-4 + .d-none.d-md-flex.col-md-5 + .col-md-5 .login.d-flex.align-items-center.py-5 .container .row .col-md-9.col-lg-8.mx-auto + h2.name-banner #{_app.name} block content script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') diff --git a/app/views/login.pug b/app/views/login.pug index 405c649..a4f56ff 100644 --- a/app/views/login.pug +++ b/app/views/login.pug @@ -7,6 +7,8 @@ html script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous") script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous") script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous") + link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet") + style(type="text/css"). @import url('https://fonts.googleapis.com/css?family=Rajdhani'); html, @@ -17,6 +19,9 @@ html color: #cccccc; text-align: center; } + #name { + font-family: 'Merienda', cursive; + } #login { width: 50em; } @@ -37,7 +42,8 @@ html body .container#intro - h1 Hi, Welcome to #{app_name}. + h1 Hi, Welcome to + span#name #{app_name}. h2 Choose your login method. .container#login