MasseR/rauhala.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Navbar with tailwind

Browse Source
This commit is contained in:
Mats Rauhala 2023-03-29 23:03:19 +03:00
parent c1058994f3
commit f885399329
2 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
rauhala.info/css/index.css
View File

@ -592,6 +592,10 @@ video {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
.shrink {
flex-shrink: 1;
}
@ -616,6 +620,10 @@ video {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
@ -638,6 +646,10 @@ video {
border-radius: 9999px;
}
.rounded {
border-radius: 0.25rem;
}
.border-t {
border-top-width: 1px;
}
@ -657,6 +669,11 @@ video {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
@ -749,11 +766,31 @@ video {
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:text-gray-400:hover {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));

14
rauhala.info/templates/default.html
View File

@ -10,14 +10,16 @@
</head>
<body>
<header>
<nav>
<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 href="/">Home</a>
<a href="/posts.html">Posts</a>
<a href="/projects.html">Projects</a>
<a href="https://git.rauhala.info"><img src="/images/git_16.png" alt="git" /></a>
<a href="/contact.html">Contact</a>
<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>
</header>