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'],
-ol[role='list'] {
+ul[role=list],
+ol[role=list] {
   list-style: none;
 }
 
@@ -190,18 +190,18 @@ svg {
   }
 }
 /* FORMS */
-[type='text'],
-[type='email'],
-[type='url'],
-[type='password'],
-[type='number'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='search'],
-[type='tel'],
-[type='time'],
-[type='week'],
+[type=text],
+[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 {
@@ -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='reset'],
-[type='submit'] {
+[type=button],
+[type=reset],
+[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,8 +558,7 @@ 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;
@@ -578,7 +577,7 @@ textarea::placeholder {
 Set the default cursor for buttons.
 */
 button,
-[role='button'] {
+[role=button] {
   cursor: pointer;
 }
 
@@ -622,22 +621,7 @@ 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;
@@ -654,25 +638,10 @@ select {
   --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, /*!*/ /*!*/);
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: #08192e;
@@ -682,14 +651,12 @@ select:focus {
   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;
 }
@@ -707,15 +674,7 @@ 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;
 }
@@ -730,8 +689,7 @@ 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;
@@ -741,8 +699,7 @@ select {
   print-color-adjust: unset;
 }
 
-[type='checkbox'],
-[type='radio'] {
+[type=checkbox], [type=radio] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -765,19 +722,18 @@ 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, /*!*/ /*!*/);
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: #08192e;
@@ -786,8 +742,7 @@ 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%;
@@ -795,37 +750,34 @@ 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;
@@ -835,19 +787,18 @@ 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;
@@ -857,14 +808,12 @@ 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;
@@ -1034,7 +983,7 @@ select {
 }
 
 .col-span-3 {
-  grid-column: span 3 / span 3;
+  grid-column: span 3/span 3;
 }
 
 .mx-auto {
@@ -1312,97 +1261,97 @@ select {
 
 .border-blue-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(10 28 50 / var(--tw-border-opacity));
+  border-color: rgb(10 28 50/var(--tw-border-opacity));
 }
 
 .bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(0 0 0/var(--tw-bg-opacity));
 }
 
 .bg-blue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(10 28 50 / var(--tw-bg-opacity));
+  background-color: rgb(10 28 50/var(--tw-bg-opacity));
 }
 
 .bg-blue-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(4 14 31 / var(--tw-bg-opacity));
+  background-color: rgb(4 14 31/var(--tw-bg-opacity));
 }
 
 .bg-blue-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(2 9 23 / var(--tw-bg-opacity));
+  background-color: rgb(2 9 23/var(--tw-bg-opacity));
 }
 
 .bg-cadet-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 247 247 / var(--tw-bg-opacity));
+  background-color: rgb(245 247 247/var(--tw-bg-opacity));
 }
 
 .bg-cadet-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(225 235 234 / var(--tw-bg-opacity));
+  background-color: rgb(225 235 234/var(--tw-bg-opacity));
 }
 
 .bg-cadet-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(206 219 218 / var(--tw-bg-opacity));
+  background-color: rgb(206 219 218/var(--tw-bg-opacity));
 }
 
 .bg-cadet-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(142 168 164 / var(--tw-bg-opacity));
+  background-color: rgb(142 168 164/var(--tw-bg-opacity));
 }
 
 .bg-cadet-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(52 102 86 / var(--tw-bg-opacity));
+  background-color: rgb(52 102 86/var(--tw-bg-opacity));
 }
 
 .bg-cadet-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 77 58 / var(--tw-bg-opacity));
+  background-color: rgb(29 77 58/var(--tw-bg-opacity));
 }
 
 .bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55/var(--tw-bg-opacity));
 }
 
 .bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39/var(--tw-bg-opacity));
 }
 
 .bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(24 87 76 / var(--tw-bg-opacity));
+  background-color: rgb(24 87 76/var(--tw-bg-opacity));
 }
 
 .bg-green-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(6 43 30 / var(--tw-bg-opacity));
+  background-color: rgb(6 43 30/var(--tw-bg-opacity));
 }
 
 .bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(149 29 32 / var(--tw-bg-opacity));
+  background-color: rgb(149 29 32/var(--tw-bg-opacity));
 }
 
 .bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(133 23 26 / var(--tw-bg-opacity));
