"Hi. I'm Markus. I mostly do full stack development with Rust and Nix."
+"Hi. I'm Markus. I'm a software engineer currently doing mostly full stack development with Rust and Nix."
- "You can check out some of my projects ""here"" or on my ""Git forge"", including the " + "You can check out some of my projects ""here"" or on my " + "Git forge" + ", including the " "source code for this website" "." diff --git a/crates/app/src/theme_switcher.rs b/crates/app/src/theme_switcher.rs index 2d4ae53..b1a16ca 100644 --- a/crates/app/src/theme_switcher.rs +++ b/crates/app/src/theme_switcher.rs @@ -15,7 +15,6 @@ use crate::command_line::CommandLine; pub enum Theme { Light, Dark, - Auto, } impl Theme { @@ -23,7 +22,6 @@ impl Theme { match self { Theme::Light => "light", Theme::Dark => "dark", - Theme::Auto => "auto", } } @@ -31,7 +29,7 @@ impl Theme { match s { "light" => Theme::Light, "dark" => Theme::Dark, - _ => Theme::Auto, + _ => unreachable!() } } } @@ -44,12 +42,12 @@ fn get_stored_theme() -> Theme { { return Theme::from_str(&theme_str); } - Theme::Auto + Theme::Dark } #[cfg(not(feature = "hydrate"))] fn get_stored_theme() -> Theme { - Theme::Auto + Theme::Dark } #[cfg(feature = "hydrate")] @@ -81,7 +79,7 @@ fn apply_theme(theme: Theme) { Theme::Dark => { let _ = class_list.add_1("dark"); } - Theme::Auto => {} + Theme::Dark => {} } } } @@ -93,7 +91,7 @@ fn apply_theme(_theme: Theme) { #[component] pub fn ThemeSwitcher() -> impl IntoView { - let (current_theme, set_current_theme) = signal(Theme::Auto); + let (current_theme, set_current_theme) = signal(Theme::Dark); let (dropdown_open, set_dropdown_open) = signal(false); // Load theme from localStorage and apply it on client side only @@ -129,7 +127,6 @@ pub fn ThemeSwitcher() -> impl IntoView { let theme_icon = move || match current_theme.get() { Theme::Light => "☀️", Theme::Dark => "🌙", - Theme::Auto => "🌓", }; view! { @@ -152,13 +149,6 @@ pub fn ThemeSwitcher() -> impl IntoView { > "Dark" - } diff --git a/crates/frontend/assets/css/styles.css b/crates/frontend/assets/css/styles.css index a2ca3d7..6cd5aba 100644 --- a/crates/frontend/assets/css/styles.css +++ b/crates/frontend/assets/css/styles.css @@ -23,14 +23,21 @@ } :root { - --body-bg: oklch(15% 0.02 240); /* darker background */ - --main-bg: oklch(20% 0 0 / 0.7); /* more transparency */ + --navbar-opacity: 0.5; + --navbar-opacity-hover: 1; + --transition-time: 0.3s; +} + +:root, +:root.dark { + --body-bg: oklch(0.26 0.006 286); + --main-bg: oklch(0.26 0.006 286); --text-color: oklch(80% 0 0); - --link-color: oklch(70% 0.15 240); /* lighter blue for links */ - --link-hover-color: oklch(80% 0.15 240); /* blue */ - --border-color: oklch(40% 0 0); + --link-color: oklch(70% 0.15 240); + --link-hover-color: oklch(80% 0.15 240); + --border-color: oklch(25% 0 0); --post-description-color: oklch(60% 0 0); - --header-bg: oklch(15% 0.02 240); /* same as body background */ + --header-bg: oklch(0.24 0.008 285); --input-bg: oklch(25% 0 0); --button-bg: oklch(30% 0 0); --button-hover-bg: oklch(35% 0 0); @@ -39,22 +46,19 @@ } :root.light { - --navbar-opacity: 0.5; - --navbar-opacity-hover: 1; - --transition-time: 0.3s; - --body-bg: oklch(98% 0 0); /* white */ - --main-bg: oklch(100% 0 0 / 0.85); /* white with transparency */ - --text-color: oklch(0% 0 0); /* black */ - --link-color: oklch(50% 0.15 240); /* blue for links */ - --link-hover-color: oklch(60% 0.15 240); /* blue */ - --border-color: oklch(90% 0 0); + --body-bg: oklch(98% 0 0); + --main-bg: oklch(100% 0 0 / 0.85); + --text-color: oklch(0% 0 0); + --link-color: oklch(50% 0.15 240); + --link-hover-color: oklch(60% 0.15 240); + --border-color: oklch(80% 0 0); --post-description-color: oklch(60% 0 0); - --header-bg: oklch(98% 0 0); /* same as body background */ + --header-bg: oklch(98% 0 0); --input-bg: oklch(95% 0 0); --button-bg: oklch(90% 0 0); --button-hover-bg: oklch(85% 0 0); --bg-tile: url("/tile_1_light.png"); - --bg-color: oklch(100% 0 0); /* white background */ + --bg-color: oklch(100% 0 0); } * { @@ -65,7 +69,6 @@ body { background-color: var(--body-bg); - background-image: var(--bg-tile); background-repeat: repeat; color: var(--text-color); display: grid; @@ -151,10 +154,17 @@ a:hover { main { position: relative; z-index: 0; - background-color: var(--main-bg); + /*background-color: var(--main-bg);*/ backdrop-filter: blur(10px); - border: 1px solid var(--border-color); - padding: 2rem; + /*border: 1px solid var(--border-color);*/ + padding: 0rem 2rem; +} + +main { + & > h1, + & > h2 { + padding-bottom: 2rem; + } } h1, @@ -241,7 +251,6 @@ h6 { padding-bottom: 0.5rem; } -/* Header styling */ .site-header { position: relative; z-index: 1; @@ -251,7 +260,7 @@ h6 { padding: 1rem 2rem; background-color: var(--header-bg); backdrop-filter: blur(10px); - border-bottom: 1px solid var(--border-color); + border-bottom: 0.1rem solid var(--border-color); width: 100%; } @@ -268,7 +277,7 @@ h6 { .terminal-input::placeholder { color: var(--post-description-color); -} +} .theme-switcher { position: relative;