Better navigation buttons

src/main.rs

@@ -614,13 +614,10 @@ fn handle_relative_connection(
 
         let html = html! {
             div id="story-container" {
-                div {
+                div class="nav-controls" {
+                    button class="nav-button" onclick="prev()" { "←" }
                     span id="section-counter" { "1/" (sections.len()) }
-                }
+                    button class="nav-button" onclick="next()" { "→" }
-
-                div {
-                    button onclick="prev()" { "Prev" }
-                    button onclick="next()" { "Next" }
                 }
 
                 @for (index, section) in sections.iter().enumerate() {
@@ -630,6 +627,53 @@ fn handle_relative_connection(
                     }
                 }
 
+                style {
+                    (maud::PreEscaped(r"
+                        .nav-controls {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            gap: 1rem;
+                            margin: 2rem 0;
+                            padding: 1rem 0;
+                        }
+
+                        .nav-button {
+                            width: 2.5rem;
+                            height: 2.5rem;
+                            border-radius: 50%;
+                            border: none;
+                            background: #f0f0f0;
+                            cursor: pointer;
+                            font-size: 1.2rem;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            transition: all 0.2s ease;
+                            margin: 0;
+                            padding: 0;
+                        }
+
+                        #section-counter {
+                            font-family: system-ui, sans-serif;
+                            font-size: 0.9rem;
+                            color: #666;
+                            margin: 0 1rem;
+                            padding: 0;
+                            line-height: 1;
+                        }
+
+                        .nav-button:hover {
+                            background: #e0e0e0;
+                            transform: scale(1.1);
+                        }
+
+                        .nav-button:active {
+                            transform: scale(0.95);
+                        }
+                    "))
+                }
+
                 script {
                     (maud::PreEscaped(r"
                         let currentSection = 0;