@prosophia/lab-minimal 0.0.3 → 0.0.5

package/dist/NewsPage.module.css

@@ -0,0 +1,136 @@
+/* NewsPage.module.css - Minimal Template */
+
+.pageWrapper {
+  padding-top: var(--header-height, 64px);
+  min-height: 100vh;
+}
+
+.newsSection {
+  padding: var(--spacing-4xl) var(--spacing-lg);
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.sectionContainer {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Page Header */
+.sectionHeading {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  text-align: center;
+  max-width: 500px;
+  margin: 0 auto var(--spacing-3xl);
+  padding-bottom: var(--spacing-3xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* News Grid - List Style */
+.newsGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.newsCardLink {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+/* Horizontal News Card */
+.newsCard {
+  display: flex;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--color-background-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  transition: border-color var(--transition-base);
+}
+
+.newsCard:hover {
+  border-color: var(--accent-primary);
+}
+
+/* Small Thumbnail */
+.newsImageWrapper {
+  flex-shrink: 0;
+  width: 100px;
+  height: 80px;
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+}
+
+@media (max-width: 480px) {
+  .newsImageWrapper {
+    width: 80px;
+    height: 64px;
+  }
+}
+
+.newsImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition-base);
+}
+
+.newsCard:hover .newsImage {
+  transform: scale(1.05);
+}
+
+.newsCardContent {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.newsDate {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  margin-bottom: var(--spacing-xs);
+}
+
+.newsTitle {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  margin: 0 0 var(--spacing-xs) 0;
+  color: var(--color-text-primary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color var(--transition-base);
+}
+
+.newsCard:hover .newsTitle {
+  color: var(--accent-primary);
+}
+
+.newsExcerpt {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+}
+
+.readMore {
+  display: none; /* Hide in minimal - the whole card is clickable */
+}

package/dist/PastMembersPage.module.css

@@ -0,0 +1,146 @@
+/* PastMembersPage.module.css - Minimal Template */
+
+.pageWrapper {
+  padding-top: var(--header-height, 64px);
+  min-height: 100vh;
+}
+
+.pageContainer {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+/* Page Header */
+.pageHeader {
+  text-align: center;
+  padding: var(--spacing-4xl) 0 var(--spacing-3xl);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.main {
+  padding-bottom: var(--spacing-4xl);
+}
+
+.membersList {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl);
+}
+
+/* Year Section */
+.yearSection {
+  width: 100%;
+}
+
+.yearHeader {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--accent-primary);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Members Grid */
+.membersCardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--spacing-md);
+}
+
+/* Member Card - Simple */
+.memberCard {
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius-md);
+  background: var(--color-background-card);
+  border: 1px solid var(--color-border);
+  transition: border-color var(--transition-base);
+}
+
+.memberCard:hover {
+  border-color: var(--accent-primary);
+}
+
+.memberName {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+  transition: color var(--transition-base);
+}
+
+.memberCard:hover .memberName {
+  color: var(--accent-primary);
+}
+
+.memberRole {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.memberYears {
+  font-size: var(--font-size-xs);
+  color: var(--accent-primary);
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.memberDestination {
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  margin: 0;
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--color-border);
+}
+
+.memberDestination strong {
+  color: var(--accent-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Back Link */
+.backLinkWrapper {
+  text-align: center;
+  margin-top: var(--spacing-3xl);
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--color-border);
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  background: var(--color-background-card);
+  transition: all var(--transition-base);
+}
+
+.backLink:hover {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}

package/dist/PeoplePage.module.css

@@ -0,0 +1,277 @@
+/* PeoplePage.module.css - Minimal Template */
+
+.pageWrapper {
+  padding-top: var(--header-height, 64px);
+  min-height: 100vh;
+}
+
+.pageContainer {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+/* Page Header */
+.pageHeader {
+  text-align: center;
+  padding: var(--spacing-4xl) 0 var(--spacing-3xl);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.main {
+  padding-bottom: var(--spacing-4xl);
+}
+
+/* Principal Investigator Section - Compact */
+.piSection {
+  margin-bottom: var(--spacing-3xl);
+  padding: var(--spacing-lg);
+  background: var(--color-background-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.piHeading {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent-primary);
+  margin-bottom: var(--spacing-lg);
+  text-align: center;
+}
+
+.piContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+@media (max-width: 480px) {
+  .piContent {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+.piImageWrapper {
+  flex-shrink: 0;
+}
+
+.piImage {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--border-radius-full);
+  object-fit: cover;
+}
+
+.piInfo {
+  flex: 1;
+}
+
+.piName {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.piTitle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* PI Social Links */
+.piSocials {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+}
+
+@media (max-width: 480px) {
+  .piSocials {
+    justify-content: center;
+  }
+}
+
+.piSocialLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius-sm);
+  color: var(--color-text-muted);
+  background: var(--color-background-secondary);
+  transition: all var(--transition-base);
+}
+
+.piSocialLink:hover {
+  color: var(--accent-primary);
+  background: var(--accent-muted);
+}
+
+.piSocialLink svg {
+  flex-shrink: 0;
+}
+
+.piContact,
+.piBio {
+  display: none; /* Hide in minimal */
+}
+
+/* Team Members Section */
+.membersSection {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.sectionHeading {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--accent-primary);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Compact Horizontal Grid */
+.membersGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-md);
+}
+
+@media (min-width: 768px) {
+  .membersGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .membersGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Compact Horizontal Member Card */
+.memberCard {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--color-background-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  transition: border-color var(--transition-base);
+}
+
+.memberCard:hover {
+  border-color: var(--accent-primary);
+}
+
+/* Small Circular Image */
+.memberImageWrapper {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--border-radius-full);
+  overflow: hidden;
+}
+
+.memberImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.memberInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.memberName {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.memberRole {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* Social Links - Compact */
+.memberSocials {
+  display: flex;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+}
+
+.socialLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--border-radius-sm);
+  color: var(--color-text-muted);
+  transition: color var(--transition-base);
+}
+
+.socialLink:hover {
+  color: var(--accent-primary);
+}
+
+.socialLink svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.memberDescription,
+.memberContact {
+  display: none; /* Hide in minimal */
+}
+
+/* Past Members Link */
+.pastMembersSection {
+  text-align: center;
+  margin-top: var(--spacing-2xl);
+}
+
+.pastMembersLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--accent-primary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  transition: gap var(--transition-base);
+}
+
+.pastMembersLink:hover {
+  gap: 0.5rem;
+  color: var(--accent-hover);
+}

package/dist/PicturesPage.module.css

@@ -0,0 +1,170 @@
+/* PicturesPage.module.css - Minimal Template */
+
+.pageWrapper {
+  padding-top: var(--header-height, 64px);
+  min-height: 100vh;
+}
+
+.pageContainer {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+/* Page Header */
+.pageHeader {
+  text-align: center;
+  padding: var(--spacing-4xl) 0 var(--spacing-3xl);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.main {
+  padding-bottom: var(--spacing-4xl);
+}
+
+.categoriesList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl);
+}
+
+.categorySection {
+  width: 100%;
+}
+
+.categoryHeader {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--accent-primary);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Tight Gallery Grid - Square Images */
+.photosGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-sm);
+}
+
+@media (min-width: 640px) {
+  .photosGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .photosGrid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Gallery Item - Square with Hover Caption */
+.photoCard {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  aspect-ratio: 1;
+}
+
+.photoImageWrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.photoImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform var(--transition-base);
+}
+
+.photoCard:hover .photoImage {
+  transform: scale(1.05);
+}
+
+/* Caption - Appears on Hover */
+.photoCaption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--spacing-md);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  text-align: center;
+  color: white;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  opacity: 0;
+  transform: translateY(100%);
+  transition: all var(--transition-base);
+}
+
+.photoCard:hover .photoCaption {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Lightbox Overlay */
+.lightboxOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: var(--spacing-2xl);
+}
+
+.lightboxContent {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.lightboxImage {
+  max-width: 100%;
+  max-height: 90vh;
+  border-radius: var(--border-radius-md);
+}
+
+.lightboxClose {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  background: var(--accent-primary);
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--border-radius-full);
+  color: white;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: background var(--transition-base);
+}
+
+.lightboxClose:hover {
+  background: var(--accent-hover);
+}