Simple layout for a definition

FEATURES.md

@@ -0,0 +1,13 @@
+
+# Sessions
+
+- 2FA registration
+- Login
+
+# Accounts
+
+- username
+- Names
+- Surnames
+- Country
+

README.md

@@ -0,0 +1,5 @@
+# Jerguero
+
+An Urban Dictionary clone, but in spanish and with more features.
+
+Written fully in Rust & HTMX.

src/controller/mod.rs

@@ -0,0 +1,6 @@
+use maud::Markup;
+
+#[get("/")]
+pub fn homepage() -> Markup {
+    crate::view::homepage()
+}

src/main.rs

@@ -1,59 +1,15 @@
 #[macro_use]
 extern crate rocket;
 
+mod controller;
 mod view;
 
 use maud::{html, Markup};
 use rocket::fs::{relative, FileServer};
 
-#[get("/")]
-fn index() -> Markup {
-    view::skeleton(html! {
-        h1 class="font-bold text-4xl text-center text-primary"
-        {
-            "Sistema EEGSAC"
-        }
-        br;
-        form action="/login" method="post" {
-            label class="form-control w-full max-w-xs"
-            {
-                div class="label"
-                {
-                    span class="label-text"
-                    {
-                        "Usuario"
-                    }
-                }
-                input type="text"
-                    placeholder="Usuario"
-                    required
-                    class="input input-bordered input-primary w-full max-w-xs";
-            }
-            label class="form-control w-full max-w-xs"
-            {
-                div class="label"
-                {
-                    span class="label-text"
-                    {
-                        "Contraseña"
-                    }
-                }
-                input type="password"
-                    placeholder="Contraseña"
-                    required
-                    class="input input-bordered input-primary w-full max-w-xs";
-            }
-            button class="btn btn-primary"
-            {
-                "Iniciar sesión"
-            }
-        }
-    })
-}
-
 #[launch]
 fn rocket() -> _ {
     rocket::build()
-        .mount("/", routes![index])
+        .mount("/", routes![controller::homepage])
         .mount("/static", FileServer::from(relative!("static")))
 }

src/view/mod.rs

@@ -3,11 +3,19 @@ use maud::{html, Markup, DOCTYPE};
 pub fn skeleton(body: Markup) -> Markup {
     html! {
         (DOCTYPE)
-        html lang="es" data-theme="dracula" {
+        html lang="es" data-theme="cupcake" {
             head {
-                title { "Sistema :D" }
+                title { "Jerguero" }
                 meta name="viewport" content="width=device-width, initial-scale=1.0";
-                link rel="stylesheet" type="text/css" href="/static/styles.css";
+                link rel="stylesheet" type="text/css" href="/static/out.css";
+                // Phosphor icons
+                link rel="stylesheet"
+                    type="text/css"
+                    href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css";
+                // Google fonts: Playfair Display and Inter
+                link rel="preconnect" href="https://fonts.googleapis.com";
+                link rel="preconnect" href="https://fonts.gstatic.com" crossorigin;
+                link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet";
             }
             body {
                 (body)
@@ -15,3 +23,64 @@ pub fn skeleton(body: Markup) -> Markup {
         }
     }
 }
+
+fn navbar() -> Markup {
+    html! {
+        nav class="navbar gap-1 fixed z-50 bottom-0 left-0 w-full border-t border-[rgba(150,150,150,0.5)] bg-base-200 text-base-content" {
+            div class="flex-none" {
+                a class="btn btn-ghost text-xl" {
+                    "J"
+                }
+            }
+            div class="flex-1" {   
+                div class="form-control" {
+                    input type="text" placeholder="Search" class="input input-bordered w-full md:w-auto";
+                }
+            }
+            div class="flex-none" {
+                a class="btn btn-ghost text-xl" {
+                    "s"
+                }
+            }
+        }
+    }
+}
+
+pub fn homepage() -> Markup {
+    skeleton(html! {
+        (navbar())
+
+        div class="container" {
+            div class="bg-accent text-accent-content py-2 m-1 rounded-md text-center font-bold text-lg" {
+                "Jerguero"
+            }
+            (post())
+            (post())
+            (post())
+            (post())
+        }
+    })
+}
+
+fn post() -> Markup {
+    html! {
+        article class="card card-compact shadow-md my-2 border border-[rgba(150,150,150,0.25)]" {
+            div class="card-body" {
+                a href="#" class="text-blue-600 font-serif font-black" {
+                    h2 class="card-title" {
+                        "Take the L"
+                    }
+                }
+                p {
+                    "Stands for \"Take the loss\". Frequently used to describe flunking a test, being dumped, being stood up, being beaten up or robbed, or losing one's money in the stock market, gambling, or through exploitative business schemes."
+                }
+                br;
+                div class="opacity-80 text-sm" {
+                    a href="#" class="inline-block underline font-serif font-semibold" { "Pablito" }
+                    " · "
+                    span { "05/12/2022" }
+                }
+            }
+        }
+    }
+}

tailwind.config.js

@@ -4,11 +4,73 @@ module.exports = {
         "./src/**/*.{rs,html}",
         "./static/**/*.html",
     ],
-    theme: {
-        extend: {},
+    corePlugins: {
+        container: false
     },
-    plugins: [require("daisyui")],
+    theme: {
+        extend: {
+            fontFamily: {
+                'serif': ["'Playfair Display'", "serif"],
+            }
+        },
+    },
+    plugins: [
+        require("daisyui"),
+        function ({ addComponents }) {
+            addComponents({
+                '.container': {
+                    maxWidth: '95%',
+                    margin: "auto",
+                    '@screen sm': {
+                        maxWidth: '640px',
+                    },
+                    '@screen md': {
+                        maxWidth: '768px',
+                    },
+                    '@screen lg': {
+                        maxWidth: '1024px',
+                    },
+                    '@screen xl': {
+                        maxWidth: '1280px',
+                    },
+                }
+            })
+        }
+    ],
     daisyui: {
-        themes: ["retro", "coffee", "dracula"]
+        themes: [
+            "light",
+            "dark",
+            "cupcake",
+            "bumblebee",
+            "emerald",
+            "corporate",
+            "synthwave",
+            "retro",
+            "cyberpunk",
+            "valentine",
+            "halloween",
+            "garden",
+            "forest",
+            "aqua",
+            "lofi",
+            "pastel",
+            "fantasy",
+            "wireframe",
+            "black",
+            "luxury",
+            "dracula",
+            "cmyk",
+            "autumn",
+            "business",
+            "acid",
+            "lemonade",
+            "night",
+            "coffee",
+            "winter",
+            "dim",
+            "nord",
+            "sunset",
+        ]
     }
 }