uhhm/portal
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

Fix favicon (real icon, not an unrelated orange circle) + stack encouragements with the submit button
Deploy / deploy (push) Successful in 35s
Details

Browse Source 
favicon.svg was a plain solid circle, unrelated to the actual brand
mark - replaced with the real single-arch icon (matching
infrastructure/assets/icon-{light,dark}.svg), split into two
prefers-color-scheme-scoped files rather than one SVG with an embedded
@media query - the latter doesn't reliably re-evaluate via <link> on
Safari/iOS (confirmed by prior real-device testing on the Gitea side,
see gitea-head.tmpl).

Encouragements used to render right after the description, separated
from the actual submit button by the whole features/requirements
block - moved them into the same wrapper as the form, directly above
the button, so reassurance text and the call to action read together.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-06 12:11:17 +02:00
co-authored by Claude Sonnet 5
parent aa18c69be4
commit 11c6f3e8f7
6 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/favicon-dark.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="134" height="150" viewBox="-25 -25 134 150" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round">
<path d="M0,100 V42 A42,42 0 0 1 84,42 V100"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

public/favicon-light.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="134" height="150" viewBox="-25 -25 134 150" fill="none" stroke="#111827" stroke-width="26" stroke-linecap="round">
<path d="M0,100 V42 A42,42 0 0 1 84,42 V100"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

public/favicon.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="13" fill="#b8631f"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 118 B

src/app.rs
+23 -15
View File
@@ -32,7 +32,13 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="/favicon.svg" type="image/svg+xml"/> // Two prefers-color-scheme-scoped links, not one SVG with
// an embedded @media query - confirmed via real-device
// testing (see infrastructure's gitea-head.tmpl) that an
// SVG's own internal @media doesn't reliably re-evaluate
// once loaded via <link>/<img> on Safari/iOS.
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/>
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/>
<AutoReload options=options.clone()/> <AutoReload options=options.clone()/>
<HydrationScripts options/> <HydrationScripts options/>
<MetaTags/> <MetaTags/>
@@ -558,11 +564,6 @@ fn AlternativeCard(
<section class="alt-card"> <section class="alt-card">
<h2>{alternative.name.clone()}</h2> <h2>{alternative.name.clone()}</h2>
<p class="alt-description">{alternative.description.clone()}</p> <p class="alt-description">{alternative.description.clone()}</p>
<For
each=move || alternative.encouragements.clone()
key=|e| e.clone()
children=move |e| view! { <p class="alt-encouragement">{e}</p> }
/>
<div class="features"> <div class="features">
<For <For
each={ each={
@@ -766,15 +767,22 @@ fn AlternativeCard(
{has_action {has_action
.then(|| { .then(|| {
view! { view! {
<form on:submit=on_submit> <div class="alt-cta">
<button <For
type="submit" each=move || alternative.encouragements.clone()
class="alt-submit" key=|e| e.clone()
disabled=move || submit.pending().get() children=move |e| view! { <p class="alt-encouragement">{e}</p> }
> />
{button_label.clone()} <form on:submit=on_submit>
</button> <button
</form> type="submit"
class="alt-submit"
disabled=move || submit.pending().get()
>
{button_label.clone()}
</button>
</form>
</div>
} }
})} })}
</section> </section>
src/main.rs
+4 -2
View File
@@ -117,7 +117,8 @@ async fn main() -> anyhow::Result<()> {
"{}/{}", "{}/{}",
leptos_options.site_root, leptos_options.site_pkg_dir leptos_options.site_root, leptos_options.site_pkg_dir
); );
let favicon_path = format!("{}/favicon.svg", leptos_options.site_root); let favicon_light_path = format!("{}/favicon-light.svg", leptos_options.site_root);
let favicon_dark_path = format!("{}/favicon-dark.svg", leptos_options.site_root);
let fonts_dir = format!("{}/fonts", leptos_options.site_root); let fonts_dir = format!("{}/fonts", leptos_options.site_root);
let app = Router::new() let app = Router::new()
@@ -130,7 +131,8 @@ async fn main() -> anyhow::Result<()> {
.route("/automation/kv/{bucket}", get(content::automation_kv_handler)) .route("/automation/kv/{bucket}", get(content::automation_kv_handler))
.nest_service("/pkg", ServeDir::new(pkg_dir)) .nest_service("/pkg", ServeDir::new(pkg_dir))
.nest_service("/fonts", ServeDir::new(fonts_dir)) .nest_service("/fonts", ServeDir::new(fonts_dir))
.route_service("/favicon.svg", ServeFile::new(favicon_path)) .route_service("/favicon-light.svg", ServeFile::new(favicon_light_path))
.route_service("/favicon-dark.svg", ServeFile::new(favicon_dark_path))
.leptos_routes_with_context( .leptos_routes_with_context(
&state, &state,
routes, routes,
style/main.css
+9 -1
View File
@@ -178,6 +178,15 @@ main.loading, main.not-found {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--accent); color: var(--accent);
font-style: italic; font-style: italic;
margin: 0;
}
.alt-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
margin-top: 1.4rem;
} }
.features { display: grid; gap: 1.1rem; margin-top: 0.6rem; } .features { display: grid; gap: 1.1rem; margin-top: 0.6rem; }
@@ -272,7 +281,6 @@ input:focus, textarea:focus {
.prosekit-editor p:last-child { margin-bottom: 0; } .prosekit-editor p:last-child { margin-bottom: 0; }
.alt-submit { .alt-submit {
margin-top: 1.4rem;
font-family: var(--sans); font-family: var(--sans);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;