Fix header layout on small screens (#85)

* reduce header items width on small screens

* Remove unused .w-12 CSS class

Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

---------

Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

Author: zobla-kv

src/includes/header.php

@@ -48,43 +48,43 @@
       <img alt="FreeTube mini logo" role="banner" src='images/iconWhite.png' class='h-12 inline-block'/>
       <ul class='list-none'>
         <a href='/'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-house-chimney"></i>
             <span class='px-2 hidden lg:inline'>Home</span>
           </li>
         </a>
         <a href='<?php echo $downloadUrl; ?>'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-32 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-32 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-download"></i>
             <span class='px-2 hidden lg:inline'>Download</span>
           </li>
         </a>
         <a href='http://blog.freetubeapp.io'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-rss"></i>
             <span class='px-2 hidden lg:inline'>Blog</span>
           </li>
         </a>
         <a href='/about.php'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-question"></i>
             <span class='px-2 hidden lg:inline'>About</span>
           </li>
         </a>
         <a href='/privacy.php'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-user-secret"></i>
             <span class='px-2 hidden lg:inline'>Privacy</span>
           </li>
         </a>
         <a class="sourceLink" href='http://source.freetubeapp.io'>
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-brands fa-github"></i>
             <span class='px-2 hidden lg:inline'>Source</span>
           </li>
         </a>
         <a class="contactLink" href="<?php echo $contactUrl; ?>">
-          <li class="inline-block hover:bg-secondary w-12 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
+          <li class="inline-block hover:bg-secondary w-10 lg:w-24 h-20 leading-20 text-center transition-all easy-in-out duration-200">
             <i class="fa-solid fa-comment"></i>
             <span class='px-2 hidden lg:inline'>Contact</span>
           </li>

src/style/main.css

@@ -215,7 +215,7 @@ video { max-width: 100%; height: auto }
 .text-primary { color: hsl(200, 98%, 48%) }
 .text-wrap { word-wrap: break-word; }
 .tracking-wide { letter-spacing: 0.025em }
-.w-12 { width: 3rem }
+.w-10 { width: 2.5rem }
 .w-24 { min-width: 6rem }
 .w-full { width: 100% }
 .gap-5 { grid-gap: 1.25rem; gap: 1.25rem }