about: add about page and I did smth else but I can't remember

src/main.rs

@@ -2,7 +2,7 @@ use std::sync::Arc;
 
 use agahnim_web_v2::{
     domain::AppState,
-    templates::{home::home, music::music, notfound::notfound},
+    templates::{about::about, home::home, music::music, notfound::notfound},
 };
 use axum::{Router, routing::get};
 use tower_http::services::ServeDir;
@@ -16,6 +16,7 @@ async fn main() {
     let app = Router::new()
         .route("/home", get(home))
         .route("/music", get(music))
+        .route("/about", get(about))
         .nest_service("/static", ServeDir::new("static"))
         .fallback(notfound)
         .with_state(state);

src/templates/about.rs

@@ -0,0 +1,33 @@
+use askama::Template;
+use axum::{
+    extract::State,
+    http::HeaderMap,
+    response::{Html, IntoResponse},
+};
+use std::sync::Arc;
+
+use crate::domain::AppState;
+
+#[derive(Template)]
+#[template(path = "about.html")]
+struct AboutTemplate<'a> {
+    tracks: &'a Vec<crate::domain::Track>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/about.html")]
+struct AboutPartialTemplate {}
+
+pub async fn about(headers: HeaderMap, state: State<Arc<AppState>>) -> impl IntoResponse {
+    if headers.contains_key("hx-request") {
+        Html(AboutPartialTemplate {}.render().unwrap())
+    } else {
+        Html(
+            AboutTemplate {
+                tracks: &state.mp_tracks,
+            }
+            .render()
+            .unwrap(),
+        )
+    }
+}

src/templates/mod.rs

@@ -1,3 +1,4 @@
+pub mod about;
 pub mod home;
 pub mod music;
 pub mod notfound;

static/style.css

@@ -217,8 +217,8 @@ table {
 }
 
 body {
-  background-size: cover;
   background-position: center;
+  background-size: auto;
   min-height: 100lvh;
   width: 100lvw;
   overflow: auto;
@@ -231,7 +231,6 @@ body {
 
   &:has(#content music) {
     background-image: url(assets/gifs/hmmmbg.gif);
-    background-size: auto;
   }
 
   &:has(#content katcenkat) {
@@ -687,7 +686,7 @@ music {
     z-index: -1;
     pointer-events: none;
     font-size: 10rem;
-    animation: fadeInNOut 10s infinite;
+    animation: fadeInNOut 5s infinite;
 
     vertical-marquee-inner {
       position: absolute;

templates/about.html

@@ -0,0 +1,3 @@
+{% extends "base.html" %} {% block content %} {% include "partials/about.html" %}
+{% endblock %} {% block miniplayer %} {% include "partials/miniplayer.html" %}
+{% endblock %}

templates/partials/about.html

@@ -0,0 +1,3 @@
+<about>
+  <p>a</p>
+</about>

templates/partials/music.html

@@ -1,9 +1,10 @@
 <music>
-  <vertical-marquee id="bg-text"></vertical-marquee>
+  <vertical-marquee id="bg-text" aria-hidden="true"></vertical-marquee>
   <cute-container>
     <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
   </cute-container>
 </music>
+<!-- Wall of text go!! -->
 <script>
   (function () {
     const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -17,23 +18,14 @@
       const cols = Math.ceil(window.innerWidth / colWidth);
       const rows = Math.ceil(window.innerHeight / rowHeight);
       for (let c = 0; c < cols; c++) {
-        const col = document.createElement("vertical-marquee-inner");
-        col.style.left = c * colWidth + "px";
-        for (let r = 0; r < rows; r++) {
+        const col = document.createElement("vertical-marquee-inner"); col.style.left = c *
+          colWidth + "px"; for (let r = 0; r < rows; r++) {
             const span = document.createElement("text");
-          span.textContent = chars[Math.floor(Math.random() * chars.length)];
-          col.appendChild(span);
+            span.textContent = chars[Math.floor(Math.random() * chars.length)]; col.appendChild(span);
+          } container.appendChild(col);
       }
-        container.appendChild(col);
-      }
-    }
-
-    let resizeTimer;
-    window.addEventListener("resize", function () {
+    } let resizeTimer; window.addEventListener("resize", function () {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(build, 150);
-    });
-
-    build();
-  })();
-</script>
+    }); build();
+  })(); </script>