Better links on bottom and displaying max file size

pages/home.html

@@ -15,9 +15,10 @@
                     <p id="b">
                         <img class='logo' src="/images/logo.png">
                     </p>
-                    <h1 id="bulma" class="title">loli-safe</h1>
-                    <h2 id="modern-framework" class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
+                    <h1 class="title">loli-safe</h1>
+                    <h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
 
+                    <h3 class="subtitle" id="maxFileSize"></h2>
                     <div class="columns">
                         <div class="column is-hidden-mobile"></div>
                         <div class="column" id='uploadContainer'>
@@ -31,23 +32,9 @@
                         <div class="column is-hidden-mobile"></div>
                     </div>
 
-                    <div class="columns">
-                        <div class="column is-hidden-mobile"></div>
-                        <div class="column"><a id='panel' href="/panel" target="_blank" class="is-danger">Dashboard</a></div>
-                        <div class="column is-hidden-mobile"></div>
-                    </div>
-
-                    <div class="columns">
-                        <div class="column is-hidden-mobile"></div>
-                        <div class="column">
-                            <p>
-                                <a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a>
-                                |
-                                <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a>
-                            </p>
-                        </div>
-                        <div class="column is-hidden-mobile"></div>
-                    </div>
+                    <h3 id="links">
+                        <a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a><span>|</span><a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a><span>|</span><a href="/panel" target="_blank" class="is-danger">Dashboard</a>
+                    </h3>
 
                     <div id="uploads">
                         <div id="template" class="columns">

public/css/style.css

@@ -2,7 +2,7 @@
 		HOME
 ------------------ */
 
-#b {
+section#home #b {
 	-webkit-animation-delay: 0.5s;
 	animation-delay: 0.5s;
 	-webkit-animation-duration: 1.5s;
@@ -23,7 +23,7 @@
 	box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
 }
 
-div#dropzone {
+section#home div#dropzone {
 	border: 1px solid #dbdbdb;
 	background-color: rgba(0, 0, 0, 0);
     border-color: #ff3860;
@@ -44,18 +44,25 @@ div#dropzone {
     cursor: pointer;   
 }
 
-div#dropzone:hover {
+section#home div#dropzone:hover {
 	background-color: #ff3860;
     border-color: #ff3860;
     color: #fff;
 }
 
-div#uploads, p#tokenContainer, a#panel { display: none; }
+section#home div#uploads, section#home p#tokenContainer, section#home a#panel { display: none; }
 
-img.logo { height: 200px; margin-top: 20px; }
-.dz-preview .dz-details { display: flex; }
-.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }
-.dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none }
+section#home img.logo { height: 200px; margin-top: 20px; }
+section#home .dz-preview .dz-details { display: flex; }
+section#home .dz-preview .dz-details .dz-size, section#home .dz-preview .dz-details .dz-filename { flex: 1 }
+section#home .dz-preview img, section#home .dz-preview .dz-success-mark, section#home .dz-preview .dz-error-mark { display: none }
+section#home h3#links span {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+section#home h3#maxFileSize {
+	font-size: 14px;
+}
 
 @keyframes floatUp {
 	0% {

public/js/upload.js

@@ -64,9 +64,9 @@ upload.prepareUpload = function(){
 	div.innerHTML = 'Click here or drag and drop files';
 	div.style.display = 'flex';
 
+	document.getElementById('maxFileSize').innerHTML = 'Maximum upload size per file is ' + upload.maxFileSize;
 	document.getElementById('tokenContainer').style.display = 'none';
 	document.getElementById('uploadContainer').appendChild(div);
-	document.getElementById('panel').style.display = 'block';
 
 	upload.prepareDropzone();