Skip to content

Commit 9b4ad9b

Browse files
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>
1 parent f11bff5 commit 9b4ad9b

File tree

2 files changed

+8
-8
lines changed

2 files changed

+8
-8
lines changed

src/includes/header.php

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,43 +48,43 @@
4848
<img alt="FreeTube mini logo" role="banner" src='images/iconWhite.png' class='h-12 inline-block'/>
4949
<ul class='list-none'>
5050
<a href='/'>
51-
<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">
51+
<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">
5252
<i class="fa-solid fa-house-chimney"></i>
5353
<span class='px-2 hidden lg:inline'>Home</span>
5454
</li>
5555
</a>
5656
<a href='<?php echo $downloadUrl; ?>'>
57-
<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">
57+
<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">
5858
<i class="fa-solid fa-download"></i>
5959
<span class='px-2 hidden lg:inline'>Download</span>
6060
</li>
6161
</a>
6262
<a href='http://blog.freetubeapp.io'>
63-
<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">
63+
<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">
6464
<i class="fa-solid fa-rss"></i>
6565
<span class='px-2 hidden lg:inline'>Blog</span>
6666
</li>
6767
</a>
6868
<a href='/about.php'>
69-
<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">
69+
<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">
7070
<i class="fa-solid fa-question"></i>
7171
<span class='px-2 hidden lg:inline'>About</span>
7272
</li>
7373
</a>
7474
<a href='/privacy.php'>
75-
<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">
75+
<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">
7676
<i class="fa-solid fa-user-secret"></i>
7777
<span class='px-2 hidden lg:inline'>Privacy</span>
7878
</li>
7979
</a>
8080
<a class="sourceLink" href='http://source.freetubeapp.io'>
81-
<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">
81+
<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">
8282
<i class="fa-brands fa-github"></i>
8383
<span class='px-2 hidden lg:inline'>Source</span>
8484
</li>
8585
</a>
8686
<a class="contactLink" href="<?php echo $contactUrl; ?>">
87-
<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">
87+
<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">
8888
<i class="fa-solid fa-comment"></i>
8989
<span class='px-2 hidden lg:inline'>Contact</span>
9090
</li>

src/style/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ video { max-width: 100%; height: auto }
215215
.text-primary { color: hsl(200, 98%, 48%) }
216216
.text-wrap { word-wrap: break-word; }
217217
.tracking-wide { letter-spacing: 0.025em }
218-
.w-12 { width: 3rem }
218+
.w-10 { width: 2.5rem }
219219
.w-24 { min-width: 6rem }
220220
.w-full { width: 100% }
221221
.gap-5 { grid-gap: 1.25rem; gap: 1.25rem }

0 commit comments

Comments
 (0)