feat: hover feedback

components/Feed.js

@@ -14,6 +14,7 @@ const Feed = ({
           href={url}
           target="_blank"
           rel="noopener noreferer"
+          className="hover:opacity-70"
           onClick={(e) => {
             e.preventDefault();
 

components/Footer.js

@@ -10,12 +10,12 @@ const Footer = ({ license, links, repo, commitID }) => (
           <Link
             key={url + label}
             href={url}
-            className="md:mx-4 mb-1 md:inline block"
+            className="md:mx-4 mb-1 md:inline block hover:opacity-70"
           >
             {label}
           </Link>
         ))}
-        <Link href={repo} className="mx-4">
+        <Link href={repo} className="mx-4 hover:opacity-70">
           Source Code
         </Link>
       </div>
@@ -24,7 +24,7 @@ const Footer = ({ license, links, repo, commitID }) => (
         <p>
           &copy; {YEAR_TO_BUMP}{" "}
           <Link
-            className="text-neutral-600 dark:text-neutral-200"
+            className="text-neutral-600 dark:text-neutral-200 hover:opacity-70"
             target="_blank"
             rel="noopener noreferer"
             href="https://github.com/faultables"
@@ -32,12 +32,12 @@ const Footer = ({ license, links, repo, commitID }) => (
             faultables
           </Link>{" "}
           • All media is licensed under{" "}
-          <Link className="underline" href={license.url}>
+          <Link className="underline hover:opacity-70" href={license.url}>
             {license.name}
           </Link>{" "}
           unless stated otherwise •{" "}
           <Link
-            className="text-neutral-600 dark:text-neutral-200"
+            className="text-neutral-600 dark:text-neutral-200 hover:opacity-70"
             target="_blank"
             rel="noopener noreferer"
             href={`${repo}/commit/${commitID}`}

components/Navbar.js

@@ -1,7 +1,7 @@
 import Link from "next/link";
 
 const Navbar = ({ name, logo }) => (
-  <nav className="flex py-2 border-b dark:border-neutral-800">
+  <nav className="flex py-2 border-b dark:border-neutral-800 hover:opacity-70">
     <div className="w-3/12 md:w-7/12 md:mx-auto">
       <div className="md:w-2/12">
         <Link href="/">

components/Overlay.js

@@ -29,7 +29,7 @@ const Overlay = ({ overlayContent, closeOverlay }) => {
       onClick={closeOverlay}
       className={`${
         isOverlayOpen
-          ? "bg-neutral-800/95 fixed w-full h-full left-0 top-0 cursor-pointer"
+          ? "bg-neutral-800/95 fixed w-full h-full left-0 top-0 cursor-pointer z-30"
           : ""
       }`}
     >

components/Profile.js

@@ -13,13 +13,13 @@ const Profile = ({ profile, totalPosts }) => (
         <h2 className="text-2xl font-semibold">{profile.username}</h2>
         <div className="md:ml-4 my-4">
           <a
-            className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed dark:bg-neutral-800"
+            className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed dark:bg-neutral-800 hover:opacity-70"
             href={profile.follow_url}
           >
             Follow
           </a>
           <a
-            className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed dark:bg-neutral-800"
+            className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed dark:bg-neutral-800 hover:opacity-70"
             href={profile.message_url}
           >
             Message
@@ -34,6 +34,7 @@ const Profile = ({ profile, totalPosts }) => (
       <p className="leading-loose font-semibold text-blue-900 dark:text-blue-200">
         <a
           target="_blank"
+          className="hover:underline"
           rel="noopener noreferer"
           href={`https://${profile.link}`}
         >

pages/static/about.js

@@ -8,7 +8,7 @@ const About = () => (
         Sebelumnya saya menjalankan <em>instance</em>{" "}
         <a
           href="https://pixelfed.org"
-          className="underline"
+          className="underline hover:opacity-70"
           target="_blank"
           rel="noopener noreferer"
         >
@@ -22,7 +22,7 @@ const About = () => (
         Disamping itu, Pixelfed sangat menjanjikan: menggunakan protokol{" "}
         <a
           href="https://www.w3.org/TR/activitypub/"
-          className="underline"
+          className="underline hover:opacity-70"
           target="_blank"
           rel="noopener noreferer"
         >
@@ -32,7 +32,7 @@ const About = () => (
         paling penting adalah{" "}
         <a
           href="https://github.com/pixelfed/pixelfed"
-          classname="underline"
+          classname="underline hover:opacity-70"
           target="_blank"
           rel="noopener noreferer"
         >
@@ -45,7 +45,7 @@ const About = () => (
         memiliki akun sosial media lainnya di "universe"{" "}
         <a
           href="https://joinmastodon.org"
-          className="underline"
+          className="underline hover:opacity-70"
           target="_blank"
           rel="noopener noreferer"
         >
@@ -76,13 +76,16 @@ const About = () => (
         setidaknya, ini tidak berlebihan, khususnya untuk saat ini.
       </p>
       <br />
-      <a
+      <p className="mb-6">
-        href="https://github.com/faultables"
+        <a
-        target="_blank"
+          href="https://github.com/faultables"
-        rel="noopener noreferer"
+          className="hover:opacity-70"
-      >
+          target="_blank"
-        <p className="mb-6">— faultables</p>
+          rel="noopener noreferer"
-      </a>
+        >
+          — faultables
+        </a>
+      </p>
     </div>
   </div>
 );