style nav

This commit is contained in:
Adam 2024-01-19 21:35:38 -05:00
parent e4e7cbe163
commit a1bd3f15bd
2 changed files with 19 additions and 12 deletions

View file

@ -23,21 +23,23 @@ pub fn App() -> impl IntoView {
outside_errors.insert_with_default_key(AppError::NotFound); outside_errors.insert_with_default_key(AppError::NotFound);
view! { <ErrorTemplate outside_errors/> }.into_view() view! { <ErrorTemplate outside_errors/> }.into_view()
}> }>
// Some repetitive nav styling is defined in the main .css file
<nav class="sticky top-0 z-50 bg-gradient-to-b shadow-lg from-zinc-800 to-zinc-900"> <nav class="sticky top-0 z-50 bg-gradient-to-b shadow-lg from-zinc-800 to-zinc-900">
<ul class="container flex items-center p-3"> <ul class="container flex items-center p-3">
<li class="mx-1.5 sm:mx-6">"DoorDesk"</li> // Logo
<li class="mx-1.5 sm:mx-6"> <p class="mx-1.5 sm:mx-6">"DoorDesk"</p>
<li>
<A href="" exact=true> <A href="" exact=true>
"Home" "Home"
</A> </A>
</li> </li>
<li class="mx-1.5 sm:mx-6"> <li>
<A href="/blog">"Blog"</A> <A href="/blog">"Blog"</A>
</li> </li>
<li class="mx-1.5 sm:mx-6"> <li>
<A href="/projects">"Projects"</A> <A href="/projects">"Projects"</A>
</li> </li>
<li class="mx-1.5 sm:mx-6"> <li>
<a href="https://git.doordesk.net">"Git"</a> <a href="https://git.doordesk.net">"Git"</a>
</li> </li>
</ul> </ul>

View file

@ -2,15 +2,21 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { html {
@apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
@apply w-screen h-screen;
@apply text-orange-50 antialiased font-mono tracking-tighter; @apply text-orange-50 antialiased font-mono tracking-tighter;
} }
a[aria-current="page"] { body {
border-bottom: 2px solid #de0002; @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); }
nav li {
@apply border-b-2 mx-1.5 sm:mx-6;
@apply border-transparent hover:border-orange-700 duration-300;
}
nav li:has(> a[aria-current="page"]) {
@apply border-b-orange-700 border-b-2;
} }
/* for innerHTML articles */ /* for innerHTML articles */
@ -43,7 +49,6 @@ article ol {
@apply list-decimal; @apply list-decimal;
} }
/* Code blocks */ /* Code blocks */
.hh4 { .hh4 {
@apply text-orange-600; @apply text-orange-600;