Login scroll helper for mobile

templates/login.html

@@ -6,6 +6,7 @@
 <style>
 html, body {
 	height: 100%;
+	scroll-behavior: smooth;
 }
 
 .main-head{
@@ -22,35 +23,44 @@ html, body {
 	display: grid;
 	grid-template-rows: 25% 50% 25%;
 	height: 100%;
+
+	overflow: hidden;
 }
 
 .sidenav > div:nth-child(1n) {
 	grid-row-start: 1;
-	grid-row-end: 2;
 }
 
 .sidenav > div:nth-child(2n) {
-	grid-row-start: 3;
-	grid-row-end: 3;
+	grid-row-start: 2;
+	align-self: center;
+}
 
+.sidenav > div:nth-child(3n) {
+	grid-row-start: 3;
 	align-self: end;
 }
 
-.main {
+#main {
     padding: 0px 10px;
 	display: grid;
 	grid-template-rows: 25% auto;
 	height: 100%;
 }
 
-.main > .col:nth-child(1n) {
+#main > .col:nth-child(1n) {
 	grid-row-start: 1;
 }
 
-.main > .col:nth-child(2n) {
+#main > .col:nth-child(2n) {
 	grid-row-start: 2;
 }
 
+#focus-login {
+	text-decoration: none;
+	color: #fff;
+}
+
 @media screen and (max-height: 450px) {
     .sidenav {padding-top: 15px;}
 }
@@ -66,21 +76,24 @@ html, body {
 }
 
 @media screen and (min-width: 768px){
-    .main{
+    #main{
         margin-left: 40%; 
     }
 
-    .sidenav{
+    .sidenav {
         width: 40%;
         position: fixed;
         z-index: 1;
         top: 0;
         left: 0;
     }
+
+	#focus-login {
+		display: none;
+	}
 }
 
 .login-main-text{
-    margin-top: 20%;
     padding: 60px;
     color: #fff;
 }
@@ -157,6 +170,9 @@ function toggleform(caller) {
 		<h2>Husstanden<br>{{ _("Login Page") }}</h2>
 		<p>{{ _("Login is required to use this service.") }}</p>
 	</div>
+	<div class="text-center mx-auto">
+		<a href="#main" class="display-1" id="focus-login">Login</a>
+	</div>
 	<div class="btn-group dropup m-2">
 		<div>
 			<div class="btn btn-secondary col d-flex m-1" data-toggle="dropdown" aria-expanded="false">
@@ -188,7 +204,7 @@ function toggleform(caller) {
 		</div>
 	</div>
 </div>
-<div class="main">
+<div id="main">
 	<div class="col pt-4">
 {% with messages = get_flashed_messages(with_categories = true) %}
 	{% if messages %}