Update navbar

This commit is contained in:
Mats Rauhala 2023-04-25 21:11:00 +03:00
parent 50e664f70b
commit b02f086730
2 changed files with 37 additions and 11 deletions

View File

@ -627,6 +627,10 @@ video {
align-items: center; align-items: center;
} }
.items-stretch {
align-items: stretch;
}
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
@ -635,6 +639,10 @@ video {
justify-content: space-between; justify-content: space-between;
} }
.gap-2 {
gap: 0.5rem;
}
.gap-x-4 { .gap-x-4 {
-moz-column-gap: 1rem; -moz-column-gap: 1rem;
column-gap: 1rem; column-gap: 1rem;
@ -653,6 +661,10 @@ video {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.border {
border-width: 1px;
}
.border-b { .border-b {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
@ -676,6 +688,10 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.p-2 {
padding: 0.5rem;
}
.px-3 { .px-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
@ -691,6 +707,11 @@ video {
padding-bottom: 6rem; padding-bottom: 6rem;
} }
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pt-10 { .pt-10 {
padding-top: 2.5rem; padding-top: 2.5rem;
} }
@ -723,6 +744,11 @@ video {
color: rgb(209 213 219 / var(--tw-text-opacity)); color: rgb(209 213 219 / var(--tw-text-opacity));
} }
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.text-gray-500 { .text-gray-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity)); color: rgb(107 114 128 / var(--tw-text-opacity));

View File

@ -10,17 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<nav class="bg-gray-800"> <nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg border width-full align-center justify-between">
<div class="flex flex-1 items-center justify-center"> <ul class="flex gap-2 p-2">
<!-- Git logo from https://git-scm.com/downloads/logos --> <li class="hover:text-gray-400"><a href="/">Home</a></li>
<!-- Logo by Jason Long --> <li class="hover:text-gray-400"><a href="/posts.html">Posts</a></li>
<a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/">Home</a> <li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
<a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/posts.html">Posts</a> </ul>
<a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/projects.html">Projects</a> <ul class="flex gap-2 p-2">
<a class="text-gray-300 hover:text-gray-400 rounded px-3" href="https://git.rauhala.info">Git</a> <li class="hover:text-gray-400"><a href="https://git.rauhala.info/MasseR">Git</a></li>
<a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/contact.html">Contact</a> <li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
</div> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">