only hide GitHub icon in Header on mobile, show Discord icon in Foote…

…r on all screens
denoland · Feb 5, 2025 · 074792a · 074792a
1 parent 7f7167b
commit 074792a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/www/components/Footer.tsx b/www/components/Footer.tsx
@@ -26,7 +26,7 @@ export default function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
           <span>© {new Date().getFullYear()} the Fresh authors</span>
         </div>
 
-        <div class="sm:hidden">
+        <div class="text-foreground-secondary [&_li]:hover:text-green-600 hover:text-green-600 [&_ul]:space-x-5 [&_.github]:hidden">
           <SocialIcons />
         </div>
 

diff --git a/www/components/Header.tsx b/www/components/Header.tsx
@@ -10,7 +10,7 @@ export default function Header(props: { title: string; active: string }) {
   return (
     <header
       class={[
-        "mx-auto flex gap-3 items-center",
+        "mx-auto flex gap-1 sm:gap-3 items-center",
         isHome ? "justify-end h-20 max-w-screen-xl" : "justify-between",
         isDocs
           ? "h-20 max-w-screen-2xl w-full sticky top-0 bg-background-primary/75 z-50 backdrop-blur-sm"
@@ -20,13 +20,13 @@ export default function Header(props: { title: string; active: string }) {
       f-client-nav={false}
     >
       {!isHome && (
-        <div class="p-4 flex items-center">
+        <div class="p-2 md:p-4 flex items-center">
           <Logo />
         </div>
       )}
       <div class="flex justify-end">
         <NavigationBar class="" active={props.active} />
-        <div class="hidden sm:flex">
+        <div class="flex [&_.github]:hidden [&_.github]:sm:flex [&_ul]:space-x-2 [&_ul]:sm:space-x-4 [&_li:hover]:text-green-600">
           <SocialIcons />
         </div>
         <div class="flex px-3 sm:px-6 fill-foreground-primary hover:fill-fresh [&_*]:transition ">
@@ -39,7 +39,11 @@ export default function Header(props: { title: string; active: string }) {
 
 export function Logo() {
   return (
-    <a href="/" class="flex mr-3 items-center shrink-0" aria-label="Top Page">
+    <a
+      href="/"
+      class="flex sm:mr-3 items-center shrink-0"
+      aria-label="Top Page"
+    >
       <img
         src="/logo.svg"
         alt="Fresh logo"

diff --git a/www/components/SocialIcons.tsx b/www/components/SocialIcons.tsx
@@ -2,20 +2,20 @@ import * as Icons from "./Icons.tsx";
 
 export default function SocialIcons() {
   return (
-    <ul class="flex items-center align-center space-x-5 md:mx-8">
-      <li class="flex">
+    <ul class="flex items-center align-center">
+      <li class="flex github">
         <a
           href="https://github.com/denoland/fresh"
-          class="hover:text-green-600 inline-block transition"
+          class="inline-block transition"
           aria-label="GitHub"
         >
           <Icons.GitHub />
         </a>
       </li>
-      <li class="flex">
+      <li class="flex discord">
         <a
           href="https://discord.com/invite/deno"
-          class="hover:text-green-600 inline-block transition"
+          class="inline-block transition"
           aria-label="Discord"
         >
           <Icons.Discord />