From 513518215dde8319dd5daa0a2c72b7a233a9bac0 Mon Sep 17 00:00:00 2001 From: Philipp Hofer Date: Sat, 12 Apr 2025 21:43:49 +0200 Subject: [PATCH] add logo --- assets/logo-horizontal-inverted.svg | 41 +++++++++++++++++++++++++++++ assets/logo-horizontal.svg | 41 +++++++++++++++++++++++++++++ assets/logo-vertical-inverted.svg | 41 +++++++++++++++++++++++++++++ assets/logo-vertical.svg | 41 +++++++++++++++++++++++++++++ assets/style.css | 21 +++++++++++++++ locales/de-AT.yml | 1 - src/admin/mod.rs | 13 ++++++--- src/lib.rs | 32 ++++++++++++++++++++++ 8 files changed, 227 insertions(+), 4 deletions(-) create mode 100644 assets/logo-horizontal-inverted.svg create mode 100644 assets/logo-horizontal.svg create mode 100644 assets/logo-vertical-inverted.svg create mode 100644 assets/logo-vertical.svg diff --git a/assets/logo-horizontal-inverted.svg b/assets/logo-horizontal-inverted.svg new file mode 100644 index 0000000..dfecbbf --- /dev/null +++ b/assets/logo-horizontal-inverted.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo-horizontal.svg b/assets/logo-horizontal.svg new file mode 100644 index 0000000..e867148 --- /dev/null +++ b/assets/logo-horizontal.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo-vertical-inverted.svg b/assets/logo-vertical-inverted.svg new file mode 100644 index 0000000..e4cbabc --- /dev/null +++ b/assets/logo-vertical-inverted.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo-vertical.svg b/assets/logo-vertical.svg new file mode 100644 index 0000000..b5ecc26 --- /dev/null +++ b/assets/logo-vertical.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/style.css b/assets/style.css index 96dd994..d6b609a 100644 --- a/assets/style.css +++ b/assets/style.css @@ -11,6 +11,7 @@ color: #1b5e20; } +/* no background on leaflet marker */ .leaflet-container [role="button"], .leaflet-container [type="button"], .leaflet-container [type="file"]::file-selector-button, @@ -21,3 +22,23 @@ border: unset; box-shadow: unset; } + +[data-theme="light"], +:root:not([data-theme="dark"]), +:host(:not([data-theme="dark"])) { + .logo {display:block}; + .logo-inv {display:none}; +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme]), + :host(:not([data-theme])) { + .logo {display:none}; + .logo-inv {display:block}; + } +} + +[data-theme="dark"] { + .logo {display:none}; + .logo-inv {display:block}; +} diff --git a/locales/de-AT.yml b/locales/de-AT.yml index cab94bb..6ea6d21 100644 --- a/locales/de-AT.yml +++ b/locales/de-AT.yml @@ -1,5 +1,4 @@ _version: 1 -app_name: "Stationslauf-App" stations: "Stationen" stations_expl_without_first_word: "sind festgelegte Orte mit spezifischen Aufgaben." station_warning_not_assigned_route: "Noch keiner Route zugeordnet" # should be short -> tooltip diff --git a/src/admin/mod.rs b/src/admin/mod.rs index afa776c..99b191c 100644 --- a/src/admin/mod.rs +++ b/src/admin/mod.rs @@ -77,9 +77,16 @@ async fn highscore(State(db): State>, session: Session) -> Marku async fn index(session: Session) -> Markup { let content = html! { - h1 { (t!("app_name")) } - a href="/auth/logout" { - "Ausloggen" + nav { + ul { + img class="logo" src="/logo-hor.svg" style="max-width: 100%; width: 25em; margin:auto;"; + img class="logo-inv" src="/logo-hor-inv.svg" width="max-width: 100%; width: 25em; margin:auto;"; + } + ul { + a href="/auth/logout" { + "Ausloggen" + } + } } nav { ul { diff --git a/src/lib.rs b/src/lib.rs index 6c55205..ab7594a 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -84,6 +84,10 @@ const MY_CSS: &str = include_str!("../assets/style.css"); const LEAFLET_CSS: &str = include_str!("../assets/leaflet.css"); const LEAFLET_JS: &str = include_str!("../assets/leaflet.js"); const MARKER_PNG: &[u8] = include_bytes!("../assets/marker-icon.png"); +const LOGO_HOR: &[u8] = include_bytes!("../assets/logo-horizontal.svg"); +const LOGO_VER: &[u8] = include_bytes!("../assets/logo-vertical.svg"); +const LOGO_HOR_INV: &[u8] = include_bytes!("../assets/logo-horizontal-inverted.svg"); +const LOGO_VER_INV: &[u8] = include_bytes!("../assets/logo-vertical-inverted.svg"); async fn serve_pico_css() -> Response { Response::builder() @@ -119,6 +123,30 @@ async fn serve_marker_png() -> Response { .body(Body::from(MARKER_PNG)) .unwrap() } +async fn logo_hor() -> Response { + Response::builder() + .header("Content-Type", "image/svg+xml") + .body(Body::from(LOGO_HOR)) + .unwrap() +} +async fn logo_ver() -> Response { + Response::builder() + .header("Content-Type", "image/svg+xml") + .body(Body::from(LOGO_VER)) + .unwrap() +} +async fn logo_hor_inv() -> Response { + Response::builder() + .header("Content-Type", "image/svg+xml") + .body(Body::from(LOGO_HOR_INV)) + .unwrap() +} +async fn logo_ver_inv() -> Response { + Response::builder() + .header("Content-Type", "image/svg+xml") + .body(Body::from(LOGO_VER_INV)) + .unwrap() +} #[derive(Clone)] struct AppState { @@ -152,6 +180,10 @@ fn router(db: SqlitePool) -> Router { .route("/leaflet.css", get(serve_leaflet_css)) .route("/leaflet.js", get(serve_leaflet_js)) .route("/marker.png", get(serve_marker_png)) + .route("/logo-hor.svg", get(logo_hor)) + .route("/logo-ver.svg", get(logo_ver)) + .route("/logo-hor-inv.svg", get(logo_hor_inv)) + .route("/logo-ver-inv.svg", get(logo_ver_inv)) .with_state(state) .layer(auth_layer) }