diff --git a/src/view/mod.rs b/src/view/mod.rs index bc6e586..42c77ca 100644 --- a/src/view/mod.rs +++ b/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" } + } + } + } + } +} diff --git a/tailwind.config.js b/tailwind.config.js index ebd6350..8575961 100644 --- a/tailwind.config.js +++ b/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",