Skip to content

Commit 8a39e79

Browse files
jeffglaumjeffglaum
authored
Merge pull request #29 from namiba-work/main
Fixing dark mode and fixing the project pages
2 parents a56865f + fb3bff8 commit 8a39e79

14 files changed

Lines changed: 197 additions & 200 deletions

‎public/images/ECBackground.png‎

989 KB
Loading

‎public/images/ECServicesBackground.png‎

977 KB
Loading

‎public/images/PatinaBackground.png‎

967 KB
Loading

‎public/images/dark/ProjectIcon_ES_Patina_DarkMode.svg‎

Lines changed: 14 additions & 14 deletions
Loading

‎src/components/community_teams.rs‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,6 @@ pub fn CommunityTeams() -> impl IntoView {
99
padding: 120px;
1010
"
1111
>
12-
{/* Row 1: Header */}
13-
<div style="margin-bottom: 56px;">
14-
<span
15-
class="p_mono"
16-
style="
17-
display: block;
18-
"
19-
>
20-
{"COMMUNITY"}
21-
</span>
22-
</div>
23-
2412
{/* Row 2: Two Columns */}
2513
<div class="flex flex-row gap-[60px]" style="margin-bottom: 80px;">
2614
<div style="width: 950px;">

‎src/components/project_introduction.rs‎

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,76 @@ pub fn ProjectIntroduction(
66
#[prop(into)] project_summary: String,
77
#[prop(into)] project_what: String,
88
#[prop(into)] project_why: String,
9+
#[prop(into, optional)] small_image_url: String,
10+
#[prop(into, optional)] big_image_url: String,
911
) -> impl IntoView {
1012
view! {
11-
<section
12-
class="background_primary"
13-
style="
14-
padding: 120px 120px 120px 0;
15-
"
16-
>
13+
<section class="background_primary">
1714
<div class="flex flex-row gap-[80px]">
18-
{/* Left Column */}
19-
<div class="flex flex-col items-start" style="width: 1035px; height: 930px; position: relative; margin-left: 0; padding-left: 0;">
15+
{/* Left Column: Big Picture with Overlayed Text and Small Image */}
16+
<div
17+
class="relative"
18+
style="
19+
width: 1035px;
20+
height: 930px;
21+
margin-left: 0;
22+
padding-left: 0;
23+
flex-shrink: 0;
24+
position: relative;
25+
display: flex;
26+
align-items: center;
27+
justify-content: flex-start;
28+
"
29+
>
30+
{/* Big Picture */}
31+
<img
32+
src={big_image_url}
33+
alt="Project Main"
34+
style="
35+
width: 1035px;
36+
height: 930px;
37+
object-fit: cover;
38+
display: block;
39+
border-top-right-radius: 100px;
40+
border-bottom-right-radius: 100px;
41+
"
42+
/>
43+
{/* Overlayed Text and Small Picture */}
2044
<div
2145
style="
2246
position: absolute;
2347
top: 50%;
24-
left: 50%;
25-
transform: translate(-50%, -50%);
26-
z-index: 10;
27-
text-align: center;
48+
left: 0;
49+
transform: translateY(-50%);
50+
z-index: 2;
51+
text-align: left;
52+
width: 90%;
53+
padding-left: 60px;
54+
display: flex;
55+
flex-direction: column;
56+
align-items: flex-start;
2857
"
2958
>
59+
{/* Small Picture aligned with project title and 60px above */}
60+
<img
61+
src={small_image_url}
62+
alt="Project Logo"
63+
style="
64+
width: 102px;
65+
height: 102px;
66+
object-fit: contain;
67+
margin-bottom: 60px;
68+
margin-left: 0;
69+
"
70+
/>
3071
<span
3172
class="h1"
3273
style="
3374
display: block;
3475
color: white;
35-
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
3676
margin-bottom: 10px;
77+
word-break: break-word;
78+
text-align: left;
3779
"
3880
>
3981
{project_title}
@@ -43,25 +85,13 @@ pub fn ProjectIntroduction(
4385
style="
4486
display: block;
4587
color: white;
46-
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
88+
word-break: break-word;
89+
text-align: left;
4790
"
4891
>
4992
{project_summary}
5093
</span>
5194
</div>
52-
<picture style="width: 100%; height: 100%;">
53-
<source srcset="/images/patina_header.svg" />
54-
<img
55-
src="/images/patina_header.svg"
56-
alt="Patina Project"
57-
class="icon"
58-
style="
59-
width: 100%;
60-
height: 100%;
61-
object-fit: contain;
62-
"
63-
/>
64-
</picture>
6595
</div>
6696
{/* Right Column */}
6797
<div class="flex flex-col items-start" style="width: 600px;">
@@ -77,7 +107,7 @@ pub fn ProjectIntroduction(
77107
</span>
78108
{/* WHAT description */}
79109
<span
80-
class="p1"
110+
class="p2"
81111
style="
82112
display: block;
83113
text-align: left;
@@ -97,7 +127,7 @@ pub fn ProjectIntroduction(
97127
</span>
98128
{/* WHY description */}
99129
<span
100-
class="p1"
130+
class="p2"
101131
style="
102132
display: block;
103133
text-align: left;
@@ -108,13 +138,15 @@ pub fn ProjectIntroduction(
108138
</div>
109139
</div>
110140
</section>
111-
<div>
141+
<div class="background_primary">
112142
<span
113143
class="p1"
114144
style="
115145
display: block;
116146
text-align: left;
117147
padding-left: 20px;
148+
padding-top: 100px;
149+
padding-bottom: 20px;
118150
"
119151
>
120152
Repository Diagram

‎src/components/team_grid.rs‎

Lines changed: 15 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,22 @@ pub struct TeamMember {
1414
#[component]
1515
pub fn TeamGrid(#[prop(into)] members: Vec<TeamMember>) -> impl IntoView {
1616
view! {
17-
<style>
18-
{r#"
19-
.grid-container {
20-
display: grid;
21-
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
22-
max-width: calc(5 * (150px + 60px) - 60px);
23-
gap: 60px;
24-
justify-items: center;
25-
padding: 20px 0 60px 0;
26-
margin: 0 auto;
27-
}
28-
.member-card {
29-
text-align: left;
30-
width: 150px;
31-
}
32-
.member-image {
33-
width: 150px;
34-
height: 150px;
35-
background-color: #ccc;
36-
background-size: cover;
37-
background-position: center;
38-
margin-bottom: 8px;
39-
}
40-
.member-name {
41-
font-weight: bold;
42-
margin-bottom: 4px;
43-
}
44-
.member-role {
45-
font-size: 0.9em;
46-
margin-bottom: 2px;
47-
}
48-
.member-username {
49-
font-size: 0.85em;
50-
color: #555;
51-
}
52-
.member-github-link {
53-
display: inline;
54-
font-size: 0.9em;
55-
margin-top: 4px;
56-
color: #0366d6;
57-
text-decoration: underline;
58-
}
59-
"#}
60-
</style>
61-
62-
<div class="grid-container">
63-
{members.into_iter().map(|member| {
64-
view! {
65-
<div class="member-card">
66-
<img class="member-image" src=member.image_url alt="Profile Picture" />
67-
<div class="member-name">{format!("{} {}", member.first_name, member.last_name)}</div>
68-
<div class="member-role">{member.role}</div>
69-
<div class="member-username">
70-
{"GitHub: "}
71-
<a class="member-github-link" href=member.github_url target="_blank">{member.github_username}</a>
17+
<div class="background_primary">
18+
<div class="grid-container" style="padding-bottom: 120px;">
19+
{members.into_iter().map(|member| {
20+
view! {
21+
<div>
22+
<img class="member-image" src=member.image_url alt="Profile Picture" />
23+
<div class="h3">{format!("{} {}", member.first_name, member.last_name)}</div>
24+
<div class="p2">{member.role}</div>
25+
<div class="p2">
26+
{"GitHub: "}
27+
<a class="link" href=member.github_url target="_blank">{member.github_username}</a>
28+
</div>
7229
</div>
73-
</div>
74-
}
75-
}).collect_view()}
30+
}
31+
}).collect_view()}
32+
</div>
7633
</div>
7734
}
7835
}

‎src/pages/boot_firmware.rs‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ It’s time for firmware to act like real software — and Patina makes that pos
5858
<h1>"Uh oh! Something went wrong!"</h1>
5959

6060
<p>"Errors: "</p>
61-
// Render a list of errors as strings - good for development purposes
6261
<ul>
6362
{move || {
6463
errors
@@ -67,14 +66,20 @@ It’s time for firmware to act like real software — and Patina makes that pos
6766
.map(|(_, e)| view! { <li>{e.to_string()}</li> })
6867
.collect_view()
6968
}}
70-
7169
</ul>
7270
}
7371
}>
7472

7573
<div class="w-full min-h-screen" style="overflow-x: auto;">
7674
<Header />
77-
<ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why />
75+
<ProjectIntroduction
76+
project_title=project_title
77+
project_summary=project_summary
78+
project_what=project_what
79+
project_why=project_why
80+
big_image_url="/images/PatinaBackground.png"
81+
small_image_url="/images/dark/ProjectIcon_P_Patina_DarkMode.svg"
82+
/>
7883
<RepositoryGraph nodes=nodes_data links=links_data/>
7984
<DocumentationTraining links=links />
8085
<Footer />

‎src/pages/embedded_controller.rs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ It’s a modern foundation for building reliable, adaptable EC firmware — not
7474

7575
<div class="w-full min-h-screen" style="overflow-x: auto;">
7676
<Header />
77-
<ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why />
77+
<ProjectIntroduction project_title=project_title project_summary=project_summary project_what=project_what project_why=project_why
78+
big_image_url="/images/ECBackground.png"
79+
small_image_url="/images/dark/ProjectIcon_EC_Patina_DarkMode.svg"/>
7880
<RepositoryGraph nodes=nodes_data links=links_data/>
7981
<DocumentationTraining links=links />
8082
<Footer />

‎src/pages/team_ec.rs‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ pub fn TeamEC() -> impl IntoView {
8383
<h1>"Uh oh! Something went wrong!"</h1>
8484

8585
<p>"Errors: "</p>
86-
// Render a list of errors as strings - good for development purposes
8786
<ul>
8887
{move || {
8988
errors
@@ -92,34 +91,33 @@ pub fn TeamEC() -> impl IntoView {
9291
.map(|(_, e)| view! { <li>{e.to_string()}</li> })
9392
.collect_view()
9493
}}
95-
9694
</ul>
9795
}
9896
}>
9997

10098
<div class="w-full min-h-screen overflow-x-hidden">
10199
<Header />
102-
<a
103-
href="javascript:history.back()"
104-
class="block"
105-
style="margin: 0; padding: 0;"
106-
>
107-
<picture>
108-
<source srcset="/images/dark/backbutton.svg" media="(prefers-color-scheme: dark)" />
109-
<img
110-
src="/images/light/backbutton.svg"
111-
alt="Back"
112-
style="margin: 0; padding: 0; display: block;"
113-
/>
114-
</picture>
115-
</a>
116-
<section
100+
<div
117101
class="background_primary"
118-
style="
119-
padding: 120px;
120-
margin-top: -80px;
121-
"
102+
style="padding: 120px; position: relative;"
122103
>
104+
<div style="position: absolute; left: 0; top: 0;">
105+
<a
106+
href="javascript:history.back()"
107+
class="block"
108+
style="margin: 0; padding: 0;"
109+
>
110+
<picture>
111+
<source srcset="/images/dark/backbutton.svg" media="(prefers-color-scheme: dark)" />
112+
<img
113+
src="/images/light/backbutton.svg"
114+
alt="Back"
115+
style="margin: 0; padding: 0; display: block;"
116+
/>
117+
</picture>
118+
</a>
119+
</div>
120+
123121
<div class="flex flex-row gap-[80px]">
124122
{/* Left Column */}
125123
<div class="flex flex-col items-start" style="width: 700px;">
@@ -137,11 +135,11 @@ pub fn TeamEC() -> impl IntoView {
137135
<div class="flex flex-col items-start" style="width: 600px;">
138136
{/* Team Introduction */}
139137
<span
140-
class="mono"
141-
style="
142-
display: block;
143-
text-align: left;
144-
"
138+
class="mono"
139+
style="
140+
display: block;
141+
text-align: left;
142+
"
145143
>
146144
{"Secure EC team"}
147145
</span>
@@ -156,11 +154,10 @@ pub fn TeamEC() -> impl IntoView {
156154
</span>
157155
</div>
158156
</div>
159-
</section>
157+
</div>
160158
<TeamGrid members=team />
161159
<Footer />
162160
</div>
163-
164161
</ErrorBoundary>
165162
}
166163
}

0 commit comments

Comments
 (0)