Two git

rauhala.info/css/index.css

@@ -591,6 +591,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -688,6 +692,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -759,20 +768,48 @@ 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-teal-400 {
+  --tw-text-opacity: 1;
+  color: rgb(45 212 191 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .first\:border-none:first-child {
   border-style: none;
 }
 
+.hover\:block:hover {
+  display: block;
+}
+
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
 .group:hover .group-hover\:text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:mt-16 {
     margin-top: 4rem;

rauhala.info/templates/default.html

@@ -17,7 +17,12 @@
               <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="group">Git
+                <ul class="hidden bg-gray-800 text-gray-300 border rounded p-2 group-hover:block absolute">
+                    <li class="hover:text-gray-400"><a href="https://git.rauhala.info/MasseR">Gitea</a></li>
+                    <li class="hover:text-gray-400"><a href="https://github.com/MasseR">GitHub</a></li>
+                </ul>
+              </li>
               <li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
             </ul>
           </nav>