started theme versioning

assets/css/styles.css

@@ -140,8 +140,8 @@
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role=list],
+ul[role='list'],
-ol[role=list] {
+ol[role='list'] {
   list-style: none;
 }
 
@@ -190,18 +190,18 @@ svg {
   }
 }
 /* FORMS */
-[type=text],
+[type='text'],
-[type=email],
+[type='email'],
-[type=url],
+[type='url'],
-[type=password],
+[type='password'],
-[type=number],
+[type='number'],
-[type=date],
+[type='date'],
-[type=datetime-local],
+[type='datetime-local'],
-[type=month],
+[type='month'],
-[type=search],
+[type='search'],
-[type=tel],
+[type='tel'],
-[type=time],
+[type='time'],
-[type=week],
+[type='week'],
 [multiple],
 textarea,
 select {
@@ -230,7 +230,7 @@ select {
 
 ::before,
 ::after {
-  --tw-content: "";
+  --tw-content: '';
 }
 
 /*
@@ -253,7 +253,7 @@ html,
   -o-tab-size: 4;
   tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -335,7 +335,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -428,9 +428,9 @@ select {
 2. Remove default button styles.
 */
 button,
-[type=button],
+[type='button'],
-[type=reset],
+[type='reset'],
-[type=submit] {
+[type='submit'] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -472,7 +472,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
-[type=search] {
+[type='search'] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -558,7 +558,8 @@ textarea {
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -577,7 +578,7 @@ textarea::placeholder {
 Set the default cursor for buttons.
 */
 button,
-[role=button] {
+[role='button'] {
   cursor: pointer;
 }
 
@@ -621,7 +622,22 @@ video {
   display: none;
 }
 
-[type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {
+[type='text'],
+input:where(:not([type])),
+[type='email'],
+[type='url'],
+[type='password'],
+[type='number'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='search'],
+[type='tel'],
+[type='time'],
+[type='week'],
+[multiple],
+textarea,
+select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -638,7 +654,22 @@ video {
   --tw-shadow: 0 0 #0000;
 }
 
-[type=text]:focus, input:where(:not([type])):focus, [type=email]:focus, [type=url]:focus, [type=password]:focus, [type=number]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=week]:focus, [multiple]:focus, textarea:focus, select:focus {
+[type='text']:focus,
+input:where(:not([type])):focus,
+[type='email']:focus,
+[type='url']:focus,
+[type='password']:focus,
+[type='number']:focus,
+[type='date']:focus,
+[type='datetime-local']:focus,
+[type='month']:focus,
+[type='search']:focus,
+[type='tel']:focus,
+[type='time']:focus,
+[type='week']:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
@@ -651,12 +682,14 @@ video {
   border-color: #08192e;
 }
 
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
   color: #6b7280;
   opacity: 1;
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: #6b7280;
   opacity: 1;
 }
@@ -674,7 +707,15 @@ input::placeholder, textarea::placeholder {
   display: inline-flex;
 }
 
-::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -689,7 +730,8 @@ select {
   print-color-adjust: exact;
 }
 
-[multiple], [size]:where(select:not([size="1"])) {
+[multiple],
+[size]:where(select:not([size='1'])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -699,7 +741,8 @@ select {
   print-color-adjust: unset;
 }
 
-[type=checkbox], [type=radio] {
+[type='checkbox'],
+[type='radio'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -722,15 +765,16 @@ select {
   --tw-shadow: 0 0 #0000;
 }
 
-[type=checkbox] {
+[type='checkbox'] {
   border-radius: 0px;
 }
 
-[type=radio] {
+[type='radio'] {
   border-radius: 100%;
 }
 
-[type=checkbox]:focus, [type=radio]:focus {
+[type='checkbox']:focus,
+[type='radio']:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
@@ -742,7 +786,8 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-[type=checkbox]:checked, [type=radio]:checked {
+[type='checkbox']:checked,
+[type='radio']:checked {
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -750,34 +795,37 @@ select {
   background-repeat: no-repeat;
 }
 
-[type=checkbox]:checked {
+[type='checkbox']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
 @media (forced-colors: active) {
-  [type=checkbox]:checked {
+  [type='checkbox']:checked {
     -webkit-appearance: auto;
     -moz-appearance: auto;
     appearance: auto;
   }
 }
-[type=radio]:checked {
+[type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
 @media (forced-colors: active) {
-  [type=radio]:checked {
+  [type='radio']:checked {
     -webkit-appearance: auto;
     -moz-appearance: auto;
     appearance: auto;
   }
 }
-[type=checkbox]:checked:hover, [type=checkbox]:checked:focus, [type=radio]:checked:hover, [type=radio]:checked:focus {
+[type='checkbox']:checked:hover,
+[type='checkbox']:checked:focus,
+[type='radio']:checked:hover,
+[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type=checkbox]:indeterminate {
+[type='checkbox']:indeterminate {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -787,18 +835,19 @@ select {
 }
 
 @media (forced-colors: active) {
-  [type=checkbox]:indeterminate {
+  [type='checkbox']:indeterminate {
     -webkit-appearance: auto;
     -moz-appearance: auto;
     appearance: auto;
   }
 }
-[type=checkbox]:indeterminate:hover, [type=checkbox]:indeterminate:focus {
+[type='checkbox']:indeterminate:hover,
+[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type=file] {
+[type='file'] {
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -808,12 +857,14 @@ select {
   line-height: inherit;
 }
 
-[type=file]:focus {
+[type='file']:focus {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -1493,7 +1544,7 @@ select {
 }
 
 .font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 }
 
 .text-2xl {
@@ -1632,9 +1683,32 @@ select {
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter,
+    -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1654,28 +1728,28 @@ select {
 
 /* Arvo Bold */
 @font-face {
-  font-family: "arvo-bold";
+  font-family: 'arvo-bold';
-  src: url("../assets/fonts/Arvo/Arvo-Bold.ttf");
+  src: url('../assets/fonts/Arvo/Arvo-Bold.ttf');
 }
 /* Libre Baskerville Regular */
 @font-face {
-  font-family: "libre-baskerville";
+  font-family: 'libre-baskerville';
-  src: url("../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf");
+  src: url('../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf');
 }
 /* Open Sans Medium */
 @font-face {
-  font-family: "open-sans";
+  font-family: 'open-sans';
-  src: url("../assets/fonts/Open_Sans/OpenSans-Medium.ttf");
+  src: url('../assets/fonts/Open_Sans/OpenSans-Medium.ttf');
 }
 /* Roboto Light */
 @font-face {
-  font-family: "roboto-light";
+  font-family: 'roboto-light';
-  src: url("../assets/fonts/Roboto/Roboto-Light.ttf");
+  src: url('../assets/fonts/Roboto/Roboto-Light.ttf');
 }
 /* Roboto Medium */
 @font-face {
-  font-family: "roboto-medium";
+  font-family: 'roboto-medium';
-  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf");
+  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf');
 }
 body,
 html {
@@ -1827,7 +1901,7 @@ html {
 
 #login h1 a,
 .login h1 a {
-  background-image: url("../../assets/images/logos/nan-login-logo.png");
+  background-image: url('../../assets/images/logos/nan-login-logo.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 200px;
@@ -1882,7 +1956,7 @@ body.login {
   justify-content: center;
   background-size: cover;
   background-position: center center;
-  background-image: url("../../assets/images/bgs/backsplash.png");
+  background-image: url('../../assets/images/bgs/backsplash.png');
   background-color: var(--gray-500);
   background-blend-mode: multiply;
 }
@@ -2041,13 +2115,17 @@ body.login {
 #content-container.page-transition {
   opacity: 0;
   transform: translatex(-100%);
-  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition:
+    opacity 0.6s ease-in-out,
+    transform 0.6s ease-in-out;
 }
 
 #content-container:not(.page-transition) {
   opacity: 1;
   transform: translateY(0);
-  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition:
+    opacity 0.6s ease-in-out,
+    transform 0.6s ease-in-out;
 }
 
 #footer-nav.out-of-view {

assets/js/index.js

@@ -54,11 +54,6 @@ class Nav {
   init() {
     // Open and Close the Nav Menu
     document.addEventListener('DOMContentLoaded', () => {
-      // Check if fullscreen is supported
-      if (document.documentElement.requestFullscreen) {
-        // Request fullscreen
-        document.documentElement.requestFullscreen();
-      }
       this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
     });
   }
@@ -145,6 +140,8 @@ class PageTransitions {
     fetch(targetUrl).then(response => response.text()).then(data => {
       this.updateContent(data, elementId);
       history.pushState(null, null, targetUrl);
+      // Trigger removal of transition class after fetching data
+      this.removeTransitionClass(contentContainer);
     }).catch(error => console.error('Error fetching content:', error));
   }
   updateContent(data, elementId) {
@@ -167,8 +164,6 @@ class PageTransitions {
       this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
       this.collapsePanel.addToggleCollapseListener('#content-container .accordion-toggle');
       this.addLinkClickListener('#content-container a');
-      // Trigger removal of transition class after fetching data
-      this.removeTransitionClass(contentContainer);
     } else {
       console.error(`Element with ID '${elementId}' not found in the fetched data`);
     }

includes/front-end/styles_and_scripts.php

@@ -1,18 +1,20 @@
 <?php
 
+
 // Enqueue styles and scripts
 function themeStarter_enqueue()
 {
+  $theme_version = filemtime(get_stylesheet_directory() . '/style.css');
 
   /* Register and Enqueue Scripts */
 
-  wp_register_script('themeStarter-app', get_parent_theme_file_uri('/assets/js/index.js'), [], null, true);
+  wp_register_script('themeStarter-app', get_parent_theme_file_uri('/assets/js/index.js'), [], $theme_version, true);
   wp_enqueue_script('themeStarter-app');
 
 
   /* Register and Enqueue Styles */
 
-  wp_register_style('themeStarter-styles', get_parent_theme_file_uri('/assets/css/styles.css'), [], null, 'all');
+  wp_register_style('themeStarter-styles', get_parent_theme_file_uri('/assets/css/styles.css'), [], $theme_version, 'all');
   wp_enqueue_style('themeStarter-styles');
 
   wp_register_style('bootstrap-icons', get_parent_theme_file_uri('/assets/css/bootstrap-icons.css'), [], '1.11.1', 'all');

style.css

@@ -4,7 +4,7 @@ Theme URI: https://thecreatorpriz.com
 Author: Prospect Ogujiuba
 Author URI: https://thecreatpriz.com/
 Description: This theme was created for Nishnawbe Aski Nation Post Secondary Transitions Handbook for Students.
-Version: 1.0.1
+Version: 1.0
 Requires at least: 5.9
 Tested up to: 6.4.1
 Requires PHP: 7.2