✨♻️💄 app, frontend, README: Update content, theme handling, and styles

- Added `Codeberg` link to contact page in `contact.rs`
- Removed `Auto` theme option and set `Dark` as default in `theme_switcher`
- Updated biography text and link formatting in `HomePage` component
- Simplified theme CSS structure and adjusted color variables in `styles.css`
- Removed outdated SHA256 warning and added `Cargo.toml` note in `README.md`

README.md

@@ -4,8 +4,6 @@ My personal website. Hosted at [mascully.com](https://mascully.com). The current
 
 Built using [Leptos](https://leptos.dev/) with [Axum](https://github.com/tokio-rs/axum).
 
-This repo uses the SHA256 object format so it may be incompatible with a lot of tools. See [here](https://github.com/NixOS/nix/issues/11561) for instructions on using this repo with Nix.
-
 ## Running
 
 ### Nix
@@ -40,6 +38,7 @@ The bind address and port can be modifed in the top-level `Cargo.toml` file unde
 - `crates/frontend`: Images, fonts, CSS.
 - `crates/server`: A minimal Axum server for serving pages.
 - `flake.nix`: This doesn't work; ignore it.
+- `Cargo.toml`: Includes metadata for configuring Leptos.
 
 ## License
 

crates/app/src/contact.rs

@@ -17,6 +17,10 @@ pub fn Contact() -> impl IntoView {
                 <span>"GitHub: "</span>
                 <a href="https://github.com/mascully">"mascully"</a>
             </section>
+            <section>
+                <span>"Codeberg: "</span>
+                <a href="https://codeberg.org/mascully">"mascully"</a>
+            </section>
             <section>
                 <span>"Matrix: "</span>
                 <a href="matrix:u/blue_flycatcher:matrix.org">"@blue_flycatcher:matrix.org"</a>

crates/app/src/lib.rs

@@ -124,6 +124,7 @@ pub fn App() -> impl IntoView {
 #[component]
 fn Root(children: Children) -> impl IntoView {
     view! { <div id="root">{children()}</div> }
+    // view! { {children()} }
 }
 
 #[component]
@@ -134,9 +135,11 @@ fn NotFound() -> impl IntoView {
 #[component]
 fn HomePage() -> impl IntoView {
     view! {
-        <p>"Hi. I'm Markus. I mostly do full stack development with Rust and Nix."</p>
+        <p>"Hi. I'm Markus. I'm a software engineer currently doing mostly full stack development with Rust and Nix."</p>
         <p>
-            "You can check out some of my projects "<A href="/projects">"here"</A>" or on my "<A href="https://git.mascully.com/mascully?tab=repositories">"Git forge"</A>", including the "
+            "You can check out some of my projects "<A href="/projects">"here"</A>" or on my "
+            <A href="https://git.mascully.com/mascully?tab=repositories">"Git forge"</A>
+            ", including the "
             <A href="https://git.mascully.com/mascully/mascully_website">
                 "source code for this website"
             </A>"."

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"
                 </button>
-                <button
-                    class="theme-option"
-                    class:active=move || current_theme.get() == Theme::Auto
-                    on:click=move |_| select_theme(Theme::Auto)
-                >
-                    "Auto"
-                </button>
             </div>
         </div>
     }

crates/frontend/assets/css/styles.css

@@ -23,14 +23,21 @@
 }
 
 :root {
-    --body-bg: oklch(15% 0.02 240); /* darker background */
+    --navbar-opacity: 0.5;
-    --main-bg: oklch(20% 0 0 / 0.7); /* more transparency */
+    --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-color: oklch(70% 0.15 240);
-    --link-hover-color: oklch(80% 0.15 240); /* blue */
+    --link-hover-color: oklch(80% 0.15 240);
-    --border-color: oklch(40% 0 0);
+    --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;
+    --body-bg: oklch(98% 0 0);
-    --navbar-opacity-hover: 1;
+    --main-bg: oklch(100% 0 0 / 0.85);
-    --transition-time: 0.3s;
+    --text-color: oklch(0% 0 0);
-    --body-bg: oklch(98% 0 0); /* white */
+    --link-color: oklch(50% 0.15 240);
-    --main-bg: oklch(100% 0 0 / 0.85); /* white with transparency */
+    --link-hover-color: oklch(60% 0.15 240);
-    --text-color: oklch(0% 0 0); /* black */
+    --border-color: oklch(80% 0 0);
-    --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);
     --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);
+    /*border: 1px solid var(--border-color);*/
-    padding: 2rem;
+    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;