some mobile friendliness updates

src/script/main.js

@@ -1,6 +1,13 @@
 window.$ = require('jquery')
 
 $(document).ready(function () {
+  if (window.location.hash) {
+    let hash = window.location.hash 
+    if ($(hash).length) {
+      $(window).scrollTop($(hash).offset().top - $('.navigator').innerHeight() * 2)
+    }
+  }
+
   $(window).on('scroll', function() {
     if($(window).scrollTop() >= $('.banner').innerHeight()) {
       $('.anchor').css('height', $('.navigator').innerHeight() + 'px')
@@ -35,9 +42,42 @@ $(document).ready(function () {
     }, 1000, 'swing')
   })
 
+  $('#mobile').click(function (e) {
+    e.preventDefault()
+    $('.flexview').toggleClass('extended')
+  })
+
+  $('body').click(function(e) {
+    if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) {
+      $('.flexview').removeClass('extended')
+    }
+  })
+
+  if ($('#repeatcheck').length) {
+    function pwcheck (e) {
+      let pw = $('#password').val()
+      let pwa = $('#password_repeat').val()
+      if (pwa !== pw) {
+        $('#password_repeat').addClass('invalid')
+        $('#repeatcheck').show()
+        $('#repeatcheck').html('<span class="error">The passwords do not match.</span>')
+      } else {
+        $('#password_repeat').removeClass('invalid')
+        $('#repeatcheck').hide()
+        $('#repeatcheck').html('')
+      }
+    }
+
+    $('#password_repeat').on('keyup', pwcheck)
+    $('#password').on('keyup', function (e) {
+      if ($('#password_repeat').val()) {
+        pwcheck(e)
+      }
+    })
+  }
+
   window.checkLoginState = function () {
     FB.getLoginStatus(function(response) {
-      console.log(response)
       $.ajax({
         type: 'post',
         url: '/api/external/facebook/callback',
@@ -45,7 +85,6 @@ $(document).ready(function () {
         data: response,
         success: (data) => {
           if (data.error) {
-            console.log(data)
             $('.message').addClass('error')
             $('.message span').text(data.error)
             return

src/style/main.styl

@@ -2,11 +2,15 @@ body
     margin: 0
     color: black
     font-family: sans-serif
-    background-color: #82fff4;
+    /*background-color: #82fff4;
     background-image: linear-gradient(-45deg, #80d7ff 25%, transparent 25.5%, transparent 50%, 
         #80d7ff 50.5%, #80d7ff 75%, transparent 75.5%, transparent)
     height: 100vh;
-    background-size: 50px 50px;
+    background-size: 50px 50px;*/
+    background: #6fefff
+    background: -moz-linear-gradient(top, #6fefff 0%, #53cbf1 51%, #05abe0 100%)
+    background: -webkit-linear-gradient(top, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
+    background: linear-gradient(to bottom, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
 
 a
     color: green
@@ -148,7 +152,7 @@ footer
 
 .wrapper
     overflow: hidden
-    height: 100vh
+    min-height: 100vh
 
 .document
     overflow: hidden
@@ -161,6 +165,38 @@ footer
     width: 60%
     font-size: 120%
 
+//.cssextend:hover > .flexview
+//    display: block
+//    left: 40%
+
+ul.flexview
+    position: fixed
+    right: 0
+    left: 100%
+    width: auto
+    top: 68px
+    bottom: 0
+    background-color: rgba(53, 53, 53, 0.8)
+    z-index: 1
+    overflow: hidden
+    transition: all 0.1s linear
+
+    .division
+        border-top: 1px solid #a7a7a7
+
+    li
+        display: block
+        min-width: 100px
+        a
+            display: block
+            padding: 5px 20px
+            color: #fff
+            font-weight: normal
+            text-transform: none
+    &.extended
+        display: block
+        left: 40%
+
 code
     white-space: pre
 
@@ -175,6 +211,7 @@ input:not([type="submit"])
     border: 1px solid #c1c1c1
     background-color: #f5f5f5
     box-shadow: inset 2px 2px 5px #ddd
+    transition: border 0.1s linear
 
 input[type="submit"]
     display: block
@@ -219,7 +256,7 @@ input[type="submit"]
             padding: 0 12px
 
 .twitterLogin
-    display: inline-block
+    display: block
     padding: 10px
     width: 215px
     margin: 5px 0
@@ -238,11 +275,11 @@ input[type="submit"]
         margin-left: 12px;
 
 .discordLogin
+    display: block;
     background-color: #99AAB5;
     width: 225px;
     height: 40px;
     padding: 5px 5px;
-    display: inline-block;
     border-radius: 5px;
     text-decoration: none
     span
@@ -317,6 +354,20 @@ input.authorize
     color: #fff
     border: 1px solid #2196F3
 
+input.deny
+    font-size: 160%
+    background-color: #f10
+    border: 1px solid #e00000
+    color: #fff
+
+input.invalid
+    border: 1px solid #f00
+    outline: red
+
+#repeatcheck
+    color: red
+    padding: 10px
+
 @media all and (max-width: 800px)
     .navigator
         padding: 0 10px
@@ -356,6 +407,13 @@ input.authorize
             margin-top: 0
         p
             font-size: 100%
+    .box
+        .left, .right
+            float: initial !important
+            display: block !important
+            border: 0 !important
+            width: fit-content !important
+            margin: auto
 
 @media all and (max-width: 500px)
     section

views/authorization.pug

@@ -18,7 +18,7 @@ block body
 						.info
 							.name= client.title
 							.description= client.description
-							a.url(href=client.url)= client.url
+							a.url(href=client.url, target="_blank", rel="nofollow")= client.url
 					form#loginForm(method="POST", action="")
 						input(type="hidden", name="csrf", value=csrf)
 						input(type="hidden", name="decision", value='1')
@@ -26,7 +26,7 @@ block body
 					form#loginForm(method="POST", action="")
 						input(type="hidden", name="csrf", value=csrf)
 						input(type="hidden", name="decision", value='0')
-						input(type="submit", value="Deny")
+						input.deny(type="submit", value="Deny")
 				.right
 					.haveaccess 
 						span This application can

views/layout.pug

@@ -38,9 +38,23 @@ html
 						li
 							a(href="/login") Log in
 				ul.mobview.floating
-					li
+					li.cssextend
 						a#mobile(href="#")
 							i.fa.fa-fw.fa-bars
+						ul.flexview
+							li
+								a.scroll(href="/#home") Home
+							li
+								a.scroll(href="/#news") News
+							.division
+							if user
+								li#user
+									a(href="/user/manage") #{user.display_name}
+								li
+									a(href="/logout") Log out
+							else
+								li
+									a(href="/login") Log in
 		block body
 		block footer
 			footer

views/login.pug

@@ -6,8 +6,8 @@ block body
 	.wrapper
 		.boxcont
 			.box#login
-				.left
 				h1 Log in
+				.left
 					if message
 						if message.error
 							.message.error
@@ -23,5 +23,4 @@ block body
 						input(type="submit", value="Log in")
 					a#create(href="/register") Create an account
 				.right
-					h3 More options
 					include includes/external.pug

views/register.pug

@@ -6,8 +6,8 @@ block body
 	.wrapper
 		.boxcont
 			.box#login
-				.left
 				h1 Create a new account
+				.left
 					if message
 						if message.error
 							.message.error
@@ -30,5 +30,4 @@ block body
 						input(type="submit", value="Register")
 					a#create(href="/login") Log in with an existing account
 				.right
-					h3 More options
 					include includes/external.pug