starting page transitions and gestures

assets/css/styles.css

@@ -1088,10 +1088,6 @@ select {
   max-width: 36rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1289,11 +1285,6 @@ select {
   background-color: rgb(29 77 58/var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219/var(--tw-bg-opacity));
-}
-
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55/var(--tw-bg-opacity));
@@ -1464,10 +1455,6 @@ select {
   padding-top: 1rem;
 }
 
-.text-left {
-  text-align: left;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2018,6 +2005,10 @@ body.login {
   translate: 0 0;
 }
 
+#content-container {
+  transition: opacity 0.5s ease-in-out;
+}
+
 #footer-nav.out-of-view {
   opacity: 0;
   translate: 0 100%;

assets/js/index.js

@@ -69,6 +69,61 @@ class Nav {
 
 /***/ }),
 
+/***/ "./src/modules/PageTransitions.js":
+/*!****************************************!*\
+  !*** ./src/modules/PageTransitions.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class PageTransitions {
+  constructor() {
+    this.init();
+    this.links = document.querySelectorAll('a');
+    console.log(this.links);
+  }
+  init() {
+    document.addEventListener('DOMContentLoaded', () => {
+      this.addClickListener();
+      console.log('The DOM has loaded');
+    });
+  }
+  addClickListener() {
+    this.links.forEach(link => {
+      link.addEventListener('click', e => {
+        if (this.isExternalLink(link)) {
+          link.setAttribute('target', '_blank');
+        }
+        e.preventDefault();
+      });
+    });
+  }
+  loadContent(targetUrl) {
+    fetch(targetUrl).then(response => response.text()).then(data => {
+      this.updateContent(data);
+      history.pushState(null, null, targetUrl);
+    }).catch(error => console.error('Error fetching content:', error));
+  }
+  updateContent(data) {
+    const contentContainer = document.getElementById('content-container');
+    const parsedData = new DOMParser().parseFromString(data, 'text/html');
+    contentContainer.innerHTML = parsedData.getElementById('content').innerHTML;
+  }
+
+  // Function to check if a link is external
+  isExternalLink(link) {
+    const currentDomain = window.location.hostname;
+    const linkDomain = link.hostname;
+    return linkDomain !== currentDomain;
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageTransitions);
+
+/***/ }),
+
 /***/ "./src/modules/SplashScreen.js":
 /*!*************************************!*\
   !*** ./src/modules/SplashScreen.js ***!
@@ -198,6 +253,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/NavControl */ "./src/modules/NavControl.js");
 /* harmony import */ var _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/CollapsePanel */ "./src/modules/CollapsePanel.js");
 /* harmony import */ var _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/SplashScreen */ "./src/modules/SplashScreen.js");
+/* harmony import */ var _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/PageTransitions */ "./src/modules/PageTransitions.js");
 // Our modules / classes
 // Import modules e.g import MobileMenu from "./modules/MobileMenu"
 
@@ -205,13 +261,15 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // Instantiate a new object using our modules/classes
 // e.g var mobileMenu =  new MobileMenu()
 
-var testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
+const testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
-var navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
+const navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
-var collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
+const collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
-var splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
+const splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
+const pageTransitions = new _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_4__["default"]();
 })();
 
 /******/ })()

header.php

@@ -15,7 +15,7 @@
     ?>
 </head>
 
-<body class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
+<body id="content-container" class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
     <?php wp_body_open(); ?>
 
     <main class="h-screen overflow-hidden">
@@ -96,7 +96,7 @@
                         ?>
 
                             <li class="accordion">
-                                <div class="flex lg:px-2 hover:bg-gray-800 rounded-md justify-between">
+                                <div class="flex px-2 hover:bg-gray-800 rounded-md justify-between">
                                     <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                                         <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
                                         <p><?php echo $pageTitle ?></p>

templates/internal/gender-identity-and-sexual-orientation.php

@@ -255,14 +255,6 @@ $genderIdentities = [
       </ul>
     </div>
 
-    <div class="mt-8 px-4 space-y-4 py-4 w-full text-white bg-cadet-900 shadow-md">
-      <p class="italic font-medium">Keep numbers handy for taxis in case of emergency, or if you cannot take a bus or use a rideshare app like Uber or Lyft.</p>
-    </div>
-
-    <div class="p-4 space-y-4">
-      <p class="">If you drive, be aware of parking restrictions at the college or university, and in the community. Parking passes are available to students to park on-campus.</p>
-    </div>
-
     <div class="lg:grid lg:grid-cols-2 space-y-2">
       <div class="px-4 mx-auto">
         <img src=" <?= get_template_directory_uri() ?>/assets/images/bgs/nan-lgbtq.png" alt="NAN LGBTQ">