Montserrat font & cleaner mdai popup

lyfe691 · Nov 15, 2024 · 86fb067 · 86fb067
1 parent 06bca3b
commit 86fb067
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 46 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,6 +1,6 @@
 /*------------------------ General Body Styling ------------------------*/
 body {
-    font-family: 'Lato', sans-serif;
+    font-family: 'Montserrat', sans-serif;
     font-size: 16px;
 }
 
@@ -517,49 +517,50 @@ footer {
 .custom-popup {
     display: none;
     position: fixed;
+    inset: 0;
     z-index: 9999;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
 }
 
 .popup-content {
-    background-color: #fefefe;
-    margin: 15% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #f8f9fa;
+    padding: 1.5rem 2rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     max-width: 400px;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    position: relative;
+    width: 90%;
 }
 
 .close-popup {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    color: #6b7280;
+    font-size: 1.5rem;
     cursor: pointer;
+    transition: color 0.2s ease;
 }
 
-.close-popup:hover,
-.close-popup:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
+.close-popup:hover {
+    color: #4b5563;
+}
+body.dark-mode #popup-message {
+    color: #c7c7ca;
+    font-size: 1rem;
+    line-height: 1.5;
+    text-align: center;
 }
-
 #popup-message {
-    margin-top: 10px;
-    font-size: 16px;
+    color: #6b6b6b;
+    font-size: 1rem;
     line-height: 1.5;
+    text-align: center;
 }
-
-
 /*------------------------ View More ------------------------*/
 
 .project {

diff --git a/index.html b/index.html
@@ -38,12 +38,12 @@
     <meta name="theme-color" content="#ffffff">
 
     <!-- Fonts and Stylesheets -->
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css"> <!--new devicons, better than fa imo-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css"> 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="css/styles.css" rel="stylesheet">
-    <script src="https://unpkg.com/feather-icons"></script> <!--feather icons init-->  
+    <script src="https://unpkg.com/feather-icons"></script> 
 
     <!-- Structured Data -->
     <script type="application/ld+json">

diff --git a/js/mdai.js b/js/mdai.js
@@ -1,18 +1,23 @@
 function mdai() {
-    const popup = document.getElementById('custom-popup');
-    const popupMessage = document.getElementById('popup-message');
-    const closePopup = document.getElementsByClassName('close-popup')[0];
+    const popup = document.createElement('div');
+    popup.className = 'custom-popup';
+    popup.innerHTML = `
+        <div class="popup-content">
+            <span class="close-popup">&times;</span>
+            <div id="popup-message">This project was completed with AI assistance</div>
+        </div>
+    `;
+
+    document.body.appendChild(popup);
 
-    popupMessage.textContent = "This project was completed with AI assistance";
     popup.style.display = "block";
 
-    closePopup.onclick = function() {
-        popup.style.display = "none";
-    }
+    const closePopup = () => {
+        popup.remove();
+    };
 
-    window.onclick = function(event) {
-        if (event.target == popup) {
-            popup.style.display = "none";
-        }
-    }
+    popup.querySelector('.close-popup').onclick = closePopup;
+    popup.onclick = (e) => {
+        if (e.target === popup) closePopup();
+    };
 }
diff --git a/js/nav.js b/js/nav.js
@@ -39,6 +39,9 @@ class NavBar extends HTMLElement {
 
     const styles = `
       <style>
+        /* Import Montserrat Font */
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
+
         /* Enhanced Variables */
         :host {
           --nav-primary: ${theme === 'dark' ? '#7C3AED' : '#6D28D9'};
@@ -58,7 +61,7 @@ class NavBar extends HTMLElement {
           left: 0;
           right: 0;
           z-index: 1000;
-          font-family: 'Inter', system-ui, -apple-system, sans-serif;
+          font-family: 'Montserrat', sans-serif; /* Updated font-family */
         }
 
         @keyframes dropNav {
@@ -437,4 +440,4 @@ class NavBar extends HTMLElement {
   }
 }
 
-customElements.define('nav-bar', NavBar);
+customElements.define('nav-bar', NavBar);