html head title Flitter meta(name="viewport" content="width=device-width, initial-scale=1") link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous") script(src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous") 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") style(type="text/css"). @import url('https://fonts.googleapis.com/css?family=Rajdhani'); html, body { background-color:#343a40; } #intro { color: #cccccc; text-align: center; } #login { width: 50em; } .login-container { display: grid; align-items: center; border: 4px solid #ccc; padding: 0.01em 0.02em; border-radius: .35rem; } .login-container div a { width: 100%; } .icons { font-size: 1.6em; padding: 1.1em 1.1em 1.1em 1.1em; } body .container#intro h1 Hi, Welcome to #{app_name}. h2 Choose your login method. .container#login .login-container div a.btn.btn-light.btn-lg(href="/auth/flitter/login") i.icons.fas.fa-sign-in-alt span Local Login div a.btn.btn-light.btn-lg(href="/auth/github_oauth/login") i.icons.fab.fa-github span Login with GitHub div a.btn.btn-light.btn-lg.disabled(href="google.com") i.icons.fab.fa-google span Login with Google div a.btn.btn-light.btn-lg.disabled(href="microsoft.com") i.icons.fab.fa-microsoft span Login with Microsoft div a.btn.btn-light.btn-lg.disabled(href="microsoft.com") i.icons.fab.fa-apple span Login with Apple