Merge pull request #258 from AmanJain18/master

Fixed Bugs  Issues #255

Author: jsvigneshkanna

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vscode

components/socialbuttons.js

@@ -3,7 +3,7 @@ import Link from "next/link";
 const SocialButtons = () => {
   return (
     <div className="flex flex-row w-100 items-center justify-center md:flex-row bg-gradient-to-tr from-[#000855] to-[#690101] py-3 md:py-6">
-      <div className="hidden md:flex flex-row items-center justify-center">
+      <div className="hidden md9:flex flex-row items-center justify-center">
         <div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
           <div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#4267B2]">
             <i className="fab fa-facebook-f text-2xl leading-[60px] transition-all ease-out text-white"></i>
@@ -22,7 +22,7 @@ const SocialButtons = () => {
         </div>
       </div>
       <div className="flex flex-row items-center justify-center">
-        <div className="hidden md:block group m-3 h-16 w-16 py-0  hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
+        <div className="hidden md9:block group m-3 h-16 w-16 py-0  hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
           <div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#E1306C]">
             <i className="fab fa-instagram text-2xl leading-[60px] transition-all ease-out text-white"></i>
           </div>
@@ -46,7 +46,7 @@ const SocialButtons = () => {
         </div>
       </div>
       <div className="flex flex-row items-center justify-center">
-        <div className="hidden md:block group m-3 h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
+        <div className="hidden md9:block group m-3 h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
           <div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#ff0000]">
             <i className="fab fa-youtube text-2xl leading-[60px] transition-all ease-out text-white"></i>
           </div>

package-lock.json

@@ -11,13 +11,13 @@
   "dependencies": {
     "@octokit/rest": "^19.0.5",
     "install-peerdeps": "^3.0.3",
-    "next": "12.3.1",
+    "next": "^12.3.1",
     "nextjs": "0.0.3",
     "prettier": "^2.7.1",
-    "react": "18.2.0",
+    "react": "^18.2.0",
     "react-codepen-prefill": "^0.3.0",
     "react-codepen-prefill-embed": "0.0.2",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-loader-spinner": "^5.3.4",
     "swr": "^1.3.0"

package.json

@@ -6,6 +6,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        md9: "900px",
+        // => @media (min-width: 900px) { ... }
+      },
       colors: {
         "alert-text": "#d4975c",
       },