mobile responsiveness

src/web/components/nav.rs

@@ -15,17 +15,17 @@ const LINKS: &[(&str, &str, &str)] = &[
 pub fn nav(user: Option<User>, uri: &str) -> Markup {
     html!(
         div class="flex items-center text-sm gap-4 border-b border-neutral-200/25 bg-neutral-200/5 px-4 py-2" {
-            a href="/dashboard" class="font-lora font-semibold text-xl mr-2" {"Mnemosyne"}
+            a href="/dashboard" class="font-lora font-semibold hidden xs:block md:text-xl sm:mr-2" {"Mnemosyne"}
-            div class="w-px h-5 bg-neutral-200/15" {}
+            div class="w-px h-5 bg-neutral-200/15 hidden sm:block" {}
             div class="flex flex-row" {
                 @for link in LINKS {
                     a href={(link.1)} class="flex flex-row px-2 py-1 rounded items-center gap-2 hover:bg-neutral-200/5 border border-transparent hover:border-neutral-200/25" {
                         @if uri.starts_with(link.1) {
                             div class="scale-[.75] text-neutral-300" {(PreEscaped(link.2))}
-                            span class="text-neutral-200 font-light" { (link.0) }
+                            span class="text-neutral-200 font-light hidden lg:block" { (link.0) }
                         } @else {
                             div class="scale-[.75] text-neutral-500" {(PreEscaped(link.2))}
-                            span class="text-neutral-400 font-light" { (link.0) }
+                            span class="text-neutral-400 font-light hidden lg:block" { (link.0) }
                         }
                     }
                 }
@@ -35,13 +35,13 @@ pub fn nav(user: Option<User>, uri: &str) -> Markup {
             @if let Some(u) = user {
                 a href="/dashboard" class=r#"ml-auto bg-neutral-200/5 font-lexend flex
                     flex-row items-center border border-neutral-200/25 gap-4 rounded px-2 py-1"# {
-                    (u.handle)
+                    span class="hidden sm:block"{(u.handle)}
                     div class="scale-[.75]" {(PreEscaped(icons::USER))}
                 }
             } @else {
                 a href="/login" class=r#"ml-auto bg-neutral-200/5 font-lexend flex
                     flex-row items-center border border-neutral-200/25 gap-4 rounded px-2 py-1"# {
-                    "Log in"
+                    span class="hidden sm:block"{"Log in"}
                     div class="scale-[.75]" {(PreEscaped(icons::USER_KEY))}
                 }
             }

src/web/input.css

@@ -7,6 +7,8 @@
     --font-lora: "Lora", ui-serif, Georgia, Cambria, "Times New Roman", serif;
     --font-lexend: "Lexend", sans-serif;
 
+    --breakpoint-xs: 30rem;
+
     --animate-marquee: marquee 180s linear infinite;
 }
 

src/web/pages/dashboard.rs

@@ -13,7 +13,7 @@ pub async fn page(req: Request) -> Markup {
         html!(
             (nav(u, req.uri().path()))
 
-            div class="text-8xl text-neutral-800/25 mt-16 text-center font-semibold font-lora select-none" {"Mnemosyne"}
+            div class="text-6xl sm:text-8xl text-neutral-800/25 mt-16 text-center font-semibold font-lora select-none overflow-hidden" {"Mnemosyne"}
         ),
     )
 }

src/web/pages/login.rs

@@ -28,15 +28,17 @@ pub async fn page(Query(q): Query<LoginMsg>, req: Request) -> Result<Response, A
     Ok(base(
         "Log in | Mnemosyne",
         html!(
-            div class="min-h-screen flex flex-col" {
+            div class="min-h-screen flex flex-col items-center overflow-x-hidden" {
-                (marquee(&["the goddess of memory"]))
+                div class="overflow-hidden"{(marquee(&["the goddess of memory"]))}
 
                 div class="mt-24" {}
-                a href="/" class="font-semibold text-6xl mx-auto font-lora hover:underline" {h1 {"Mnemosyne"}}
+                a href="/" class="font-semibold text-4xl sm:text-6xl mx-auto font-lora hover:underline" {h1 {"Mnemosyne"}}
-                p class="text-neutral-500 mt-4 text-sm mx-auto mb-16" {"The goddess of memory holds all the cards."}
+                p class="text-neutral-500 mt-4 hidden sm:block text-sm mx-auto" {"The goddess of memory holds all the cards."}
+                div class="mb-16" {}
 
-                div class="mx-auto bg-neutral-200/5 border border-neutral-200/25 p-4 rounded" {
+                div class="bg-neutral-200/5 w-4/5 mx-2 sm:mx-0 sm:w-fit border border-neutral-200/25 p-4 rounded" {
-                    p class="text-neutral-500" {"Part of the olympic pack already? Log in here."}
+                    p class="text-neutral-500 hidden sm:block" {"Part of the olympic pack already? Log in here."}
+                    p class="block sm:hidden px-2 w-full text-center text-neutral-500" {"Log in here, olympian."}
 
                     form id="login-form" method="post" action="/api/auth/login-form" class="mt-8 font-light flex flex-col"  {
                         label for="handle" class="text-neutral-500" {"Handle"}
@@ -102,7 +104,7 @@ pub async fn page(Query(q): Query<LoginMsg>, req: Request) -> Result<Response, A
                 }
 
                 div class="mt-auto" {}
-                (marquee(&[REFERENCE_SPLASHES.choose(&mut rand::rng()).unwrap()]))
+                div class="overflow-hidden"{(marquee(&[REFERENCE_SPLASHES.choose(&mut rand::rng()).unwrap()]))}
             }
         ),
     ).into_response())