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

View File

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