From c25e443c4de721c9e87dfd21d7513ec1f98ef1fc Mon Sep 17 00:00:00 2001
From: Notoric <tom@acornes.com>
Date: Thu, 23 May 2024 04:02:22 +0100
Subject: [PATCH] Fixed mobile vs desktop styling

---
 scripts/homepage.js | 10 +++++-----
 styles/global.css   | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/scripts/homepage.js b/scripts/homepage.js
index 228feee..9f6b5f5 100644
--- a/scripts/homepage.js
+++ b/scripts/homepage.js
@@ -1,8 +1,8 @@
-const menu = document.getElementById('menu');
+const navbtn = document.getElementById('nav-btn');
 
-menu.addEventListener('click', () => { 
-  const header = document.getElementById('header');
-  header.classList.toggle('expanded');
-  menu.classList.toggle('expanded');
+navbtn.addEventListener('click', () => { 
+  const navbar = document.getElementById('navbar');
+  navbar.classList.toggle('expanded');
+  navbtn.classList.toggle('expanded');
 });
 
diff --git a/styles/global.css b/styles/global.css
index b731dd6..fd694fd 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -207,10 +207,6 @@ em {
         display: none;
     }
 
-    body {
-        font-size: 30px;
-    }
-
     #nav-btn {
         content: "";
         display: block;
@@ -226,6 +222,7 @@ em {
         width: 0.6em;
         padding: 0px;
         transition: transform 0.5s ease;
+        cursor: pointer;
     }
 
     body::before {
@@ -306,7 +303,7 @@ em {
 
     #homepage-text {
         text-align: center;
-        max-width: 550px;
+        max-width: 20em;
     }
 
     #homepage-img {
@@ -321,4 +318,16 @@ em {
     #name {
         font-size: 3em;
     }
+}
+
+@media (pointer: fine) and (hover: hover) {
+    body {
+        font-size: 16px;
+    }
+}
+
+@media (pointer: coarse) and (hover: none) {
+    body {
+        font-size: 30px;
+    }
 }
\ No newline at end of file