fix: responsiveness (mobile)

components/Footer.js

@@ -3,11 +3,15 @@ import Link from "next/link";
 import { YEAR_TO_BUMP } from "../constants";
 
 const Footer = ({ license, links, repo, commitID }) => (
-  <footer className="flex items-center justify-between flex-wrap py-4 text-center mt-10">
+  <footer className="flex py-4 text-center md:mt-10 mt-5">
-    <div className="w-10/12 md:w-7/12 mx-auto font-semibold">
+    <div className="md:w-7/12 mx-auto font-semibold">
-      <div className="text-sm mb-10">
+      <div className="md:text-sm mb-10">
         {links.map(({ url, label }) => (
-          <Link key={url + label} href={url} className="mx-4">
+          <Link
+            key={url + label}
+            href={url}
+            className="md:mx-4 mb-1 md:inline block"
+          >
             {label}
           </Link>
         ))}

components/Overlay.js

@@ -12,8 +12,7 @@ const OverlayContent = ({ overlayContent }) => {
   } else if (overlayContent?.type === MEDIA_TYPE.VIDEOS) {
     return (
       <iframe
-        width="50%"
+        className="md:w-6/12 w-full h-1/2"
-        height="50%"
         allow="fullscreen"
         sandbox="allow-same-origin allow-scripts allow-popups"
         src={overlayContent?.url}
@@ -30,14 +29,14 @@ const Overlay = ({ overlayContent, closeOverlay }) => {
       onClick={closeOverlay}
       className={`${
         isOverlayOpen
-          ? "bg-neutral-800/95 fixed w-screen h-screen left-0 top-0 cursor-pointer"
+          ? "bg-neutral-800/95 fixed w-full h-full left-0 top-0 cursor-pointer"
           : ""
       }`}
     >
       {isOverlayOpen ? (
         <p
           onClick={closeOverlay}
-          className="fixed right-0 bottom-0 m-5 text-white rounded text-sm"
+          className="fixed right-0 bottom-0 md:mx-5 my-5 text-white rounded text-sm text-center md:text-right w-full"
         >
           Click anywhere or press "Escape" to close
         </p>
@@ -45,7 +44,7 @@ const Overlay = ({ overlayContent, closeOverlay }) => {
 
       <div
         className={`flex justify-center items-center ${
-          isOverlayOpen ? "h-screen w-screen" : "h-0 w-0"
+          isOverlayOpen ? "h-full w-full" : "h-0 w-0"
         }`}
       >
         <OverlayContent overlayContent={overlayContent} />

components/Profile.js

@@ -1,18 +1,18 @@
 const Profile = ({ profile, totalPosts }) => (
   <div className="flex flex-warp">
-    <div className="lg:w-4/12 w-3/12 md:py-10 lg:px-20 md:px-10">
+    <div className="lg:w-4/12 w-3/12 md:py-10 ml-3 md:ml-0 lg:px-20 md:px-10">
       <img
         alt={profile.display_name}
         src={profile.avatar}
         className="w-100 rounded-full mx-auto border border-gray-200 p-1"
       />
     </div>
-    <div className="lg:w-9/12 md:w-10/12 px-10 mb-5 md:p-5">
+    <div className="lg:w-9/12 md:w-10/12 mb-5 md:p-5 ml-5">
-      <div className="flex items-center">
+      <div className="md:flex items-center">
         <h2 className="text-2xl font-semibold">{profile.username}</h2>
-        <div className="ml-4">
+        <div className="md:ml-4 my-4">
           <a
-            className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed"
+            className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed"
             href={profile.follow_url}
           >
             Follow
@@ -25,7 +25,7 @@ const Profile = ({ profile, totalPosts }) => (
           </a>
         </div>
       </div>
-      <div className="my-5 font-bold text-sm">
+      <div className="md:my-5 my-3 font-bold text-sm">
         <p>{totalPosts} posts</p>
       </div>
       <p className="font-bold mb-1">{profile.display_name}</p>