Fixed support for smaller window width

coffandro · May 9, 2024 · 8835c7e · 8835c7e
1 parent ea63259
commit 8835c7e
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 151 deletions.
diff --git a/CV.html b/CV.html
@@ -30,30 +30,39 @@
 <div id="nav-placeholder">
 </div>
 <script>
-// loading a different nav bar depending on phone type
-if (
-    navigator.userAgent.match(/Android/i) || 
-    navigator.userAgent.match(/webOS/i) || 
-    navigator.userAgent.match(/iPhone/i) || 
-    navigator.userAgent.match(/iPad/i) || 
-    navigator.userAgent.match(/iPod/i) || 
-    navigator.userAgent.match(/BlackBerry/i) || 
-    navigator.userAgent.match(/Windows Phone/i)) 
-{
-    document.documentElement.classList.toggle("mobile");
-    document.getElementById('mnav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/mobile-navbar.html");
-    });
-}
-// nav bar for touch-screen (mobile) devices
-else 
-{
-    document.getElementById('nav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/navbar.html");
-    });
-}
+LoadNavBar = function() {
+    // loading a different nav bar depending on phone type
+    if (
+        navigator.userAgent.match(/Android/i) || 
+        navigator.userAgent.match(/webOS/i) || 
+        navigator.userAgent.match(/iPhone/i) || 
+        navigator.userAgent.match(/iPad/i) || 
+        navigator.userAgent.match(/iPod/i) || 
+        navigator.userAgent.match(/BlackBerry/i) || 
+        navigator.userAgent.match(/Windows Phone/i) || 
+        window.innerWidth <= 800)
+    {
+        document.documentElement.classList.toggle("mobile", true);
+        document.getElementById('mnav').removeAttribute('disabled');
+        $(function(){
+            $("#nav-placeholder").load("/mobile-navbar.html");
+        });
+    }
+    // nav bar for touch-screen (mobile) devices
+    else 
+    {
+        document.documentElement.classList.toggle("mobile", false);
+        document.getElementById('nav').removeAttribute('disabled');
+        $(function(){
+            $("#nav-placeholder").load("/navbar.html");
+        });
+    }
+};
+
+window.onresize = function() {
+  LoadNavBar()
+};
+LoadNavBar()
 // nav bar for everything else (desktop)
 </script>
 <!--end of Navigation bar-->

diff --git a/about.html b/about.html
@@ -31,31 +31,40 @@
 <div id="nav-placeholder">
 </div>
 <script>
-// loading a different nav bar depending on phone type
-if (
-    navigator.userAgent.match(/Android/i) || 
-    navigator.userAgent.match(/webOS/i) || 
-    navigator.userAgent.match(/iPhone/i) || 
-    navigator.userAgent.match(/iPad/i) || 
-    navigator.userAgent.match(/iPod/i) || 
-    navigator.userAgent.match(/BlackBerry/i) || 
-    navigator.userAgent.match(/Windows Phone/i)) 
-{
-    document.documentElement.classList.toggle("mobile");
-    document.getElementById('mnav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/mobile-navbar.html");
-    });
-}
-// nav bar for touch-screen (mobile) devices
-else 
-{
-    document.getElementById('nav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/navbar.html");
-    });
-}
-// nav bar for everything else (desktop)
+  LoadNavBar = function() {
+      // loading a different nav bar depending on phone type
+      if (
+          navigator.userAgent.match(/Android/i) || 
+          navigator.userAgent.match(/webOS/i) || 
+          navigator.userAgent.match(/iPhone/i) || 
+          navigator.userAgent.match(/iPad/i) || 
+          navigator.userAgent.match(/iPod/i) || 
+          navigator.userAgent.match(/BlackBerry/i) || 
+          navigator.userAgent.match(/Windows Phone/i) || 
+          window.innerWidth <= 800)
+      {
+          document.documentElement.classList.toggle("mobile", true);
+          document.getElementById('mnav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/mobile-navbar.html");
+          });
+      }
+      // nav bar for touch-screen (mobile) devices
+      else 
+      {
+          document.documentElement.classList.toggle("mobile", false);
+          document.getElementById('nav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/navbar.html");
+          });
+      }
+  };
+
+  window.onresize = function() {
+    LoadNavBar()
+  };
+  LoadNavBar()
+  // nav bar for everything else (desktop)
 </script>
 <!--end of Navigation bar-->
 

