Convert project detail page into a modal

Closes #3310908

css/pb.css

@@ -117,8 +117,8 @@
   }
 }
 
-/* <ModulePage> */
-.pb-module-page {
+/* <DetailModal> */
+.pb-detail-modal {
   display: flex;
   flex-direction: column;
   gap: var(--space-l);
@@ -126,32 +126,32 @@
 }
 
 @media (min-width: 61rem) {
-  .pb-module-page {
+  .pb-detail-modal {
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: 2.5fr 1.5fr;
     gap: var(--space-l);
   }
 
-  .pb-module-page__sidebar {
+  .pb-detail-modal__sidebar {
     grid-row: span 2;
   }
 }
 
 @media (min-width: 75rem) {
-  .pb-module-page {
+  .pb-detail-modal {
     grid-template-columns: 3fr 1fr;
     padding-block-start: var(--space-xl);
   }
 }
 
-.pb-module-page__main {
+.pb-detail-modal__main {
   display: flex;
   flex-direction: column;
   gap: var(--space-l);
 }
 
-.pb-module-page__sidebar {
+.pb-detail-modal__sidebar {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
@@ -159,34 +159,34 @@
   background-color: var(--color-gray-050);
 }
 
-.pb-module-page__actions {
+.pb-detail-modal__actions {
   margin: 20px;
 }
 
-.pb-module-page__view-commands {
+.pb-detail-modal__view-commands {
   text-align: center;
 }
 
-.pb-module-page__sidebar_element:nth-of-type(3)::before {
+.pb-detail-modal__sidebar_element:nth-of-type(3)::before {
   display: block;
   margin: 0 0 var(--space-xl);
   content: "";
   border-top: 1px solid var(--color-gray-100);
 }
 
-.pb-module-page__sidebar_element a.project__action_button {
+.pb-detail-modal__sidebar_element a.project__action_button {
   text-decoration: none;
 }
 
-.pb-module-page__sidebar_element a.project__action_button:hover {
+.pb-detail-modal__sidebar_element a.project__action_button:hover {
   color: #fff;
 }
 
-.pb-module-page__categories-label {
+.pb-detail-modal__categories-label {
   font-weight: bold;
 }
 
-.pb-module-page__categories-list {
+.pb-detail-modal__categories-list {
   display: inline-flex;
   gap: var(--space-xs);
   width: 100%;
@@ -194,42 +194,42 @@
   padding: 0;
 }
 
-.pb-module-page__categories-list-item {
+.pb-detail-modal__categories-list-item {
   display: inline-block;
   padding: 2px 9px;
   list-style: none;
   font-size: 0.9em;
 }
 
-.pb-module-page__module-details {
+.pb-detail-modal__module-details {
   display: grid;
   grid-template-columns: 0.5fr 2fr;
   margin-top: 10px;
   line-height: 20px;
 }
 
-.pb-module-page__module-details-icon {
+.pb-detail-modal__module-details-icon {
   margin: 10% 20% 0 40%;
 }
 
-.pb-module-page__module-details-info {
+.pb-detail-modal__module-details-info {
   margin: 5px 15px;
 }
 
-.pb-module-page__logo {
+.pb-detail-modal__logo {
   min-height: 200px;
 }
 
-.pb-module-page__carousel-wrapper {
+.pb-detail-modal__carousel-wrapper {
   margin-top: 1em;
 }
 
-.pb-module-page__carousel {
+.pb-detail-modal__carousel {
   margin: 20px 0;
 }
 
 @media only screen and (max-width: 600px) {
-  .pb-module-page__wrapper {
+  .pb-detail-modal__wrapper {
     flex-direction: column;
   }
 }
@@ -498,6 +498,15 @@
   }
 }
 
+/* Popup */
+.project-browser-popup {
+  max-width: 50rem;
+}
+
+.project-browser-detail-modal {
+  max-width: 80rem;
+}
+
 /* <Project/Project> */
 
 /* One column card view */
@@ -527,10 +536,16 @@
 }
 
 .pb-project__link {
+  cursor: pointer;
+  text-decoration: underline;
   color: black;
+  border: none;
+  background: transparent;
+  font-weight: bold;
 }
 
 .pb-project__link:hover {
+  text-decoration: none;
   color: #003ecc;
 }
 
@@ -563,7 +578,7 @@
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-.pb-module-page__header {
+.pb-detail-modal__header {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 200px;
@@ -571,12 +586,12 @@
 }
 
 @media (min-width: 31rem) {
-  .pb-module-page__header {
+  .pb-detail-modal__header {
     grid-template-columns: 200px 1fr;
   }
 }
 
-.pb-module-page__title {
+.pb-detail-modal__title {
   align-self: center;
 }