Display Patch v3.5.4 - 1

> Now support more device sizes than before

3 files changed, 20 insertions, 20 deletions

diff --git a/components/footer.js b/components/footer.js
index 50c556a..db32d90 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -11,24 +11,24 @@ function Footer() {
   const [season, setSeason] = useState(getCurrentSeason());
 
   return (
-    <section className="text-[#dbdcdd] z-40 bg-[#0c0d10] md:flex md:h-[12rem] md:items-center md:justify-between">
-      <div className="mx-auto flex w-[80%] flex-col space-y-10 pb-6 md:flex-row md:items-center md:justify-between md:space-y-0 md:py-0">
+    <section className="text-[#dbdcdd] z-40 bg-[#0c0d10] lg:flex lg:h-[12rem] lg:items-center lg:justify-between">
+      <div className="mx-auto flex w-[80%] lg:w-[95%] xl:w-[80%] flex-col space-y-10 pb-6 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:py-0">
         <div className="flex items-center gap-24">
-          <div className="md:flex grid items-center md:gap-10 gap-3">
+          <div className="lg:flex grid items-center lg:gap-10 gap-3">
             {/* <h1 className="font-outfit text-[2.56rem]">moopa</h1> */}
             <h1 className="font-outfit text-[40px]">moopa</h1>
             <div>
-              <p className="flex items-center gap-1 font-karla md:text-[0.81rem] text-[0.7rem] text-[#CCCCCC]">
+              <p className="flex items-center gap-1 font-karla lg:text-[0.81rem] text-[0.7rem] text-[#CCCCCC]">
                 &copy; {new Date().getFullYear()} moopa.live | Website Made by
                 Factiven
               </p>
-              <p className="font-karla md:text-[0.8rem] text-[0.65rem] text-[#9c9c9c]  md:w-[520px] italic">
+              <p className="font-karla lg:text-[0.8rem] text-[0.65rem] text-[#9c9c9c]  lg:w-[520px] italic">
                 This site does not store any files on our server, we only linked
                 to the media which is hosted on 3rd party services.
               </p>
             </div>
           </div>
-          {/* <div className="lg:hidden md:block">
+          {/* <div className="lg:hidden lg:block">
             <Image
               src="https://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"
               alt="gambar"
@@ -38,8 +38,8 @@ function Footer() {
             />
           </div> */}
         </div>
-        <div className="flex flex-col gap-10 md:flex-row md:items-end md:gap-[9.06rem] text-[#a7a7a7] text-sm md:text-end">
-          <div className="flex flex-col gap-10 font-karla font-bold md:flex-row md:gap-[5.94rem]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-end lg:gap-[9.06rem] text-[#a7a7a7] text-sm lg:text-end">
+          <div className="flex flex-col gap-10 font-karla font-bold lg:flex-row lg:gap-[5.94rem]">
             <ul className="flex flex-col gap-y-[0.7rem] ">
               <li className="cursor-pointer hover:text-action">
                 <Link
@@ -79,7 +79,7 @@ function Footer() {
                 <Link href="/dmca">DMCA</Link>
               </li>
               <li className="cursor-pointer hover:text-action">
-                <Link href="/contact">Contact</Link>
+                <Link href="/contact">Github</Link>
               </li>
             </ul>
           </div>
diff --git a/components/layout.js b/components/layout.js
index 280fbdb..bc55860 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -43,18 +43,18 @@ function Layout(props) {
       >
         {/* PC/Tablet */}
         <Navbar
-          className={`absolute z-50 hidden w-full duration-500 md:fixed md:top-0 md:block md:transition-all ${
+          className={`absolute z-50 hidden w-full duration-500 lg:fixed lg:top-0 lg:block lg:transition-all ${
             isAtTop
               ? `px-2 pt-2 transition-all duration-1000 ${props.navTop}`
               : isScrollingDown
-              ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-[#0c0d10] "
-              : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-[#0c0d10]"
+              ? "lg:h-16 lg:translate-y-[-100%] lg:shadow-sm lg:bg-[#0c0d10] "
+              : "lg:h-16 lg:translate-y-0 lg:shadow-sm lg:bg-[#0c0d10]"
           }`}
         />
 
         {/* Mobile */}
         <Navbar
-          className={`absolute z-50 w-full duration-300 md:fixed md:top-0 md:hidden md:transition-all`}
+          className={`absolute z-50 w-full duration-300 lg:fixed lg:top-0 lg:hidden lg:transition-all`}
         />
         <div className="grid items-center justify-center">{props.children}</div>
         <Footer />
diff --git a/components/navbar.js b/components/navbar.js
index b6dcb47..498007a 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -29,8 +29,8 @@ function Navbar(props) {
 
   return (
     <header className={`${props.className}`}>
-      <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-[#dbdcdd]">
-        <div className="pb-2 font-outfit text-4xl font-semibold md:block text-white">
+      <div className="flex h-16 w-auto items-center justify-between px-5 lg:mx-auto lg:w-[80%] lg:px-0 text-[#dbdcdd]">
+        <div className="pb-2 font-outfit text-4xl font-semibold lg:block text-white">
           <Link href="/">moopa</Link>
         </div>
 
@@ -38,7 +38,7 @@ function Navbar(props) {
         {!isVisible && (
           <button
             onClick={handleShowClick}
-            className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg md:hidden"
+            className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg lg:hidden"
             id="bars"
           >
             <svg
@@ -65,7 +65,7 @@ function Navbar(props) {
           {isVisible && session && (
             <Link
               href={`/profile/${session?.user?.name}`}
-              className="fixed md:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
+              className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
             >
               <Image
                 src={session?.user.image.large}
@@ -77,7 +77,7 @@ function Navbar(props) {
             </Link>
           )}
           {isVisible && (
-            <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg md:hidden">
+            <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden">
               <div className="grid grid-cols-4 place-items-center gap-6">
                 <button className="group flex flex-col items-center">
                   <Link href="/" className="">
@@ -222,8 +222,8 @@ function Navbar(props) {
           )}
         </div>
 
-        <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
-          <ul className="hidden gap-10 font-roboto text-md md:flex items-center relative">
+        <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 lg:flex">
+          <ul className="hidden gap-10 font-roboto text-md lg:flex items-center relative">
             <li>
               <Link
                 href="/"