Switch over to WebAssembly, Rust and Yew #35
@ -26,7 +26,13 @@ pub fn post_content<S: PartialEq>(props: &PostContentProps<S>) -> Html {
|
|||||||
|
|
||||||
html! {
|
html! {
|
||||||
<article>
|
<article>
|
||||||
<header class="bg-[50%] bg-no-repeat bg-cover bg-fixed pt-20" {style}>
|
<header class="hidden print:block container print:max-w-full mx-auto">
|
||||||
|
<h1 class="text-3xl font-bold">
|
||||||
|
{ &props.details.summary.title }
|
||||||
|
</h1>
|
||||||
|
{post_card_details(true, &props.details, &tags)}
|
||||||
|
</header>
|
||||||
|
<header class="print:hidden bg-[50%] bg-no-repeat bg-cover bg-fixed pt-20" {style}>
|
||||||
<div class="container mx-auto flex flex-col items-center">
|
<div class="container mx-auto flex flex-col items-center">
|
||||||
<h1 class="text-5xl font-bold text-white">
|
<h1 class="text-5xl font-bold text-white">
|
||||||
{ &props.details.summary.title }
|
{ &props.details.summary.title }
|
||||||
@ -41,7 +47,7 @@ pub fn post_content<S: PartialEq>(props: &PostContentProps<S>) -> Html {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="container mx-auto mt-12 mb-20 px-16 markdown">
|
<div class="container mx-auto mt-12 mb-20 px-16 print:px-0 print:max-w-full markdown">
|
||||||
{
|
{
|
||||||
props.content.iter().map(|node| html! {
|
props.content.iter().map(|node| html! {
|
||||||
<Render node={node.clone()} />
|
<Render node={node.clone()} />
|
||||||
|
@ -12,7 +12,7 @@ pub fn footer(_: &FooterProps) -> Html {
|
|||||||
let year = OffsetDateTime::now_utc().year();
|
let year = OffsetDateTime::now_utc().year();
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<footer class="bg-primary text-neutral-400 text-sm mt-4 min-h-[10rem]">
|
<footer class="print:hidden bg-primary text-neutral-400 text-sm mt-4 min-h-[10rem]">
|
||||||
<div class="container mx-auto flex flex-col gap-4 md:gap-0 md:flex-row md:justify-between px-4 sm:px-0 py-6">
|
<div class="container mx-auto flex flex-col gap-4 md:gap-0 md:flex-row md:justify-between px-4 sm:px-0 py-6">
|
||||||
<div>
|
<div>
|
||||||
{format!("Blake Rain © {year}")}
|
{format!("Blake Rain © {year}")}
|
||||||
|
@ -24,6 +24,7 @@ pub fn goto_top() -> Html {
|
|||||||
"transition-all",
|
"transition-all",
|
||||||
"transition-200",
|
"transition-200",
|
||||||
if visible { "block" } else { "hidden" },
|
if visible { "block" } else { "hidden" },
|
||||||
|
"print:hidden",
|
||||||
);
|
);
|
||||||
|
|
||||||
let style = if *footer_visible {
|
let style = if *footer_visible {
|
||||||
|
@ -32,7 +32,7 @@ pub fn navigation(_: &NavigationProps) -> Html {
|
|||||||
};
|
};
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<nav class="bg-primary shadow-md text-neutral-200">
|
<nav class="print:hidden bg-primary shadow-md text-neutral-200">
|
||||||
<div class="container mx-auto flex flex-col md:flex-row px-4 sm:px-0">
|
<div class="container mx-auto flex flex-col md:flex-row px-4 sm:px-0">
|
||||||
<div class="flex flex-row justify-between items-center my-4 md:my-0">
|
<div class="flex flex-row justify-between items-center my-4 md:my-0">
|
||||||
<Link<Route> classes="block mr-4" to={Route::Home}>
|
<Link<Route> classes="block mr-4" to={Route::Home}>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
.markdown {
|
.markdown {
|
||||||
@apply flex flex-col;
|
@apply flex flex-col;
|
||||||
@apply font-text text-xl;
|
@apply font-text text-xl print:text-base;
|
||||||
@apply text-neutral-800 dark:text-neutral-300;
|
@apply text-neutral-800 dark:text-neutral-300;
|
||||||
|
|
||||||
counter-reset: h1-outline-counter;
|
counter-reset: h1-outline-counter;
|
||||||
@ -109,7 +109,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-5xl font-bold mt-8 mb-4;
|
@apply text-5xl print:text-3xl font-bold mt-8 mb-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@ -186,6 +186,7 @@
|
|||||||
|
|
||||||
pre {
|
pre {
|
||||||
@apply w-full bg-neutral-100 dark:bg-neutral-800 rounded-md p-4 overflow-x-scroll;
|
@apply w-full bg-neutral-100 dark:bg-neutral-800 rounded-md p-4 overflow-x-scroll;
|
||||||
|
@apply print:border-neutral-800 print:p-2;
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@apply font-mono leading-snug;
|
@apply font-mono leading-snug;
|
||||||
@ -290,6 +291,7 @@
|
|||||||
|
|
||||||
.callout {
|
.callout {
|
||||||
@apply flex flex-col gap-2 rounded-md p-4 text-base mb-8;
|
@apply flex flex-col gap-2 rounded-md p-4 text-base mb-8;
|
||||||
|
@apply print:border-2 print:p-2;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply flex flex-row gap-1 font-sans;
|
@apply flex flex-row gap-1 font-sans;
|
||||||
@ -310,7 +312,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.note {
|
&.note {
|
||||||
@apply bg-blue-200 dark:bg-blue-950;
|
@apply bg-blue-200 print:bg-transparent print:border-blue-200 dark:bg-blue-950;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-blue-600 dark:text-blue-500;
|
@apply text-blue-600 dark:text-blue-500;
|
||||||
@ -322,7 +324,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.tip {
|
&.tip {
|
||||||
@apply bg-teal-100 dark:bg-teal-900;
|
@apply bg-teal-100 print:bg-transparent print:border-teal-900 dark:bg-teal-900;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-teal-600 dark:text-teal-300;
|
@apply text-teal-600 dark:text-teal-300;
|
||||||
@ -330,7 +332,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.success {
|
&.success {
|
||||||
@apply bg-green-100 dark:bg-green-900;
|
@apply bg-green-100 print:bg-transparent print:border-green-900 dark:bg-green-900;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-green-600 dark:text-green-400;
|
@apply text-green-600 dark:text-green-400;
|
||||||
@ -338,7 +340,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.question {
|
&.question {
|
||||||
@apply bg-amber-200/10;
|
@apply bg-amber-200/10 print:bg-transparent print:border-amber-500;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-amber-500 dark:text-amber-200;
|
@apply text-amber-500 dark:text-amber-200;
|
||||||
@ -346,7 +348,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
@apply bg-orange-500/10;
|
@apply bg-orange-500/10 print:bg-transparent print:border-orange-500;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-orange-600;
|
@apply text-orange-600;
|
||||||
@ -354,7 +356,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.danger {
|
&.danger {
|
||||||
@apply bg-red-500/25;
|
@apply bg-red-500/25 print:bg-transparent print:border-red-500;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-red-500;
|
@apply text-red-500;
|
||||||
@ -362,7 +364,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.example {
|
&.example {
|
||||||
@apply bg-violet-900/25;
|
@apply bg-violet-900/25 print:bg-transparent print:border-violet-900;
|
||||||
|
|
||||||
> .heading {
|
> .heading {
|
||||||
@apply text-violet-600 dark:text-violet-400;
|
@apply text-violet-600 dark:text-violet-400;
|
||||||
|
Loading…
Reference in New Issue
Block a user