feat: navbar,blogs pg reponsive

abbi4code · Oct 7, 2024 · 569aada · 569aada
1 parent 173afe2
commit 569aada
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 10 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/fcon1.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>TCW</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/assets/fcon1.png b/client/src/assets/fcon1.png
diff --git a/client/src/assets/fevicon.png b/client/src/assets/fevicon.png
diff --git a/client/src/assets/icons8-blog-cute-outline-96.png b/client/src/assets/icons8-blog-cute-outline-96.png
diff --git a/client/src/components/Blogscomponent.tsx b/client/src/components/Blogscomponent.tsx
@@ -33,7 +33,7 @@ export default function BlogCard({
 
   return (
     <CardContainer className="inter-var " key={key}>
-      <CardBody className=" border-[.2px] border-white/10 relative group/card flex flex-col gap-4 md:grid md:grid-cols-3 dark:hover:shadow-2xl   md:w-[50rem] lg:w-[70rem] h-auto rounded-xl p-6 backdrop-blur-[2px] ">
+      <CardBody className=" border-[2px] border-white/10 relative group/card flex flex-col gap-4 md:grid md:grid-cols-3 dark:hover:shadow-2xl   md:w-[50rem] lg:w-[70rem] h-auto rounded-xl p-6 backdrop-blur-[2px] ">
         <div
           className="col-span-1 md:col-span-2 flex flex-col cursor-pointer"
           onClick={handleOnclick}

diff --git a/client/src/pages/Blogs.tsx b/client/src/pages/Blogs.tsx
@@ -92,7 +92,7 @@ export function Navbar(){
 
   return (
     <div className="flex w-full  sticky top-7  text-slate-200 justify-center">
-      <nav className=" w-[25rem] sm:min-w-[40rem] flex justify-evenly text-xl backdrop-blur-sm items-center rounded-xl gap-5 font-bold px-3 py-2 border border-slate-400">
+      <nav className=" w-[20rem] sm:min-w-[40rem] flex justify-evenly text-lg backdrop-blur-sm items-center rounded-xl gap-5 font-bold px-3 py-2 border border-slate-400">
         <h1 className="hover:text-[#F1E5D1] backdrop-filter cursor-pointer" onClick={()=>{navigate('/')}}>
           Home
         </h1>

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
@@ -14,14 +14,14 @@ const Home = () => {
       <Navbar />
         <div className="flex items-center gap-14 justify-center mt-20 bg-opacity-20 p-20 md:shadow-xl  flex-col">
           <GradualSpacing
-            className="font-display text-center text-[3rem] sm:text-[5rem] lg:text-[7rem] font-bold tracking-tighter text-black dark:text-white  md:leading-[5rem]"
+            className="font-display text-center text-[2.5rem] sm:text-[5rem] lg:text-[7rem] font-bold tracking-tighter text-black dark:text-white  md:leading-[5rem]"
             text="Welcome Coders"
             duration={0.6}
           />
 
-          <div className="flex flex-col gap-2 mt-4 justify-center items-center font-bold text-2xl">
+          <div className="flex flex-col gap-2 mt-4 justify-center items-center font-bold text-md sm:text-2xl">
             <p className="text-white text-center">
-              <span className="bg-green-600 rounded-lg border  border-black px-1 py-1">
+              <span className="bg-green-600 rounded-lg border border-black px-1 py-1">
                 Share Your Coding
               </span>{" "}
               Journey and Discover New Insights
@@ -71,14 +71,14 @@ function Navbar(){
 
    const navItems = [
      {
-       name: "All blogs",
+       name: "Blogs",
        onClick: () => {
          token ? navigate("/blogs") : navigate("/signin");
        },
        className: "",
      },
      {
-       name: "Create Blog",
+       name: "Create",
        onClick: () => {
          token ? navigate("/createblog") : navigate("/signin");
        },
@@ -95,9 +95,12 @@ function Navbar(){
   return (
     <div className="bg-black w-full  h-16 flex items-center absolute top-2 justify-center px-10">
       <div className="flex  w-full  xl:min-w-[40rem] bg-[#0f1115] justify-around items-center border  md:gap-4 rounded-xl px-1 sm:px-3 py-2 border-white">
-        <h1 className="font-extrabold font-sans text-center mr-3 sm:mr-5 text-[#F6D776] text-md  sm:text-xl md:text-3xl">
+        <h1 className="font-extrabold font-sans hidden sm:block text-center mr-3 sm:mr-5 text-[#F6D776] text-sm  sm:text-xl md:text-3xl">
           The Code Whisperers
         </h1>
+        <h1 className="font-extrabold font-sans sm:hidden text-center mr-3 sm:mr-5 text-[#F6D776] text-sm  sm:text-xl md:text-3xl">
+          TCW
+        </h1>
         <div className="flex gap-3 sm:gap-5 justify-center items-center">
           {navItems.map((item) => (
             <h1