+  background-color: rgb(133 23 26/var(--tw-bg-opacity));
 }
 
 .bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255/var(--tw-bg-opacity));
 }
 
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 224 162 / var(--tw-bg-opacity));
+  background-color: rgb(245 224 162/var(--tw-bg-opacity));
 }
 
 .bg-opacity-40 {
@@ -1544,7 +1493,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 {
@@ -1603,47 +1552,47 @@ select {
 
 .text-black {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(0 0 0/var(--tw-text-opacity));
 }
 
 .text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(10 28 50 / var(--tw-text-opacity));
+  color: rgb(10 28 50/var(--tw-text-opacity));
 }
 
 .text-blue-800 {
   --tw-text-opacity: 1;
-  color: rgb(4 14 31 / var(--tw-text-opacity));
+  color: rgb(4 14 31/var(--tw-text-opacity));
 }
 
 .text-blue-900 {
   --tw-text-opacity: 1;
-  color: rgb(2 9 23 / var(--tw-text-opacity));
+  color: rgb(2 9 23/var(--tw-text-opacity));
 }
 
 .text-cadet-300 {
   --tw-text-opacity: 1;
-  color: rgb(206 219 218 / var(--tw-text-opacity));
+  color: rgb(206 219 218/var(--tw-text-opacity));
 }
 
 .text-cadet-400 {
   --tw-text-opacity: 1;
-  color: rgb(174 194 191 / var(--tw-text-opacity));
+  color: rgb(174 194 191/var(--tw-text-opacity));
 }
 
 .text-cadet-900 {
   --tw-text-opacity: 1;
-  color: rgb(29 77 58 / var(--tw-text-opacity));
+  color: rgb(29 77 58/var(--tw-text-opacity));
 }
 
 .text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(149 29 32 / var(--tw-text-opacity));
+  color: rgb(149 29 32/var(--tw-text-opacity));
 }
 
 .text-white {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255/var(--tw-text-opacity));
 }
 
 .underline {
@@ -1683,32 +1632,9 @@ 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;
 }
@@ -1728,28 +1654,28 @@ select {
 
 /* Arvo Bold */
 @font-face {
-  font-family: 'arvo-bold';
-  src: url('../assets/fonts/Arvo/Arvo-Bold.ttf');
+  font-family: "arvo-bold";
+  src: url("../assets/fonts/Arvo/Arvo-Bold.ttf");
 }
 /* Libre Baskerville Regular */
 @font-face {
-  font-family: 'libre-baskerville';
-  src: url('../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf');
+  font-family: "libre-baskerville";
+  src: url("../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf");
 }
 /* Open Sans Medium */
 @font-face {
-  font-family: 'open-sans';
-  src: url('../assets/fonts/Open_Sans/OpenSans-Medium.ttf');
+  font-family: "open-sans";
+  src: url("../assets/fonts/Open_Sans/OpenSans-Medium.ttf");
 }
 /* Roboto Light */
 @font-face {
-  font-family: 'roboto-light';
-  src: url('../assets/fonts/Roboto/Roboto-Light.ttf');
+  font-family: "roboto-light";
+  src: url("../assets/fonts/Roboto/Roboto-Light.ttf");
 }
 /* Roboto Medium */
 @font-face {
-  font-family: 'roboto-medium';
-  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf');
+  font-family: "roboto-medium";
+  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf");
 }
 body,
 html {
@@ -1758,7 +1684,7 @@ html {
 
 .hover\:bg-gray-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55/var(--tw-bg-opacity));
 }
 
 @media (min-width: 640px) {
@@ -1901,7 +1827,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;
@@ -1956,7 +1882,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;
 }
@@ -2115,17 +2041,13 @@ body.login {
 #content-container.page-transition {
   opacity: 0;
   transform: translatex(-100%);
-  transition:
-    opacity 0.6s ease-in-out,
-    transform 0.6s ease-in-out;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 
 #content-container:not(.page-transition) {
   opacity: 1;
   transform: translateY(0);
-  transition:
-    opacity 0.6s ease-in-out,
-    transform 0.6s ease-in-out;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 
 #footer-nav.out-of-view {