Skip to content

Commit

Permalink
aesthetics improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@YilunAllenChen
YilunAllenChen committed Nov 1, 2023
1 parent fdc3cae commit 91a51f2
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 35 deletions.
19 changes: 10 additions & 9 deletions src/pages/about.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ impl Component for About {

html! {
<div class="ease-in bg-black h-full">
<figure class="m-4 md:mx-auto md:my-16 md:w-3/4 lg:w-1/2 lg:mx-40 pb-12 bg-slate-200 rounded-xl px-8 bg-slate-800">
<div class="pt-4 md:pt-6text-left divide-y divide-gray-700 space-y-8 md:space-y-12">
<figure class="m-4 md:mx-auto md:my-16 md:w-3/4 lg:w-1/2 pb-12 bg-slate-200 rounded-xl px-8 bg-slate-800">
<div class="pt-4 self-center md:pt-6text-left divide-y divide-gray-700 space-y-8 md:space-y-12">
<div>
<h1 class={title_cls}>{"What is the Museum of Code?"}</h1>
<p class={text_cls}>
Expand Down Expand Up @@ -87,7 +87,7 @@ impl Component for About {
your own code snippets (artifacts) to the museum!
"#
}</p>
<div class="flex">
<div class="flex justify-center">
<a class="inline-flex mt-4 text-center rounded-full bg-emerald-700 px-3.5 py-2.5 text-xs text-white shadow-sm hover:bg-emerald-500"
href="https://github.com/sponsors/YilunAllenChen"
>{"Become a Sponsor!"}</a>
Expand All @@ -112,12 +112,13 @@ impl Component for About {
"#}
</p>
</div>

<button
onclick={nav(Route::Home)}
class="rounded-md mt-10 bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500">
{"Home"}
</button>
<div class="flex justify-end">
<button
onclick={nav(Route::Home)}
class="justify-self-end rounded-md mt-10 bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500">
{"Home"}
</button>
</div>
</div>
</figure>
</div>
Expand Down
45 changes: 26 additions & 19 deletions src/pages/contact.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,34 @@ impl Component for Contact {

html! {
<div class="ease-in bg-black h-full">
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56 bg-opacity-50">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-100 sm:text-4xl">{"Be A Part of MoCo!"}</h1>
<div class="p-2 mt-10 flex flex-col items-center justify-center gap-x-6">
<a class="rounded-md w-1/2 bg-blue-700 px-3.5 py-2.5 text-lg text-white shadow-sm hover:bg-blue-500"
href="mailto:[email protected]"
>{"Email Me"}</a>
<p class="pt-1text-gray-400 text-xs md:text-sm">{"@[email protected]"}</p>
<figure class="m-4 md:mx-auto md:my-16 md:w-3/4 lg:w-1/2 pb-12 bg-slate-200 rounded-xl px-2 md:px-8 bg-slate-800">
<div class="mt-12 pt-16 self-center text-left divide-y divide-gray-500 space-y-8 md:space-y-8">
<p class="text-2xl text-center md:text-4xl font-bold tracking-tight text-gray-100">{"Getting Involved"}</p>
<div class="text-center px-8 divide-y divide-gray-700 space-y-8">
<div class="text-center flex flex-col items-center justify-center gap-x-6">
<p class="pt-1 my-4 text-gray-200 text-xs md:text-sm">{"⚒️ Want to help build the museum? Let's get in touch!"}</p>
<a class="rounded-md w-1/2 bg-blue-700 px-3.5 py-2.5 text-base text-white shadow-sm hover:bg-blue-500"
href="mailto:[email protected]"
>{"Email Us!"}</a>
<p class="pt-1 text-gray-400 text-xs md:text-sm">{"@[email protected]"}</p>
</div>
<div class="flex flex-col items-center justify-center gap-x-6 mb-20">
<p class="pt-1 my-4 text-gray-200 text-xs md:text-sm">{"🤝 Want to put your name/logo in the museum?"}</p>
<a class="rounded-md w-1/2 bg-emerald-700 px-3.5 py-2.5 text-base text-white shadow-sm hover:bg-emerald-500"
href="https://github.com/sponsors/YilunAllenChen"
>{"Sponsor Us!"}</a>
<p class="pt-1 text-gray-400 text-xs md:text-sm">{"via GitHub Sponsor"}</p>
</div>
<div class="flex justify-end md:justify-end">
<button
onclick={nav(Route::Home)}
class="mt-8 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm text-white shadow-sm hover:bg-indigo-500">
{"Go Back"}
</button>
</div>
</div>
<div class="p-2 mt-4 flex items-center justify-center gap-x-6 mb-20">
<a class="rounded-md w-1/2 bg-emerald-700 px-3.5 py-2.5 text-lg text-white shadow-sm hover:bg-emerald-500"
href="https://github.com/sponsors/YilunAllenChen"
>{"Sponsor Us!"}</a>
</div>
<button
onclick={nav(Route::Home)}
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm text-white shadow-sm hover:bg-indigo-500">
{"Go Back"}
</button>
</div>
</div>
</figure>
</div>
}
}
Expand Down
14 changes: 7 additions & 7 deletions src/pages/home.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ impl Component for Home {

html! {
<div class="ease-in bg-black h-full">
<div class="mx-6 sm:mx-10 md:mx-16 lg:mx-36 mt-12 lg:mt-40">
<div class="mx-6 sm:mx-10 md:mx-16 lg:mx-36 mt-24 lg:mt-40">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-wider text-gray-100 sm:text-6xl font-mono">{"Museum of Code"}</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">{"A curated exhibit of exquisite programming artifacts."}</p>
Expand All @@ -43,20 +43,20 @@ impl Component for Home {
class="rounded-md w-full md:w-1/4 bg-indigo-600 my-2.5 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{"Enter the Museum"}
</button>
<button
onclick={nav.clone()(Route::Contact)}
class="rounded-md w-full md:w-1/4 bg-green-600 my-2.5 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{"Help Build the Museum"}
</button>
<button
onclick={nav(Route::About)}
class="rounded-md w-full md:w-1/4 bg-yellow-600 my-2.5 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-yellow-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{"About the Museum"}
</button>
<button
onclick={nav.clone()(Route::Contact)}
class="rounded-md w-full md:w-1/4 bg-green-600 my-2.5 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{"Help the Museum"}
</button>
</div>
</div>
<div class="bg-gray-800 lg:pl-20 text-gray-300 p-4 md:py-8 mb-8 rounded-md justify-left items-left">
<div class="mx-auto text-center w-3/4 py-2 bg-gray-700 ring ring-8 ring-gray-800 rounded relative -top-8 md:-top-12 text-xl text-gray-300">{"⭐ Featured Artifact ⭐"}</div>
<div class="mx-auto text-sm md:text-lg font-mono text-center w-3/4 py-2 bg-gray-700 ring ring-8 ring-gray-800 rounded relative -top-8 md:-top-12 text-gray-300">{"⭐ Featured Artifact ⭐"}</div>
<pre>
{formatted_haskell}
</pre>
Expand Down

0 comments on commit 91a51f2

Please sign in to comment.