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; max-width: 36rem;
} }
.flex-1 {
flex: 1 1 0%;
}
.shrink { .shrink {
flex-shrink: 1; flex-shrink: 1;
} }
@ -616,6 +620,10 @@ video {
align-items: center; align-items: center;
} }
.justify-center {
justify-content: center;
}
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
@ -638,6 +646,10 @@ video {
border-radius: 9999px; border-radius: 9999px;
} }
.rounded {
border-radius: 0.25rem;
}
.border-t { .border-t {
border-top-width: 1px; border-top-width: 1px;
} }
@ -657,6 +669,11 @@ video {
background-color: rgb(249 250 251 / var(--tw-bg-opacity)); 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 { .py-24 {
padding-top: 6rem; padding-top: 6rem;
padding-bottom: 6rem; padding-bottom: 6rem;
@ -749,11 +766,31 @@ video {
color: rgb(17 24 39 / var(--tw-text-opacity)); 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 { .hover\:bg-gray-100:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); 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 { .group:hover .group-hover\:text-gray-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity)); color: rgb(75 85 99 / var(--tw-text-opacity));

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

@ -10,14 +10,16 @@
</head> </head>
<body> <body>
<header> <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 --> <!-- Git logo from https://git-scm.com/downloads/logos -->
<!-- Logo by Jason Long --> <!-- Logo by Jason Long -->
<a href="/">Home</a> <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/">Home</a>
<a href="/posts.html">Posts</a> <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/posts.html">Posts</a>
<a href="/projects.html">Projects</a> <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/projects.html">Projects</a>
<a href="https://git.rauhala.info"><img src="/images/git_16.png" alt="git" /></a> <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="https://git.rauhala.info">Git</a>
<a href="/contact.html">Contact</a> <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/contact.html">Contact</a>
</div>
</nav> </nav>
</header> </header>