Compare commits

..

No commits in common. "fe40a3ba21bc151d27472908e483de7dbfb125bc" and "3e56fd875e5d6527b57288102798ecfbca078aac" have entirely different histories.

3 changed files with 20 additions and 34 deletions

View File

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

View File

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

View File

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