diff --git a/art.html b/art.html
@@ -31,31 +31,40 @@
 <div id="nav-placeholder">
 </div>
 <script>
-// loading a different nav bar depending on phone type
-if (
-    navigator.userAgent.match(/Android/i) || 
-    navigator.userAgent.match(/webOS/i) || 
-    navigator.userAgent.match(/iPhone/i) || 
-    navigator.userAgent.match(/iPad/i) || 
-    navigator.userAgent.match(/iPod/i) || 
-    navigator.userAgent.match(/BlackBerry/i) || 
-    navigator.userAgent.match(/Windows Phone/i)) 
-{
-    document.documentElement.classList.toggle("mobile");
-    document.getElementById('mnav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/mobile-navbar.html");
-    });
-}
-// nav bar for touch-screen (mobile) devices
-else 
-{
-    document.getElementById('nav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/navbar.html");
-    });
-}
-// nav bar for everything else (desktop)
+  LoadNavBar = function() {
+      // loading a different nav bar depending on phone type
+      if (
+          navigator.userAgent.match(/Android/i) || 
+          navigator.userAgent.match(/webOS/i) || 
+          navigator.userAgent.match(/iPhone/i) || 
+          navigator.userAgent.match(/iPad/i) || 
+          navigator.userAgent.match(/iPod/i) || 
+          navigator.userAgent.match(/BlackBerry/i) || 
+          navigator.userAgent.match(/Windows Phone/i) || 
+          window.innerWidth <= 800)
+      {
+          document.documentElement.classList.toggle("mobile", true);
+          document.getElementById('mnav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/mobile-navbar.html");
+          });
+      }
+      // nav bar for touch-screen (mobile) devices
+      else 
+      {
+          document.documentElement.classList.toggle("mobile", false);
+          document.getElementById('nav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/navbar.html");
+          });
+      }
+  };
+
+  window.onresize = function() {
+    LoadNavBar()
+  };
+  LoadNavBar()
+  // nav bar for everything else (desktop)
 </script>
 <!--end of Navigation bar-->
 

diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -288,7 +288,7 @@ summary::-webkit-details-marker {
 }
 .mobile .CVSideBar {
     position: relative;
-    width: 100%;
+    width: 96%;
 }
 .mobile .CVLanguages {
     width: 95%;
@@ -316,18 +316,24 @@ summary::-webkit-details-marker {
 }
 
 #CVPic {
+    width: 100%;
     border-radius: 25px;
     padding: 0;
     margin: 0;
 }
 
 #CVPicContainer {
+    width: 90%;
     border: 2px solid var(--main-color);
     float: left;
     margin: 10px;
     padding: 10px;
 }
-
+
+.mobile #CVPicContainer {
+    width: 94%;
+}
+
 #CVPicContainer:hover {
     transform: translate(-.5rem ,-.5rem);
     box-shadow: .5rem .5rem 0 var(--shadow);

diff --git a/games.html b/games.html
@@ -31,31 +31,40 @@
 <div id="nav-placeholder">
 </div>
 <script>
