Move and restyle OAuth login links

- Move them above local login form
- Restyle as side-by-side buttons

Ref T712

pages/login.tmpl

@@ -1,7 +1,38 @@
 {{define "head"}}<title>Log in &mdash; {{.SiteName}}</title>
 <meta name="description" content="Log in to {{.SiteName}}.">
 <meta itemprop="description" content="Log in to {{.SiteName}}.">
-<style>input{margin-bottom:0.5em;}</style>
+<style>
+input{margin-bottom:0.5em;}
+.or {
+	text-align: center;
+	margin-bottom: 3.5em;
+}
+.or p {
+	display: inline-block;
+	background-color: white;
+	padding: 0 1em;
+}
+.or hr {
+	margin-top: -1.6em;
+	margin-bottom: 0;
+}
+hr.short {
+	max-width: 30rem;
+}
+.row.signinbtns {
+	justify-content: space-evenly;
+	font-size: 1em;
+	margin-top: 3em;
+	margin-bottom: 2em;
+}
+.loginbtn {
+	height: 40px;
+}
+#writeas-login {
+	box-sizing: border-box;
+	font-size: 17px;
+}
+</style>
 {{end}}
 {{define "content"}}
 <div class="tight content-container">
@@ -11,6 +42,22 @@
 		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
 	</ul>{{end}}
 
+	{{ if or .OauthSlack .OauthWriteAs }}
+		<div class="row content-container signinbtns">
+		{{ if .OauthSlack }}
+			<a class="loginbtn" href="/oauth/slack"><img alt="Sign in with Slack" height="40" width="172" src="/img/sign_in_with_slack.png" srcset="/img/sign_in_with_slack.png 1x, /img/sign_in_with_slack@2x.png 2x" /></a>
+		{{ end }}
+		{{ if .OauthWriteAs }}
+			<a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">Sign in with <strong>Write.as</strong></a>
+		{{ end }}
+		</div>
+
+		<div class="or">
+			<p>or</p>
+			<hr class="short" />
+		</div>
+	{{ end }}
+
 	<form action="/auth/login" method="post" style="text-align: center;margin-top:1em;" onsubmit="disableSubmit()">
 		<input type="text" name="alias" placeholder="Username" value="{{.LoginUsername}}" {{if not .LoginUsername}}autofocus{{end}} /><br />
 		<input type="password" name="pass" placeholder="Password" {{if .LoginUsername}}autofocus{{end}} /><br />
@@ -19,16 +66,6 @@
 	</form>
 
 	{{if and (not .SingleUser) .OpenRegistration}}<p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">{{if .Message}}{{.Message}}{{else}}<em>No account yet?</em> <a href="/">Sign up</a> to start a blog.{{end}}</p>{{end}}
-	{{ if .OauthSlack }}
-	<p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">
-	    <a href="/oauth/slack">Sign-in with Slack.</a>
-	</p>
-	{{ end }}
-	{{ if .OauthWriteAs }}
-    <p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">
-        <a href="/oauth/write.as">Sign-in with Write.As.</a>
-    </p>
-    {{ end }}
 
 <script type="text/javascript">
 function disableSubmit() {