Fixed mobile scaling issues

games.html

@@ -8,6 +8,7 @@
         <meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
         <meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
         <meta name="apple-mobile-web-app-capable" content="yes"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

home.html

@@ -8,6 +8,7 @@
         <meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
         <meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
         <meta name="apple-mobile-web-app-capable" content="yes"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

index.html

@@ -10,6 +10,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes"/>
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
         <link rel="stylesheet" href="main.css">
@@ -21,12 +22,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

login.html

@@ -11,6 +11,7 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
         <link rel="stylesheet" href="main.css">
         <script src="main.js"></script>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

main.css

@@ -1,8 +1,10 @@
 #alert {
     height: fit-content;
     margin: 0px;
-    padding-top: 1px;
+    padding-top: 2px;
-    padding-bottom: 1px;
+    padding-bottom: 2px;
+    padding-right: 5px;
+    padding-left: 5px;
     width: 100%;
     text-align: center;
 	background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
@@ -10,6 +12,7 @@
 .navbar {
     height: 40px;
     margin: 0px;
+    padding-right: 5px;
     padding-left: 5px;
     padding-top: 2px;
     padding-bottom: 2px;
@@ -28,9 +31,9 @@
 .navbarlogincontainer {
     position: relative;
     padding-right: 10px;
-    margin-right: 0px;
+    margin-right: 3%;
     margin-left: auto;
-    float: right;
+    float: inline-end;
     top: 11px;
 }
 .navbarbutton {
@@ -48,10 +51,11 @@
     height: 25px;
     margin: 0px;
     padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     display: inline-table;
-    padding-top: 3px;
     vertical-align: middle;
-    padding-bottom: 3px;
     width: 100%;
     line-height: normal;
     color: rgb(255, 255, 255);
@@ -72,16 +76,16 @@ html {
 }
 body {
     margin-left: 0px;
-    margin-right: 0px;
+    margin-right: 0px;  
     margin-top: 0px;
 }
 .content {
     color: black;
+    min-height: 300px;
+    max-width: 1000px;
+    margin: auto;
     padding-left: 5px;
     padding-right: 5px;
-    margin-left: 1px;
-    margin-right: 0px;
-    margin-top: 0px;
     background-color: white;
     padding-bottom: 5px;
     padding-top: 5px;
@@ -91,8 +95,14 @@ body {
 }
 footer {
     text-align: center;
+    max-width: 1000px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    padding-top: 5px;
     background-color: rgb(179, 179, 179);
-    min-height: 400px;
+    min-height: fit-content;
+    margin: auto;
 }
 p,h1 {
     margin: 0px;

main.js

@@ -1,6 +1,12 @@
 window.addEventListener('resize', function() {
     var logo_full = document.getElementById("logo_full")
     var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
     var viewport_width = window.innerWidth;
     if (viewport_width < 900) {
         logo_full.className = "invisible";
@@ -9,30 +15,82 @@ window.addEventListener('resize', function() {
         logo_small.className = "invisible";
         logo_full.className = "";
     }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
 });
 window.onload = function() {
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
     var alert = document.getElementById("alert")
     var alerttext = document.getElementById("alerttext")
-    var morblox = document.getElementById("morblox")
     if (window.location.hostname == "") {   
         alerttext.innerHTML = "You are using this locally.";
         alert.className = "";
-        morblox.className = "";
     } else if (window.location.hostname == "thomasluigi07.github.io") {
         alerttext.innerHTML = "You are using this on the github pages site.";
         alert.className = "";
-        morblox.className = "";
     } else if (window.location.hostname == "MORBLOX.com") {
             alerttext.innerHTML = "You are using MORBLOX.com";
             alert.className = "";
-            morblox.className = "";
     } else if (window.location.hostname == "morblox.us") {
         alerttext.innerHTML = "You are using morblox.us";
         alert.className = "";
-        morblox.className = "invisible";
     } else {
         alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
         alert.className = "";
-        morblox.className = "";
     }
 };

nimda/panel.html

@@ -8,6 +8,7 @@
         <meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
         <meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
         <meta name="apple-mobile-web-app-capable" content="yes"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

privacy.html

@@ -7,6 +7,7 @@
         <meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/" property="og:url"/>
         <meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
         <meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes"/>
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Disallow: /nimda/

signup.html

@@ -9,6 +9,7 @@
         <meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
         <meta name="apple-mobile-web-app-capable" content="yes"/>
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

tos.html

@@ -11,6 +11,7 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
         <link rel="apple-touch-icon" href="MORBLOX.png"/>
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
         <link rel="stylesheet" href="main.css">
         <script src="main.js"></script>
@@ -20,12 +21,12 @@
             <a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
             <a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
             <div class="navbarbuttoncontainer">
-                <a class="navbarbutton" href="home.html">Home</a>
+                <a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
-                <a class="navbarbutton" href="games.html">Games</a>
+                <a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
-                <a class="navbarbutton" href="catalog.html">Catalog</a>
+                <a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
-                <a class="navbarbutton" href="build.html">Build</a>
+                <a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
-                <a class="navbarbutton" href="upgrade.html">Upgrade</a>
+                <a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
-                <a class="navbarbutton" href="forum.html">Forum</a>
+                <a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
             </div>
             <div class="navbarlogincontainer">
                 <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>