-// loading a different nav bar depending on phone type
-if (
-    navigator.userAgent.match(/Android/i) || 
-    navigator.userAgent.match(/webOS/i) || 
-    navigator.userAgent.match(/iPhone/i) || 
-    navigator.userAgent.match(/iPad/i) || 
-    navigator.userAgent.match(/iPod/i) || 
-    navigator.userAgent.match(/BlackBerry/i) || 
-    navigator.userAgent.match(/Windows Phone/i)) 
-{
-    document.documentElement.classList.toggle("mobile");
-    document.getElementById('mnav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/mobile-navbar.html");
-    });
-}
-// nav bar for touch-screen (mobile) devices
-else 
-{
-    document.getElementById('nav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/navbar.html");
-    });
-}
-// nav bar for everything else (desktop)
+  LoadNavBar = function() {
+      // loading a different nav bar depending on phone type
+      if (
+          navigator.userAgent.match(/Android/i) || 
+          navigator.userAgent.match(/webOS/i) || 
+          navigator.userAgent.match(/iPhone/i) || 
+          navigator.userAgent.match(/iPad/i) || 
+          navigator.userAgent.match(/iPod/i) || 
+          navigator.userAgent.match(/BlackBerry/i) || 
+          navigator.userAgent.match(/Windows Phone/i) || 
+          window.innerWidth <= 800)
+      {
+          document.documentElement.classList.toggle("mobile", true);
+          document.getElementById('mnav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/mobile-navbar.html");
+          });
+      }
+      // nav bar for touch-screen (mobile) devices
+      else 
+      {
+          document.documentElement.classList.toggle("mobile", false);
+          document.getElementById('nav').removeAttribute('disabled');
+          $(function(){
+              $("#nav-placeholder").load("/navbar.html");
+          });
+      }
+  };
+
+  window.onresize = function() {
+    LoadNavBar()
+  };
+  LoadNavBar()
+  // nav bar for everything else (desktop)
 </script>
 <!--end of Navigation bar-->
 

diff --git a/index.html b/index.html
@@ -31,31 +31,40 @@
 <div id="nav-placeholder">
 </div>
 <script>
-// loading a different nav bar depending on phone type
-if (
-    navigator.userAgent.match(/Android/i) || 
-    navigator.userAgent.match(/webOS/i) || 
-    navigator.userAgent.match(/iPhone/i) || 
-    navigator.userAgent.match(/iPad/i) || 
-    navigator.userAgent.match(/iPod/i) || 
-    navigator.userAgent.match(/BlackBerry/i) || 
-    navigator.userAgent.match(/Windows Phone/i)) 
-{
-    document.documentElement.classList.toggle("mobile");
-    document.getElementById('mnav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/mobile-navbar.html");
-    });
-}
-// nav bar for touch-screen (mobile) devices
-else 
-{
-    document.getElementById('nav').removeAttribute('disabled');
-    $(function(){
-        $("#nav-placeholder").load("/navbar.html");
-    });
-}
-// nav bar for everything else (desktop)
+    LoadNavBar = function() {
+        // loading a different nav bar depending on phone type
+        if (
+            navigator.userAgent.match(/Android/i) || 
+            navigator.userAgent.match(/webOS/i) || 
+            navigator.userAgent.match(/iPhone/i) || 
+            navigator.userAgent.match(/iPad/i) || 
+            navigator.userAgent.match(/iPod/i) || 
+            navigator.userAgent.match(/BlackBerry/i) || 
+            navigator.userAgent.match(/Windows Phone/i) || 
+            window.innerWidth <= 800)
+        {
+            document.documentElement.classList.toggle("mobile", true);
+            document.getElementById('mnav').removeAttribute('disabled');
+            $(function(){
+                $("#nav-placeholder").load("/mobile-navbar.html");
+            });
+        }
+        // nav bar for touch-screen (mobile) devices
+        else 
+        {
+            document.documentElement.classList.toggle("mobile", false);
+            document.getElementById('nav').removeAttribute('disabled');
+            $(function(){
+                $("#nav-placeholder").load("/navbar.html");
+            });
+        }
+    };
+
+    window.onresize = function() {
+      LoadNavBar()
+    };
+    LoadNavBar()
+    // nav bar for everything else (desktop)
 </script>
 <!--end of Navigation bar-->