Updates the Project Pages to be more readable (#55)

* Updating to add links to the team pages on each project page, reduces overall text size, and main image on project pages

* Making the announcements page more responsive

Author: namiba-work

public/images/ec.png

@@ -76,7 +76,7 @@ pub fn Main() -> impl IntoView {
                             "Learn how ODP projects help build secure, modern devices"
                         </span>
                     </div>
-                    <div class="w-full aspect-video rounded-lg overflow-hidden" style="max-width:100vw;">
+                    <div class="w-full lg:w-[1200px] aspect-video rounded-lg overflow-hidden" style="max-width:100vw;">
                         <iframe
                             class="w-full h-full"
                             style="border-radius: 10px; display: block;"

src/components/main.rs

@@ -1,11 +1,13 @@
 use leptos::prelude::*;
+use leptos_router::components::A;
 
 #[component]
 pub fn ProjectIntroduction(
     #[prop(into)] project_title: String,
     #[prop(into)] project_summary: String,
     #[prop(into)] project_what: String,
     #[prop(into)] project_why: String,
+    #[prop(into)] project_who: String,
     #[prop(into, optional)] small_image_url: String,
     #[prop(into, optional)] big_image_url: String,
 ) -> impl IntoView {
@@ -14,14 +16,14 @@ pub fn ProjectIntroduction(
             <div class="flex flex-col md:flex-row gap-[80px]">
                 {/* Left Column: Big Picture with Overlayed Text and Small Image */}
                 <div
-                    class="relative w-full md:w-[1035px] h-[400px] md:h-[930px]"
+                    class="relative w-full md:w-[700px] h-[400px] md:h-[630px]"
                     style="margin-left: 0; padding-left: 0; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: flex-start;"
                 >
                     {/* Big Picture */}
                     <img
                         src={big_image_url}
                         alt="Project Main"
-                        class="w-full h-[400px] md:w-[1035px] md:h-[930px]"
+                        class="w-full h-[400px] md:w-[700px] md:h-[630px]"
                         style="object-fit: cover; display: block; border-top-right-radius: 40px; border-bottom-right-radius: 40px;"
                     />
                     {/* Overlayed Text and Small Picture */}
@@ -51,7 +53,7 @@ pub fn ProjectIntroduction(
                     </div>
                 </div>
                 {/* Right Column */}
-                <div class="flex flex-col items-start px-2 md:px-0" style="width: 600px;">
+                <div class="flex flex-col items-start px-2 md:px-0 w-full">
                     {/* WHAT label */}
                     <span
                         class="mono"
@@ -92,6 +94,22 @@ pub fn ProjectIntroduction(
                     >
                         {project_why}
                     </span>
+                    {/* WHO label */}
+                    <span
+                        class="mono"
+                        style="
+                            display: block;
+                            text-align: left;
+                        "
+                    >
+                        {"WHO"}
+                    </span>
+                    {/* WHO description */}
+                    <div class="link_mobile md:link block text-left">
+                        <A href={project_who}>
+                            {"Learn more about the team →"}
+                        </A>
+                    </div>
                 </div>
             </div>
         </section>

src/components/project_introduction.rs

@@ -105,8 +105,8 @@ pub fn AnnouncementsPage() -> impl IntoView {
         <div class="flex flex-col w-full min-h-screen background_quaternary">
             <Header background_class="background_quaternary" />
             <div class="h2_mobile md:h1 px-4 md:px-10 pt-4 md:pt-20 pb-4 md:pb-20">Announcements</div>
-            <div class="flex flex-col md:flex-row w-full flex-1 relative">
-                <div class="w-full md:w-[450px] h-[300px] md:h-[700px] overflow-y-auto background_tertiary z-10 p-2 md:p-6 mb-4 md:mb-0">
+            <div class="flex flex-col lg:flex-row w-full flex-1 relative">
+                <div class="w-full lg:w-[450px] xl:w-[500px] min-h-[200px] lg:min-h-[600px] xl:min-h-[700px] overflow-y-auto background_tertiary z-10 p-2 md:p-4 lg:p-6 mb-4 lg:mb-0">
                     <ul class="space-y-2 md:space-y-4">
                         {announcements.iter().enumerate().map(|(i, (link, _, slug))| {
                             let navigate = navigate.clone();
@@ -127,7 +127,7 @@ pub fn AnnouncementsPage() -> impl IntoView {
                         }).collect::<Vec<_>>()}
                     </ul>
                 </div>
-                <div class="flex-1 h-[300px] md:h-[700px] background_primary rounded-tl-[30px] md:rounded-tl-[50px] -ml-0 md:-ml-16 z-20 overflow-y-auto p-4 md:p-10">
+                <div class="flex-1 min-h-[400px] lg:min-h-[600px] xl:min-h-[700px] background_primary rounded-tl-[20px] md:rounded-tl-[30px] lg:rounded-tl-[50px] -ml-0 lg:-ml-16 z-20 overflow-y-auto p-4 md:p-6 lg:p-10">
                     {move || {
                         let (title, content): (String, AnyView) = if let Some((_, title, slug)) = announcements.get(selected.get()) {
                             let content = match *slug {

src/pages/announcements.rs

@@ -37,7 +37,7 @@ pub fn BootFirmware() -> impl IntoView {
         },
     ];
 
-    let project_title = "Patina (Boot Firmware)";
+    let project_title = "Patina";
     let project_summary = "Modern Boot Firmware";
 
     let project_what = "Patina is a UEFI compatible firmware interface written in the Rust language with a focus on memory safety and composition. For Patina, we re-evaluated the good and the bad from today’s UEFI boot firmware and used this opportunity to embrace new language capabilities, software architecture, programming paradigms, and industry supported tooling. Patina isn't designed to replace everything necessary for system boot but instead to provide a sustainable path forward with high return on investment";
@@ -71,6 +71,7 @@ pub fn BootFirmware() -> impl IntoView {
                     project_summary=project_summary
                     project_what=project_what
                     project_why=project_why
+                    project_who="/team-patina"
                     big_image_url="/images/PatinaBackground.png"
                     small_image_url="/images/dark/ProjectIcon_P_Patina_DarkMode.svg"
                 />

src/pages/boot_firmware.rs

@@ -75,6 +75,7 @@ It’s a modern foundation for building reliable, adaptable EC firmware — not
             <div class="w-full min-h-screen" style="overflow-x: auto;">
                 <Header />
                 <ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why
+                    project_who="/team-ec"
                     big_image_url="/images/ECBackground.png"
                     small_image_url="/images/dark/ProjectIcon_EC_Patina_DarkMode.svg"/>
                 <RepositoryGraph nodes=nodes_data links=links_data/>

src/pages/embedded_controller.rs

@@ -74,6 +74,7 @@ pub fn WindowsEcServices() -> impl IntoView {
             <div class="w-full min-h-screen" style="overflow-x: auto;">
                 <Header />
                 <ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why
+                    project_who="/team-ec-services"
                     big_image_url="/images/ECServicesBackground.png"
                     small_image_url="/images/dark/ProjectIcon_ES_Patina_DarkMode.svg" />
                 <RepositoryGraph nodes=nodes_data links=links_data/>

src/pages/unified_ec_services.rs

@@ -47,7 +47,7 @@
   .h1 {
     @apply text-black dark:text-white;
     font-family: Geist, sans-serif;
-    font-size: 110px;
+    font-size: 100px;
     font-style: normal;
     font-weight: 400;
     line-height: 95%;
@@ -58,7 +58,7 @@
   .h1_mobile {
     @apply text-black dark:text-white;
     font-family: Geist, sans-serif;
-    font-size: 70px;
+    font-size: 60px;
     font-style: normal;
     font-weight: 400;
     line-height: 100%;
@@ -69,7 +69,7 @@
   .h2 {
     @apply text-black dark:text-white;
     font-family: Geist, sans-serif;
-    font-size: 40px;
+    font-size: 30px;
     font-style: normal;
     font-weight: 500;
     line-height: 110%; /* 66px */
@@ -91,7 +91,7 @@
   .h3 {
     @apply text-black dark:text-white;
     font-family: Geist, sans-serif;
-    font-size: 35px;
+    font-size: 25px;
     font-style: normal;
     font-weight: 600;
     line-height: 120%; /* 42px */
@@ -131,7 +131,7 @@
   .p1 {
     @apply text-black dark:text-white;
     font-family: Geist, sans-serif;
-    font-size: 35px;
+    font-size: 30px;
     font-style: normal;
     font-weight: 500;
     line-height: 140%; /* 49px */