From 8835c7eb131366dbb1e75c5891cc52401ce3cc8d Mon Sep 17 00:00:00 2001
From: coffandro <macrosedk@gmail.com>
Date: Thu, 9 May 2024 15:11:28 +0200
Subject: [PATCH] Fixed support for smaller window width

---
 CV.html            | 57 +++++++++++++++++++++++++-------------------
 about.html         | 59 ++++++++++++++++++++++++++--------------------
 art.html           | 59 ++++++++++++++++++++++++++--------------------
 css/stylesheet.css | 10 ++++++--
 games.html         | 59 ++++++++++++++++++++++++++--------------------
 index.html         | 59 ++++++++++++++++++++++++++--------------------
 wishList.html      | 59 ++++++++++++++++++++++++++--------------------
 7 files changed, 211 insertions(+), 151 deletions(-)

diff --git a/CV.html b/CV.html
index 5895ba3..652f129 100644
--- 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
index 2ad90d3..454a648 100644
--- 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
index 53e6494..5e8f856 100644
--- 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
index 0133bff..4869b10 100644
--- 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
index 7a149e5..2b9bde1 100644
--- 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
index 445965a..1a103a2 100644
--- 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-->
 
diff --git a/wishList.html b/wishList.html
index d7335b8..00e55ff 100644
--- a/wishList.html
+++ b/wishList.html
@@ -32,31 +32,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-->