From b76ed52fb78f15c36e8fa326bb0000bfe77a3767 Mon Sep 17 00:00:00 2001 From: Felipe Balbi Date: Fri, 15 May 2026 09:53:16 -0700 Subject: [PATCH 1/5] t17: Make team grid fluid, drop hard-coded paddings Rewrite the `.grid-container` block in `style/tailwind.css` for the team / steering-committee tiles so it reflows naturally: * `minmax(150px, 1fr)` -> `minmax(180px, 1fr)` so each tile has a small margin around the 150 px `.member-image` portrait. * `grid-gap: 150px` -> `gap: clamp(2rem, 4vw, 6rem)`. The static 150 px gap dominated tablets and small laptops; the clamp interpolates from 32 px on phones to 96 px on wide screens. * Drop the `padding: 0px 8px` and the `@media (min-width: 768px)` block that added `padding-left/right: 240px` on desktop. The wrapper call site (`team_grid.rs`) already declares horizontal padding via `px-2 md:px-32`, so the CSS rule was double-padding. Removing the inner padding lets the auto-fit math use the full available width that the call site allots. Net effect: the team grid uses one more column on wide desktops and considerably less wasted gap space on tablets, with no media queries. Tile minimum width is large enough that it falls back to one column under ~360 px viewport. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- style/tailwind.css | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/style/tailwind.css b/style/tailwind.css index cc4df96..f23243e 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -312,19 +312,23 @@ @apply bg-black dark:bg-white border-white dark:border-black; } + /* Auto-fit grid for the team / steering-committee member tiles. + * + * Tile minimum width matches the .member-image size (180px gives the + * 150px portrait a small breathing margin). `auto-fit` reflows from + * 1 column on phones up to as many columns as fit on wide displays + * with no media queries. + * + * Gap is fluid via clamp() so tablets don't get the desktop 150 px + * gap that used to dominate the row. Horizontal padding is the call + * site's responsibility (the wrapper uses Tailwind's `px-2 md:px-32`) + * so we don't double-pad here. + */ .grid-container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - grid-gap: 150px; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: clamp(2rem, 4vw, 6rem); justify-items: center; - padding: 0px 8px; - } - - @media (min-width: 768px) { - .grid-container { - padding-left: 240px; - padding-right: 240px; - } } .member-image { From ebcefa0be09fcd80f128c8da5126e97ab525d992 Mon Sep 17 00:00:00 2001 From: Felipe Balbi Date: Fri, 15 May 2026 09:57:11 -0700 Subject: [PATCH 2/5] t16: Use aspect-ratio for hero images, drop per-render - alt + + alt } -} +} \ No newline at end of file diff --git a/src/components/project_introduction.rs b/src/components/project_introduction.rs index bc57c71..59a6ae8 100644 --- a/src/components/project_introduction.rs +++ b/src/components/project_introduction.rs @@ -15,39 +15,25 @@ pub fn ProjectIntroduction(
-
+
Project Main -
+
Project Logo - + {project_title} - + {project_summary}
diff --git a/src/components/projects_component.rs b/src/components/projects_component.rs index 20a34a6..2afb63e 100644 --- a/src/components/projects_component.rs +++ b/src/components/projects_component.rs @@ -30,17 +30,12 @@ pub fn ProjectsComponent() -> impl IntoView {
-
- -
+
impl IntoView {
-
- -
+
impl IntoView {
-
- -
+
Date: Fri, 15 May 2026 10:15:43 -0700 Subject: [PATCH 3/5] t14: Replace fixed-pixel column widths with flex-1 sizing The two- and three-column section layouts hard-coded their child widths in pixels (`md:w-[800px]`, `md:w-[650px]`, `md:w-[700px]`, `md:w-[600px]`, `md:w-[400px]`, `md:w-[950px]`, `md:max-w-[900px]`, `md:w-[423px]`, `md:w-[1200px]`). At any viewport between `md` (768 px) and the parent's max width the columns either overflowed the row or stranded whitespace, depending on the section's outer padding. Replace the pixel widths with `md:flex-1` (or `lg:flex-1` for the welcome/video row) so each column claims an equal share of the available row width and the columns reflow with the viewport: * `landing_page.rs` -- hero (800/650 split) and the three Value Proposition cards (400 each) are now equal flex children. * `community_teams.rs` -- intro 950/900 split is now equal flex children; dropped the inline `style="flex: 1;"` (now redundant). * `projects_component.rs` -- "System Firmware Domains" 700/600 split is now equal flex children. * `main.rs` -- the welcome text (423 px) and embedded video (1200 px) row is now `lg:flex-1` / `lg:flex-[2]` so the video gets twice the width of the descriptive copy at lg+. * `team_patina.rs` / `team_ec.rs` / `team_ec_services.rs` -- "Meet the team" 700/600 splits are now equal flex children. Header/footer logo sizes, doc-section icon sizes, the announcements sidebar (already using a responsive `lg/xl` ladder), and the two `main.rs` 478 px CTA buttons are intentionally left as fixed-pixel sizes -- they encode brand asset dimensions or already-responsive ladders, not arbitrary column widths. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/components/community_teams.rs | 4 ++-- src/components/landing_page.rs | 10 +++++----- src/components/main.rs | 4 ++-- src/components/projects_component.rs | 4 ++-- src/pages/team_ec.rs | 4 ++-- src/pages/team_ec_services.rs | 4 ++-- src/pages/team_patina.rs | 4 ++-- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/community_teams.rs b/src/components/community_teams.rs index 8c43e6b..922cb8f 100644 --- a/src/components/community_teams.rs +++ b/src/components/community_teams.rs @@ -38,12 +38,12 @@ pub fn CommunityTeams() -> impl IntoView { view! {
-
+
{"How ODP is built by its community"}
-
+
{"The Open Device Partnership (ODP) is a collaborative open-source initiative designed to promote cooperative innovation in firmware development through contribution and transparency."} diff --git a/src/components/landing_page.rs b/src/components/landing_page.rs index 09530b7..bbf131b 100644 --- a/src/components/landing_page.rs +++ b/src/components/landing_page.rs @@ -7,12 +7,12 @@ pub fn LandingPage() -> impl IntoView { view! {
-
+
{"An Open Collaboration for Secure, Modern Devices"}
-
+
{"The Open Device Partnership (ODP) is a global initiative to make it easier for developers and device makers to build secure, efficient, and reliable client devices for cross-platform needs and certified environments."}

@@ -25,7 +25,7 @@ pub fn LandingPage() -> impl IntoView {

{"Value Proposition"}

-
+
{"Enhanced Security"} @@ -34,7 +34,7 @@ pub fn LandingPage() -> impl IntoView { {"Security threats continue to evolve. ODP takes a proactive approach: reducing attack surfaces, using secure hardware features, leveraging the memory-safe Rust language, and designing every component with security-first principles."}
-
+
{"Standardization"} @@ -43,7 +43,7 @@ pub fn LandingPage() -> impl IntoView { {"Many device firmware components are 'invisible plumbing' - necessary but costly to build and maintain. ODP's standards-based approach simplifies this infrastructure, maximizing reuse across devices, architectures (x86 and ARM), and generations."}
-
+
{"Accelerated Development"} diff --git a/src/components/main.rs b/src/components/main.rs index 0b02994..48f2060 100644 --- a/src/components/main.rs +++ b/src/components/main.rs @@ -45,7 +45,7 @@ pub fn Main() -> impl IntoView {
-
+
impl IntoView {