Lectern & Lyric PR update + added lectern and lyric icons to homepage

Author: MitchellShiell

submodules/lectern

@@ -1 +1 @@
-../../../submodules/lectern/docs/
+../../../submodules/lectern/docs/overview

submodules/lyric

@@ -7,6 +7,8 @@ import iconScore from './icons/icon-score.png';
 import iconMaestro from './icons/icon-maestro.png';
 import iconArranger from './icons/icon-arranger.png';
 import iconStage from './icons/icon-stage.png';
+import iconLyric from './icons/icon-lyric.png';
+import iconLectern from './icons/icon-lectern.png';
 
 interface Product {
   title: string;
@@ -34,7 +36,7 @@ const categories: Record<string, Category> = {
     title: 'Under Development',
     description: 'New components not quite ready for production'
   },
-  misc: {
+  supporting: {
     title: 'Supporting Software',
     description: 'Supporting tools within the Overture project'
   },
@@ -54,10 +56,10 @@ const products: Product[] = [
   { title: 'Maestro', link: '/docs/core-software/maestro/overview', image: iconMaestro, description: 'Metadata Indexing Service', category: 'core' },
   { title: 'Arranger', link: '/docs/core-software/arranger/overview', image: iconArranger, description: 'Search API', category: 'core' },
   { title: 'Stage', link: '/docs/core-software/stage/overview', image: iconStage, description: 'Web Portal Scaffolding', category: 'core' },
-  { title: 'Lectern', link: '/docs/under-development/lectern/', description: 'Schema Management Service', category: 'development' },
-  { title: 'Lyric', link: '/docs/under-development/lyric/', description: 'Tabular Data Submission Service', category: 'development' },
-  { title: 'Bridge', link: '/docs/other-software/Bridge', description: 'Documentation Site', category: 'misc' },
-  { title: 'Conductor', link: '/docs/other-software/Conductor', description: 'Software Setup Automation', category: 'misc' },
+  { title: 'Lectern', link: '/docs/under-development/lectern/', image: iconLectern ,description: 'Schema Management Service', category: 'development' },
+  { title: 'Lyric', link: '/docs/under-development/lyric/', image: iconLyric, description: 'Tabular Data Submission Service', category: 'development' },
+  { title: 'Bridge', link: '/docs/other-software/Bridge', description: 'Documentation Site', category: 'supporting' },
+  { title: 'Conductor', link: '/docs/other-software/Conductor', description: 'Software Setup Automation', category: 'supporting' },
   { title: 'Documenting Projects', link: '/docs/Standards/github', description: 'Organization Standards', category: 'standards' },
   { title: 'Documenting Software', link: '/docs/Standards/Software/', description: 'Software Standards', category: 'standards' },
 ];
@@ -100,8 +102,8 @@ const SiteMap = () => {
     return acc;
   }, {});
 
-  const rightColumnCategories = ['platform','misc','standards'];
-  const leftColumnCategories = ['core','development'];
+  const rightColumnCategories = ['platform', 'supporting', 'standards'];
+  const leftColumnCategories = ['core', 'development'];
 
   return (
     <section className={styles.siteMap}>

website/docs/02-under-development/01-lectern

@@ -1,3 +1,4 @@
+/* Base layout */
 .siteMap {
   padding: 2rem 0;
   background-color: var(--ifm-background-color);
@@ -10,62 +11,60 @@
   padding: 0 1rem;
 }
 
-.mosaicLayout {
-  display: flex;
-  gap: 2rem;
-}
-
-.leftColumn, .rightColumn {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
+/* Category sections */
 .categorySection {
   background-color: var(--category-category-color);
   border-radius: 15px;
   padding: 2rem;
   box-shadow: var(--category-block-shadow);
 }
 
-.categoryHeader {
+.categoryHeader,
+.categorySubheader {
   color: var(--category-title-color);
+}
+
+.categoryHeader {
   margin-bottom: 0.5rem;
   font-size: 1.5rem;
   font-weight: 700;
 }
 
 .categorySubheader {
-  color: var(--category-title-color);
   font-size: 1rem;
   opacity: 0.8;
 }
 
+/* Card grid */
 .cardGrid {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
 }
 
+/* Card styles */
 .card {
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.15);
+  
   flex: 1 1 calc(50% - 0.5rem);
   min-width: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1rem;
   border-radius: 10px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
   background-color: var(--category-card-color);
-}
+  box-shadow: var(--card-shadow);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
-.card:hover, .card:focus {
-  transform: translateY(-2px);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  text-decoration: none;
-  outline: none;
+  &:hover,
+  &:focus {
+    transform: translateY(-2px);
+    box-shadow: var(--card-shadow-hover);
+    text-decoration: none;
+    outline: none;
+  }
 }
 
 .cardImage {
@@ -90,11 +89,42 @@
   margin-bottom: 0;
 }
 
+/* Mosaic grid layout */
+.mosaicLayout {
+  display: flex;
+  gap: 2rem;
+
+  .leftColumn,
+  .rightColumn {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .leftColumn {
+    gap: 2rem;
+  }
+
+  .rightColumn {
+    gap: 2rem;
+        /* Different card sizing for right column */
+        .card {
+          height: 5.86rem;
+        }
+        .cardTitle {
+          padding-top: .5rem;
+        }
+  }
+
+}
+
+
+/* Funding section */
 .fundingBadge {
   margin-top: 2rem;
   padding: 2rem;
   background-color: var(--funding-block-color);
-  box-shadow: var(--category-block-shadow); 
+  box-shadow: var(--category-block-shadow);
   border-radius: 12px;
   position: relative;
   overflow: hidden;
@@ -122,40 +152,27 @@
   padding: 0.75rem 1.5rem;
   background-color: var(--category-card-color);
   color: var(--category-title-color);
-  text-decoration: none;
   border-radius: 6px;
   font-weight: bold;
+  box-shadow: var(--card-shadow);
   transition: all 0.3s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.fundingLink:hover {
-  color: var(--category-title-color);
-  text-decoration: none;
-  transform: translateY(-2px);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-@media (max-width: 768px) {
-  .fundingBadge {
-    padding: 1.5rem;
-  }
-
-  .fundingTitle {
-    font-size: 1.5rem;
-  }
 
-  .fundingDescription {
-    font-size: 1rem;
+  &:hover {
+    color: var(--category-title-color);
+    text-decoration: none;
+    transform: translateY(-2px);
+    box-shadow: var(--card-shadow-hover);
   }
 }
 
+/* Responsive styles */
 @media (max-width: 1200px) {
   .mosaicLayout {
     flex-direction: column;
   }
 }
 
+
 @media (max-width: 768px) {
   .card {
     flex: 1 1 100%;
@@ -165,4 +182,21 @@
     width: 50px;
     height: 50px;
   }
-}
+
+  .fundingBadge {
+    padding: 1.5rem;
+  }
+
+  .fundingTitle {
+    font-size: 1.5rem;
+  }
+
+  .fundingDescription {
+    font-size: 1rem;
+  }
+  .mosaicLayout .rightColumn .card {
+    flex-direction: row;
+    text-align: left;
+    align-items: flex-start;
+  }
+}

website/src/components/SiteMap/icons/icon-lectern.png

@@ -18,7 +18,7 @@
 
   /* Front Page category blocks */
   --category-title-color: #282A35;
-  --category-category-color: #f5f5f5;
+  --category-category-color: #f7f7f7;
   --category-card-color: #fefefe;
   --category-block-shadow: 2px 2px 6px #282a3525;
   --category-block-funding: none;