Simple layout for a definition

src/view/mod.rs

@@ -8,6 +8,14 @@ pub fn skeleton(body: Markup) -> Markup {
                 title { "Jerguero" }
                 meta name="viewport" content="width=device-width, initial-scale=1.0";
                 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)
@@ -18,7 +26,7 @@ pub fn skeleton(body: Markup) -> Markup {
 
 fn navbar() -> Markup {
     html! {
-        nav class="navbar gap-1 fixed bottom-0 left-0 w-full border-t border-t-neutral" {
+        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"
@@ -41,7 +49,38 @@ fn navbar() -> Markup {
 pub fn homepage() -> Markup {
     skeleton(html! {
         (navbar())
-        h1 { "Jerguero" }
-        p { "¡Bienvenido a Jerguero!" }
+
+        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,10 +4,39 @@ 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: [
             "light",