Skip to content

Commit be0deae

Browse files
authored
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
1 parent 0e1701b commit be0deae

File tree

8 files changed

+34
-13
lines changed

8 files changed

+34
-13
lines changed

public/images/ec.png

760 Bytes
Loading

src/components/main.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ pub fn Main() -> impl IntoView {
7676
"Learn how ODP projects help build secure, modern devices"
7777
</span>
7878
</div>
79-
<div class="w-full aspect-video rounded-lg overflow-hidden" style="max-width:100vw;">
79+
<div class="w-full lg:w-[1200px] aspect-video rounded-lg overflow-hidden" style="max-width:100vw;">
8080
<iframe
8181
class="w-full h-full"
8282
style="border-radius: 10px; display: block;"

src/components/project_introduction.rs

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
use leptos::prelude::*;
2+
use leptos_router::components::A;
23

34
#[component]
45
pub fn ProjectIntroduction(
56
#[prop(into)] project_title: String,
67
#[prop(into)] project_summary: String,
78
#[prop(into)] project_what: String,
89
#[prop(into)] project_why: String,
10+
#[prop(into)] project_who: String,
911
#[prop(into, optional)] small_image_url: String,
1012
#[prop(into, optional)] big_image_url: String,
1113
) -> impl IntoView {
@@ -14,14 +16,14 @@ pub fn ProjectIntroduction(
1416
<div class="flex flex-col md:flex-row gap-[80px]">
1517
{/* Left Column: Big Picture with Overlayed Text and Small Image */}
1618
<div
17-
class="relative w-full md:w-[1035px] h-[400px] md:h-[930px]"
19+
class="relative w-full md:w-[700px] h-[400px] md:h-[630px]"
1820
style="margin-left: 0; padding-left: 0; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: flex-start;"
1921
>
2022
{/* Big Picture */}
2123
<img
2224
src={big_image_url}
2325
alt="Project Main"
24-
class="w-full h-[400px] md:w-[1035px] md:h-[930px]"
26+
class="w-full h-[400px] md:w-[700px] md:h-[630px]"
2527
style="object-fit: cover; display: block; border-top-right-radius: 40px; border-bottom-right-radius: 40px;"
2628
/>
2729
{/* Overlayed Text and Small Picture */}
@@ -51,7 +53,7 @@ pub fn ProjectIntroduction(
5153
</div>
5254
</div>
5355
{/* Right Column */}
54-
<div class="flex flex-col items-start px-2 md:px-0" style="width: 600px;">
56+
<div class="flex flex-col items-start px-2 md:px-0 w-full">
5557
{/* WHAT label */}
5658
<span
5759
class="mono"
@@ -92,6 +94,22 @@ pub fn ProjectIntroduction(
9294
>
9395
{project_why}
9496
</span>
97+
{/* WHO label */}
98+
<span
99+
class="mono"
100+
style="
101+
display: block;
102+
text-align: left;
103+
"
104+
>
105+
{"WHO"}
106+
</span>
107+
{/* WHO description */}
108+
<div class="link_mobile md:link block text-left">
109+
<A href={project_who}>
110+
{"Learn more about the team →"}
111+
</A>
112+
</div>
95113
</div>
96114
</div>
97115
</section>

src/pages/announcements.rs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ pub fn AnnouncementsPage() -> impl IntoView {
105105
<div class="flex flex-col w-full min-h-screen background_quaternary">
106106
<Header background_class="background_quaternary" />
107107
<div class="h2_mobile md:h1 px-4 md:px-10 pt-4 md:pt-20 pb-4 md:pb-20">Announcements</div>
108-
<div class="flex flex-col md:flex-row w-full flex-1 relative">
109-
<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">
108+
<div class="flex flex-col lg:flex-row w-full flex-1 relative">
109+
<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">
110110
<ul class="space-y-2 md:space-y-4">
111111
{announcements.iter().enumerate().map(|(i, (link, _, slug))| {
112112
let navigate = navigate.clone();
@@ -127,7 +127,7 @@ pub fn AnnouncementsPage() -> impl IntoView {
127127
}).collect::<Vec<_>>()}
128128
</ul>
129129
</div>
130-
<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">
130+
<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">
131131
{move || {
132132
let (title, content): (String, AnyView) = if let Some((_, title, slug)) = announcements.get(selected.get()) {
133133
let content = match *slug {

src/pages/boot_firmware.rs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ pub fn BootFirmware() -> impl IntoView {
3737
},
3838
];
3939

40-
let project_title = "Patina (Boot Firmware)";
40+
let project_title = "Patina";
4141
let project_summary = "Modern Boot Firmware";
4242

4343
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 {
7171
project_summary=project_summary
7272
project_what=project_what
7373
project_why=project_why
74+
project_who="/team-patina"
7475
big_image_url="/images/PatinaBackground.png"
7576
small_image_url="/images/dark/ProjectIcon_P_Patina_DarkMode.svg"
7677
/>

src/pages/embedded_controller.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ It’s a modern foundation for building reliable, adaptable EC firmware — not
7575
<div class="w-full min-h-screen" style="overflow-x: auto;">
7676
<Header />
7777
<ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why
78+
project_who="/team-ec"
7879
big_image_url="/images/ECBackground.png"
7980
small_image_url="/images/dark/ProjectIcon_EC_Patina_DarkMode.svg"/>
8081
<RepositoryGraph nodes=nodes_data links=links_data/>

src/pages/unified_ec_services.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ pub fn WindowsEcServices() -> impl IntoView {
7474
<div class="w-full min-h-screen" style="overflow-x: auto;">
7575
<Header />
7676
<ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why
77+
project_who="/team-ec-services"
7778
big_image_url="/images/ECServicesBackground.png"
7879
small_image_url="/images/dark/ProjectIcon_ES_Patina_DarkMode.svg" />
7980
<RepositoryGraph nodes=nodes_data links=links_data/>

style/tailwind.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
.h1 {
4848
@apply text-black dark:text-white;
4949
font-family: Geist, sans-serif;
50-
font-size: 110px;
50+
font-size: 100px;
5151
font-style: normal;
5252
font-weight: 400;
5353
line-height: 95%;
@@ -58,7 +58,7 @@
5858
.h1_mobile {
5959
@apply text-black dark:text-white;
6060
font-family: Geist, sans-serif;
61-
font-size: 70px;
61+
font-size: 60px;
6262
font-style: normal;
6363
font-weight: 400;
6464
line-height: 100%;
@@ -69,7 +69,7 @@
6969
.h2 {
7070
@apply text-black dark:text-white;
7171
font-family: Geist, sans-serif;
72-
font-size: 40px;
72+
font-size: 30px;
7373
font-style: normal;
7474
font-weight: 500;
7575
line-height: 110%; /* 66px */
@@ -91,7 +91,7 @@
9191
.h3 {
9292
@apply text-black dark:text-white;
9393
font-family: Geist, sans-serif;
94-
font-size: 35px;
94+
font-size: 25px;
9595
font-style: normal;
9696
font-weight: 600;
9797
line-height: 120%; /* 42px */
@@ -131,7 +131,7 @@
131131
.p1 {
132132
@apply text-black dark:text-white;
133133
font-family: Geist, sans-serif;
134-
font-size: 35px;
134+
font-size: 30px;
135135
font-style: normal;
136136
font-weight: 500;
137137
line-height: 140%; /* 49px */

0 commit comments

Comments
 (0)