client(Header): made the header more responsive

Author: 0l1v3rr

client/src/components/buttons/ButtonLink.tsx

@@ -6,16 +6,18 @@ interface ButtonLinkProps {
   link: string;
   icon: IconType;
   num: number | undefined;
+  className?: string;
 }
 
 const ButtonLink: FC<ButtonLinkProps> = (props) => {
   return (
     <a
       href={props.link}
-      className="text-gh-text flex items-center gap-3 
+      className={`text-gh-text flex items-center gap-3 
       bg-gh-button border border-solid border-gh-button-border
         py-1 px-3 rounded-md hover:border-gh-button-border-active 
-        transition-all duration-150 hover:bg-gh-button-active text-sm"
+        transition-all duration-150 hover:bg-gh-button-active 
+        text-sm ${props.className}`}
     >
       <div className="text-gh-text-secondary text-lg">{<props.icon />}</div>
 

client/src/components/repo/Title.tsx

@@ -21,23 +21,25 @@ const Title: FC<TitleProps> = (props) => {
           <path
             fillRule="evenodd"
             d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 
-          01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 
-          110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 
-          01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 
-          0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 
-          00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 
-          0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+              01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 
+              110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 
+              01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 
+              0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 
+              00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 
+              0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
           />
         </svg>
       </div>
 
       <a
         href={`https://github.com/${props.username}`}
-        className="text-gh-blue hover:underline cursor-pointer"
+        className="text-gh-blue hover:underline cursor-pointer hidden md:block"
       >
         {props.username}
       </a>
-      <div className="text-gh-text-secondary">/</div>
+
+      <div className="text-gh-text-secondary hidden md:block">/</div>
+
       <a
         href={`https://github.com/${props.username}/${props.repoName}`}
         className="text-gh-blue font-semibold hover:underline cursor-pointer"

client/src/sections/Header.tsx

@@ -24,6 +24,7 @@ const Header = () => {
           icon={BiGitRepoForked}
           num={Number(ghStats.forks)}
           text="Fork"
+          className="hidden md:flex"
         />
 
         <ButtonLink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-readme-tech-stack",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Dynamically generated, customizable technologies cards for your GitHub README.",
   "main": "src/app.ts",
   "scripts": {