small ui changes

src/view/mod.rs

@@ -16,10 +16,10 @@ pub fn skeleton(body: Markup) -> Markup {
                 link rel="stylesheet"
                     type="text/css"
                     href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css";
-                // Google fonts: Playfair Display
+                // Radio Canada Big
                 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";
+                link href="https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet";
                 // hyperscript
                 script src="https://unpkg.com/hyperscript.org@0.9.12" defer {}
             }
@@ -41,7 +41,7 @@ fn navbar() -> Markup {
             div class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary" {
                 div class="table" {
                     a href="/" class="table-cell align-middle h-14 text-center" {
-                        (bird("var(--c-on-bg)".into(), 36))
+                        (bird("white".into(), 36))
                     }
                 }
                 div class="relative" {
@@ -59,11 +59,11 @@ fn navbar() -> Markup {
                             "
                         type="text"
                         placeholder="Buscá una palabra"
-                        class="w-full md:w-auto py-2 px-1 rounded-md my-2 bg-white text-black";
+                        class="w-full py-2 px-1 rounded-md my-2 bg-white text-black";
                 }
                 div class="table" {
                     button class="table-cell align-middle h-14 text-center w-full" {
-                        (magnifying_glass("var(--c-on-bg)".into(), 36))
+                        (magnifying_glass("white".into(), 36))
                     }
                 }
             }
@@ -99,26 +99,24 @@ pub fn homepage() -> Markup {
 
 fn post() -> Markup {
     html! {
-        article class="card card-compact shadow-md my-2 border border-[rgba(150,150,150,0.25)]" {
+        article class="bg-c-bg-2 shadow-md my-2 rounded-md py-2 px-4" {
             div class="card-body" {
                 div class="grid grid-cols-[auto_4rem]" {
-                    a href="#" class="text-blue-600 font-serif font-black hover:underline" {
+                    a href="#" class="text-c-primary text-2xl font-black hover:underline pt-2 pb-2" {
                         h2 class="card-title" {
-                            "Pololo/a "
+                            "Pedro pedro pedro"
                         }
                     }
-                    div class="inline-block text-right text-xl" {
+                    div class="flex justify-end items-center text-right text-xl" {
-                        span title="Controversial" {"🔥"}
+                        span title="Utilizado en Argentina" {"🇦🇷"}
-                        " "
-                        span title="Utilizado en Chile" {"🇨🇱"}
                     }
                 }
-                div {
+                div class="pb-2" {
-                    div class="badge badge-ghost text-xs hover:bg-neutral hover:text-neutral-content cursor-pointer" {"Amor"}
+                    (badge("Amor".into()))
-                    div class="badge badge-ghost text-xs hover:bg-neutral hover:text-neutral-content cursor-pointer" {"Relaciones"}
+                    (badge("Relaciones".into()))
                 }
                 p {
-                    "Otra palabra para decir enamorado/a"
+                    "Pedro pe"
                 }
                 br;
                 div class="grid grid-cols-[auto_3.25rem]" {
@@ -137,3 +135,11 @@ fn post() -> Markup {
         }
     }
 }
+
+pub fn badge(text: String) -> Markup {
+    html! {
+        button class="inline-block mr-2 py-1 px-2 text-xs rounded-full hover:underline bg-[#082f49] cursor-pointer" {
+            (text)
+        }
+    }
+}

static/tailwind.css

@@ -9,18 +9,24 @@
 }
 
 :root {
-    --c-bg: white;
+    --c-bg: #ecfeff;
     --c-on-bg: black;
+
+    --c-bg-2: white;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --c-bg: #0e1419;
+        --c-bg: #0a0a0a;
         --c-on-bg: white;
+
+        --c-bg-2: #051c2c;
     }
 }
 
 html {
     background-color: var(--c-bg);
     color: var(--c-on-bg);
+    font-family: "Radio Canada Big", sans-serif;
+    font-optical-sizing: auto;
 }

tailwind.config.js

@@ -10,12 +10,14 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
-                'serif': ["'Playfair Display'", "serif"],
+                'serif': ["serif"],
             },
             colors: {
                 "c-primary": "var(--c-primary)",
                 "c-bg": "var(--c-bg)",
+                "c-bg-2": "var(--c-bg-2)",
                 "c-on-bg": "var(--c-on-bg)",
+                "c-primary": "var(--c-primary)",
             },
         },
     },