From eae64d85981c1bbe314bffc6c43b2e09becd5b67 Mon Sep 17 00:00:00 2001 From: CodingTil <36734749+CodingTil@users.noreply.github.com> Date: Mon, 5 Feb 2024 23:46:29 +0100 Subject: [PATCH] Overhauling UI Design --- index.html | 2 +- src/components/color_theme_picker.rs | 9 +- src/components/header.rs | 41 +++- src/components/icon_badges.rs | 206 ++++++++++++++++++ src/components/language_switcher.rs | 28 --- src/components/logo.rs | 20 -- src/components/mod.rs | 3 +- src/components/project.rs | 26 ++- .../de/projects/2023-03-10_FractalRust.md | 19 +- src/content/de/projects/2023-11-01_EIUIE.md | 4 +- src/content/de/projects/2023-11-17_py_css.md | 4 +- .../en/projects/2023-03-10_FractalRust.md | 17 +- src/content/en/projects/2023-11-01_EIUIE.md | 4 +- src/content/en/projects/2023-11-17_py_css.md | 4 +- src/main.rs | 24 +- src/pages/home.rs | 75 +++++-- src/theme.rs | 41 ++-- 17 files changed, 344 insertions(+), 183 deletions(-) create mode 100644 src/components/icon_badges.rs delete mode 100644 src/components/language_switcher.rs delete mode 100644 src/components/logo.rs diff --git a/index.html b/index.html index 5907c46..bc4a6b0 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/components/color_theme_picker.rs b/src/components/color_theme_picker.rs index 5917d06..46b63aa 100644 --- a/src/components/color_theme_picker.rs +++ b/src/components/color_theme_picker.rs @@ -11,19 +11,12 @@ pub fn ColorThemePicker() -> Html { let this_theme = theme.kind().clone(); let other_theme = match this_theme { - ThemeKind::Light => ThemeKind::Dark, - ThemeKind::Dark => ThemeKind::Light, + ThemeKind::Dark => ThemeKind::Dark, }; let switch_theme = Callback::from(move |_| theme.set(other_theme.clone())); match this_theme { - ThemeKind::Light => html! { - - }, ThemeKind::Dark => html! { } diff --git a/src/components/icon_badges.rs b/src/components/icon_badges.rs new file mode 100644 index 0000000..7b18037 --- /dev/null +++ b/src/components/icon_badges.rs @@ -0,0 +1,206 @@ +use yew::prelude::*; + +use stylist::{style, yew::styled_component}; + +pub fn get_icon_badge(name: &str) -> Option { + return match name.to_lowercase().as_str() { + "java" => Some(html! {}), + "python" => Some(html! {}), + "rust" => Some(html! {}), + "wasm" => Some(html! {}), + "webassembly" => Some(html! {}), + "gpu" => Some(html! {}), + "wgpu" => Some(html! {}), + "webgpu" => Some(html! {}), + "git" => Some(html! {}), + "lwjgl" => Some(html! {}), + "pytorch" => Some(html! {}), + "pyterrier" => Some(html! {}), + _ => None, + }; +} + +#[derive(Debug, PartialEq, Properties)] +pub struct BadgesStripProps { + pub tags: Vec, + pub scale: Option, +} + +#[styled_component] +pub fn BadgesStrip(props: &BadgesStripProps) -> Html { + // split comma-seperated, possibly whitespace-added list of badges + let tags: Vec<&str> = props.tags.iter().map(|s| s.trim()).collect(); + let badges: Vec = tags.iter().filter_map(|tag| get_icon_badge(tag)).collect(); + + let scale = props.scale.unwrap_or(100); + + // only if there are badges, render the strip + if !badges.is_empty() { + html! { +
+ { badges.into_iter().collect::() } +
+ } + } else { + html! {
} + } +} + +#[styled_component] +pub fn Java() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ + + {"Java"} + +
+ + } +} + +#[styled_component] +pub fn Python() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ + + {"Python"} + +
+ + } +} + +#[styled_component] +pub fn Rust() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ +
+ + } +} + +#[styled_component] +pub fn WASM() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ WebAssembly Logo +
+ + } +} + +#[styled_component] +pub fn GPU() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ WebGPU Logo +
+ + } +} + +#[styled_component] +pub fn Git() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ +
+ + } +} + +#[styled_component] +pub fn LWJGL() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ LWJGL Logo +
+ + } +} + +#[styled_component] +pub fn PyTorch() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ PyTorch Logo +
+ + } +} + +#[styled_component] +pub fn PyTerrier() -> Html { + let style_class = style!( + r#" + aspect-ratio: 1 / 1; + "# + ) + .unwrap(); + html! { + +
+ PyTerrier Logo +
+ + } +} diff --git a/src/components/language_switcher.rs b/src/components/language_switcher.rs deleted file mode 100644 index 1495def..0000000 --- a/src/components/language_switcher.rs +++ /dev/null @@ -1,28 +0,0 @@ -use yew::prelude::*; - -use stylist::yew::styled_component; - -use crate::localization::{use_localization, Localization}; - -#[styled_component] -pub fn LanguageSwitcher() -> Html { - let localization = use_localization(); - - let current_locale = localization.get().clone(); - - let other_locale = match current_locale { - Localization::DE => Localization::EN, - Localization::EN => Localization::DE, - }; - - let other_locale_str = other_locale.to_string(); - - let switch_locale = Callback::from(move |_| localization.set(other_locale.clone())); - - html! { - - } -} diff --git a/src/components/logo.rs b/src/components/logo.rs deleted file mode 100644 index 9faaa7f..0000000 --- a/src/components/logo.rs +++ /dev/null @@ -1,20 +0,0 @@ -use yew::prelude::*; -use yew_router::prelude::*; - -use stylist::yew::styled_component; - -use crate::router::Route; - -#[styled_component] -pub fn Logo() -> Html { - html! { - to={Route::Home}> -
- - - {"Home"} - -
- > - } -} diff --git a/src/components/mod.rs b/src/components/mod.rs index bbcaea0..e2cf3da 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -4,6 +4,5 @@ pub mod content_item; pub mod content_teaching; pub mod footer; pub mod header; -pub mod language_switcher; -pub mod logo; +pub mod icon_badges; pub mod project; diff --git a/src/components/project.rs b/src/components/project.rs index a47693e..6a171ed 100644 --- a/src/components/project.rs +++ b/src/components/project.rs @@ -8,6 +8,7 @@ use stylist::yew::styled_component; use serde::Deserialize; use yaml_front_matter::YamlFrontMatter; +use crate::components::icon_badges::BadgesStrip; use crate::router::Route; use crate::safehtml::SafeHtml; @@ -101,16 +102,16 @@ pub fn ProjectCard(props: &ProjectCardProps) -> Html { html! {
to={to_route}> -
-
+
+
-
+
{tagline.clone()}

- + {title.clone()} > @@ -141,7 +142,7 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html { tagline, url, date_range, - skills: _, + skills: tags, filters: _, coauthors, report, @@ -299,19 +300,20 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html {
-
+

{title.clone()}

{tagline.clone()}

+
-
-
+
+
- + {date_range.clone()} @@ -325,7 +327,7 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html { if let Some(ca_list) = coauthors { if !ca_list.is_empty() {
- + {"Coauthors: "} @@ -336,7 +338,7 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html { html! { - {ca.name.clone()} + {format!("· {}", ca.name.clone())} @@ -348,7 +350,7 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html { } if let Some(report_url) = report { - + {"Report"} diff --git a/src/content/de/projects/2023-03-10_FractalRust.md b/src/content/de/projects/2023-03-10_FractalRust.md index 2a478f6..0ffaba8 100644 --- a/src/content/de/projects/2023-03-10_FractalRust.md +++ b/src/content/de/projects/2023-03-10_FractalRust.md @@ -1,31 +1,16 @@ --- slug: fractal image: Fractal -title: Fractal (Rust + WebAssembly + WGPU) +title: Fractal color: bg-orange-600 -tagline: Fraktalgenerator geschrieben in Rust und kompiliert zu WebAssembly +tagline: Generator von Fraktalen geschrieben in Rust und kompiliert zu WebAssembly url: https://github.com/CodingTil/fractal_rust date_range: March 2023 skills: [rust, webassembly, gpu, shader] filters: [rust, webassembly, gpu, shader, wasm] --- -
- - - - + - - WebAssembly Logo - - + - - WebGPU Logo - -
- # Übersicht -Wenn nichts angezeigt wird, ist es wahrscheinlich, dass entweder Ihr Browser WebAssembly nicht unterstützt oder das GPU-Rendering deaktiviert ist. Dieses kleine Programm ist in der Programmiersprache [Rust](https://www.rust-lang.org/) geschrieben, zu [WebAssembly](https://webassembly.org/) kompiliert und nutzt die GPU ([wgpu](https://wgpu.rs/)) zur Darstellung des Fraktals. diff --git a/src/content/de/projects/2023-11-01_EIUIE.md b/src/content/de/projects/2023-11-01_EIUIE.md index ab7a9fb..c56ea7f 100644 --- a/src/content/de/projects/2023-11-01_EIUIE.md +++ b/src/content/de/projects/2023-11-01_EIUIE.md @@ -6,8 +6,8 @@ color: bg-purple-600 tagline: Verbesserung von Bildern mit ungleichmäßiger Beleuchtung durch Ensemble-Lernen url: https://github.com/CodingTil/eiuie date_range: November 2023 -skills: [python, computer vision, image processing, git] -filters: [computer vision, image processing, git] +skills: [python, computer vision, pytorch, image processing, git] +filters: [computer vision, pytorch, image processing, git] coauthors: - name: Alexander Mühleisen url: https://github.com/AlexanderMuehleisen diff --git a/src/content/de/projects/2023-11-17_py_css.md b/src/content/de/projects/2023-11-17_py_css.md index c85b568..9bbf0f0 100644 --- a/src/content/de/projects/2023-11-17_py_css.md +++ b/src/content/de/projects/2023-11-17_py_css.md @@ -6,8 +6,8 @@ color: bg-rose-600 tagline: Ein konversationelles Suchsystem, entwickelt in Python. url: https://github.com/CodingTil/py_css date_range: September 2023 - November 2023 -skills: [python, conversational search system, search engine, text processing, information retrieval, git] -filters: [conversational search system, search engine, text processing, information retrieval, git] +skills: [python, pyterrier, conversational search system, search engine, text processing, information retrieval, git] +filters: [pyterrier, conversational search system, search engine, text processing, information retrieval, git] coauthors: - name: Ishaac Ourahou url: https://github.com/Ishaac0005 diff --git a/src/content/en/projects/2023-03-10_FractalRust.md b/src/content/en/projects/2023-03-10_FractalRust.md index 89715e0..c13fe1d 100644 --- a/src/content/en/projects/2023-03-10_FractalRust.md +++ b/src/content/en/projects/2023-03-10_FractalRust.md @@ -1,7 +1,7 @@ --- slug: fractal image: Fractal -title: Fractal (Rust + WebAssembly + WGPU) +title: Fractal color: bg-orange-600 tagline: Fractal generator written in Rust and compiled to WebAssembly url: https://github.com/CodingTil/fractal_rust @@ -9,23 +9,8 @@ date_range: March 2023 skills: [rust, webassembly, gpu, shader] filters: [rust, webassembly, gpu, shader, wasm] --- -
- - - - + - - WebAssembly Logo - - + - - WebGPU Logo - -
- # Overview -If nothing is being displayed, it is possible that your browser does not support WebAssembly or GPU rendering has been disabled. This small program is written in [Rust](https://www.rust-lang.org/), compiled to [WebAssembly](https://webassembly.org/), and uses the GPU ([wgpu](https://wgpu.rs/)) to render the fractal. diff --git a/src/content/en/projects/2023-11-01_EIUIE.md b/src/content/en/projects/2023-11-01_EIUIE.md index 770280b..410b6ba 100644 --- a/src/content/en/projects/2023-11-01_EIUIE.md +++ b/src/content/en/projects/2023-11-01_EIUIE.md @@ -6,8 +6,8 @@ color: bg-purple-600 tagline: Enhancing Images with Uneven Illumination using Ensemble Learning url: https://github.com/CodingTil/eiuie date_range: November 2023 -skills: [python, computer vision, image processing, git] -filters: [computer vision, image processing, git] +skills: [python, computer vision, pytorch, image processing, git] +filters: [computer vision, pytorch, image processing, git] coauthors: - name: Alexander Mühleisen url: https://github.com/AlexanderMuehleisen diff --git a/src/content/en/projects/2023-11-17_py_css.md b/src/content/en/projects/2023-11-17_py_css.md index 318ae94..9cd1d87 100644 --- a/src/content/en/projects/2023-11-17_py_css.md +++ b/src/content/en/projects/2023-11-17_py_css.md @@ -6,8 +6,8 @@ color: bg-rose-600 tagline: A conversational search system built in python. url: https://github.com/CodingTil/py_css date_range: September 2023 - November 2023 -skills: [python, conversational search system, search engine, text processing, information retrieval, git] -filters: [conversational search system, search engine, text processing, information retrieval, git] +skills: [python, pyterrier, conversational search system, search engine, text processing, information retrieval, git] +filters: [pyterrier, conversational search system, search engine, text processing, information retrieval, git] coauthors: - name: Ishaac Ourahou url: https://github.com/Ishaac0005 diff --git a/src/main.rs b/src/main.rs index 15c4b30..b052b67 100644 --- a/src/main.rs +++ b/src/main.rs @@ -21,22 +21,22 @@ fn App() -> Html { let theme = use_theme(); let mut rainbow_css = "".to_owned(); - rainbow_css += format!(".text-rainbow-1 {{ color: {}; }} .bg-rainbow-1 {{ background-color: {}; }} .border-rainbow-1 {{ border-color: {}; }} ", theme.rainbow_1.clone(), theme.rainbow_1.clone(), theme.rainbow_1.clone()).as_str(); - rainbow_css += format!(".text-rainbow-2 {{ color: {}; }} .bg-rainbow-2 {{ background-color: {}; }} .border-rainbow-2 {{ border-color: {}; }} ", theme.rainbow_2.clone(), theme.rainbow_2.clone(), theme.rainbow_2.clone()).as_str(); - rainbow_css += format!(".text-rainbow-3 {{ color: {}; }} .bg-rainbow-3 {{ background-color: {}; }} .border-rainbow-3 {{ border-color: {}; }} ", theme.rainbow_3.clone(), theme.rainbow_3.clone(), theme.rainbow_3.clone()).as_str(); - rainbow_css += format!(".text-rainbow-4 {{ color: {}; }} .bg-rainbow-4 {{ background-color: {}; }} .border-rainbow-4 {{ border-color: {}; }} ", theme.rainbow_4.clone(), theme.rainbow_4.clone(), theme.rainbow_4.clone()).as_str(); - rainbow_css += format!(".text-rainbow-5 {{ color: {}; }} .bg-rainbow-5 {{ background-color: {}; }} .border-rainbow-5 {{ border-color: {}; }} ", theme.rainbow_5.clone(), theme.rainbow_5.clone(), theme.rainbow_5.clone()).as_str(); - rainbow_css += format!(".text-rainbow-6 {{ color: {}; }} .bg-rainbow-6 {{ background-color: {}; }} .border-rainbow-6 {{ border-color: {}; }} ", theme.rainbow_6.clone(), theme.rainbow_6.clone(), theme.rainbow_6.clone()).as_str(); + rainbow_css += format!(".text-rainbow-1 {{ color: {}; }} .bg-rainbow-1 {{ background-color: {}; }} .border-rainbow-1 {{ border-color: {}; }} .fill-rainbow-1 {{ fill: {}: }} ", theme.rainbow_1.clone(), theme.rainbow_1.clone(), theme.rainbow_1.clone(), theme.rainbow_1.clone()).as_str(); + rainbow_css += format!(".text-rainbow-2 {{ color: {}; }} .bg-rainbow-2 {{ background-color: {}; }} .border-rainbow-2 {{ border-color: {}; }} .fill-rainbow-2 {{ fill: {}: }} ", theme.rainbow_2.clone(), theme.rainbow_2.clone(), theme.rainbow_2.clone(), theme.rainbow_2.clone()).as_str(); + rainbow_css += format!(".text-rainbow-3 {{ color: {}; }} .bg-rainbow-3 {{ background-color: {}; }} .border-rainbow-3 {{ border-color: {}; }} .fill-rainbow-3 {{ fill: {}: }} ", theme.rainbow_3.clone(), theme.rainbow_3.clone(), theme.rainbow_3.clone(), theme.rainbow_3.clone()).as_str(); + rainbow_css += format!(".text-rainbow-4 {{ color: {}; }} .bg-rainbow-4 {{ background-color: {}; }} .border-rainbow-4 {{ border-color: {}; }} .fill-rainbow-4 {{ fill: {}: }} ", theme.rainbow_4.clone(), theme.rainbow_4.clone(), theme.rainbow_4.clone(), theme.rainbow_4.clone()).as_str(); + rainbow_css += format!(".text-rainbow-5 {{ color: {}; }} .bg-rainbow-5 {{ background-color: {}; }} .border-rainbow-5 {{ border-color: {}; }} .fill-rainbow-5 {{ fill: {}: }} ", theme.rainbow_5.clone(), theme.rainbow_5.clone(), theme.rainbow_5.clone(), theme.rainbow_5.clone()).as_str(); + rainbow_css += format!(".text-rainbow-6 {{ color: {}; }} .bg-rainbow-6 {{ background-color: {}; }} .border-rainbow-6 {{ border-color: {}; }} .fill-rainbow-6 {{ fill: {}: }} ", theme.rainbow_6.clone(), theme.rainbow_6.clone(), theme.rainbow_6.clone(), theme.rainbow_6.clone()).as_str(); let mut foreground_css = "".to_owned(); foreground_css += format!(".text-foreground-primary {{ color: {}; }} .bg-foreground-primary {{ background-color: {}; }} .border-foreground-primary {{ border-color: {}; }} .fill-foreground-primary {{ fill: {}; }} ", theme.foreground_primary.clone(), theme.foreground_primary.clone(), theme.foreground_primary.clone(), theme.foreground_primary.clone()).as_str(); - foreground_css += format!(".text-foreground-secondary {{ color: {}; }} .bg-foreground-secondary {{ background-color: {}; }} .border-foreground-secondary {{ border-color: {}; }} ", theme.foreground_secondary.clone(), theme.foreground_secondary.clone(), theme.foreground_secondary.clone()).as_str(); - foreground_css += format!(".text-foreground-tertiary {{ color: {}; }} .bg-foreground-tertiary {{ background-color: {}; }} .border-foreground-tertiary {{ border-color: {}; }} ", theme.foreground_tertiary.clone(), theme.foreground_tertiary.clone(), theme.foreground_tertiary.clone()).as_str(); + foreground_css += format!(".text-foreground-secondary {{ color: {}; }} .bg-foreground-secondary {{ background-color: {}; }} .border-foreground-secondary {{ border-color: {}; }} .fill-foreground-secondary {{ fill: {}; }} ", theme.foreground_secondary.clone(), theme.foreground_secondary.clone(), theme.foreground_secondary.clone(), theme.foreground_secondary.clone()).as_str(); + foreground_css += format!(".text-foreground-tertiary {{ color: {}; }} .bg-foreground-tertiary {{ background-color: {}; }} .border-foreground-tertiary {{ border-color: {}; }} .fill-foreground-tertiary {{ fill: {}; }} ", theme.foreground_tertiary.clone(), theme.foreground_tertiary.clone(), theme.foreground_tertiary.clone(), theme.foreground_tertiary.clone()).as_str(); let mut background_css = "".to_owned(); - background_css += format!(".text-background-primary {{ color: {}; }} .bg-background-primary {{ background-color: {}; }} .border-background-primary {{ border-color: {}; }} ", theme.background_primary.clone(), theme.background_primary.clone(), theme.background_primary.clone()).as_str(); - background_css += format!(".text-background-secondary {{ color: {}; }} .bg-background-secondary {{ background-color: {}; }} .border-background-secondary {{ border-color: {}; }} ", theme.background_secondary.clone(), theme.background_secondary.clone(), theme.background_secondary.clone()).as_str(); - background_css += format!(".text-background-tertiary {{ color: {}; }} .bg-background-tertiary {{ background-color: {}; }} .border-background-tertiary {{ border-color: {}; }} ", theme.background_tertiary.clone(), theme.background_tertiary.clone(), theme.background_tertiary.clone()).as_str(); + background_css += format!(".text-background-primary {{ color: {}; }} .bg-background-primary {{ background-color: {}; }} .border-background-primary {{ border-color: {}; }} .fill-background-primary {{ fill: {}; }} ", theme.background_primary.clone(), theme.background_primary.clone(), theme.background_primary.clone(), theme.background_primary.clone()).as_str(); + background_css += format!(".text-background-secondary {{ color: {}; }} .bg-background-secondary {{ background-color: {}; }} .border-background-secondary {{ border-color: {}; }} .fill-background-secondary {{ fill: {}; }} ", theme.background_secondary.clone(), theme.background_secondary.clone(), theme.background_secondary.clone(), theme.background_secondary.clone()).as_str(); + background_css += format!(".text-background-tertiary {{ color: {}; }} .bg-background-tertiary {{ background-color: {}; }} .border-background-tertiary {{ border-color: {}; }} .fill-background-tertiary {{ fill: {}; }} ", theme.background_tertiary.clone(), theme.background_tertiary.clone(), theme.background_tertiary.clone(), theme.background_tertiary.clone()).as_str(); let mut other_css = "".to_owned(); other_css += format!(".text-other-primary {{ color: {}; }} .bg-other-primary {{ background-color: {}; }} .border-other-primary {{ border-color: {}; }} ", theme.other_primary.clone(), theme.other_primary.clone(), theme.other_primary.clone()).as_str(); @@ -53,7 +53,7 @@ fn App() -> Html { let html_body_css = format!( r#" html, body {{ - font-family: 'Poppins', sans-serif; + font-family: 'Lexend Deca', sans-serif; padding: 0; margin: 0; display: flex; diff --git a/src/pages/home.rs b/src/pages/home.rs index 89772fe..4d609c9 100644 --- a/src/pages/home.rs +++ b/src/pages/home.rs @@ -1,5 +1,6 @@ use std::borrow::Cow; +use stylist::style; use stylist::yew::styled_component; use yew::prelude::*; @@ -128,33 +129,63 @@ pub fn Home() -> Html { "flex flex-col justify-center items-center py-8 px-4 xl:px-0 mx-0 xl:mx-auto max-w-7xl", ); let section_title_css = String::from( - "inline-block px-6 py-4 w-min font-bold text-xl whitespace-nowrap border border-solid", + "inline-block px-6 py-4 w-min font-extrabold text-4xl whitespace-nowrap underline", ); + let tilmohr_fontsize_css = style!( + r#" + font-size: 18vw; + + @media (min-width: 1280px) { + font-size: 15em; + } + + @media (max-width: 350px) { + font-size: 16vw; + } + "# + ) + .unwrap(); + html! {
/* Intro */ -
-
-
-
- +
+
+ {"TIL MOHR"} +
+ +
+
+
+ + + {"me@tilmohr.com"} + + + + {"CodingTil"} + + + + {"tilmohr"} +
-
-
- - - {"me@tilmohr.com"} - - - - {"CodingTil"} - - - - {"tilmohr"} - -
+
+
+
+
@@ -164,7 +195,7 @@ pub fn Home() -> Html {
- { translation.projects.clone() } + { translation.projects.to_uppercase().clone() }
{ diff --git a/src/theme.rs b/src/theme.rs index a676fdf..73acc5f 100644 --- a/src/theme.rs +++ b/src/theme.rs @@ -11,38 +11,20 @@ use std::default::Default; pub(crate) enum ThemeKind { #[default] Dark, - Light, } impl ImplicitClone for ThemeKind {} impl ThemeKind { pub fn current(&self) -> &Theme { - static LIGHT_THEME: Lazy = Lazy::new(|| Theme { - background_primary: "#FFFFFF".to_string(), - background_secondary: "#F0F4F8".to_string(), - background_tertiary: "#E2ECF3".to_string(), - - foreground_primary: "#0D2438".to_string(), - foreground_secondary: "#1E3951".to_string(), - foreground_tertiary: "#5B7387".to_string(), - - other_primary: "#076548".to_string(), - other_secondary: "#07966B".to_string(), - other_tertiary: "#16C99B".to_string(), - other_quaternary: "#7AEDC9".to_string(), - - ..Default::default() - }); - static DARK_THEME: Lazy = Lazy::new(|| Theme { - background_primary: "#0D2438".to_string(), - background_secondary: "#102C44".to_string(), - background_tertiary: "#1E3951".to_string(), + background_primary: "#2e3440".to_string(), + background_secondary: "#242933".to_string(), + background_tertiary: "#3B4252".to_string(), - foreground_primary: "#fafdff".to_string(), - foreground_secondary: "#cfe3f8".to_string(), - foreground_tertiary: "#bdc1c5".to_string(), + foreground_primary: "#ECEFF4".to_string(), + foreground_secondary: "#E5E9f0".to_string(), + foreground_tertiary: "#D8DEE9".to_string(), other_primary: "#065f46".to_string(), other_secondary: "#059669".to_string(), @@ -54,7 +36,6 @@ impl ThemeKind { match self { ThemeKind::Dark => &DARK_THEME, - ThemeKind::Light => &LIGHT_THEME, } } } @@ -90,12 +71,18 @@ pub(crate) struct Theme { impl Default for Theme { fn default() -> Theme { Theme { - rainbow_1: "#5197E8".to_string(), + /*rainbow_1: "#5197E8".to_string(), rainbow_2: "#50E3C2".to_string(), rainbow_3: "#F5A623".to_string(), rainbow_4: "#F8E71C".to_string(), rainbow_5: "#DB2FFF".to_string(), - rainbow_6: "#FF5757".to_string(), + rainbow_6: "#FF5757".to_string(),*/ + rainbow_1: "#8fbcbb".to_string(), + rainbow_2: "#88c0d0".to_string(), + rainbow_3: "#81a1c1".to_string(), + rainbow_4: "#5e81ac".to_string(), + rainbow_5: "#b48ead".to_string(), + rainbow_6: "#d08770".to_string(), color_error: "#F44336".to_string(), color_success: "#00C853".to_string(),