Merge pull request #141 from ZivFisher/fix-the-style-in-projects-page

fix: Fixed the style in projects page.
Maakaf · Jan 3, 2024 · 33ece98 · 33ece98
2 parents 8c94d70 + 6224f76
commit 33ece98
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -48,9 +48,11 @@ const ProjectsPage = () => {
   };
 
   return (
-    <section className="h-full">
+    <section className="self-center w-full h-[90vh] px-20 pb-6 flex flex-col justify-center gap-4">
       <FiltersBar />
-      <ProjectCard {...exampleProjectCardData}></ProjectCard>
+      <div className="projects flex flex-col justify-center gap-4">
+        <ProjectCard {...exampleProjectCardData}></ProjectCard>
+      </div>
     </section>
   );
 };

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -2,8 +2,8 @@ import Link from 'next/link';
 import FacebookIconLink from './FacebookIconLink';
 import LinkedinIconLink from './LinkedinIconLink';
 import TwitterIconLink from './TwitterIconLink';
-import React from "react";
-import GithubIconLink from "@/components/Footer/GithubIconLink";
+import React from 'react';
+import GithubIconLink from '@/components/Footer/GithubIconLink';
 
 const links = [
   {
@@ -45,7 +45,7 @@ const FooterLink = ({ href, text }: FooterLinkProps) => (
 
 const Footer: React.FC = () => {
   return (
-    <footer className="grid py-6 font-inter md:grid-cols-2 border-t-[1px] w-full h-96 md:h-40 border-blue-600 bg-lightBg dark:bg-darkAccBg text-darkText dark:text-lightText">
+    <footer className="sticky bottom-0 grid py-6 font-inter md:grid-cols-2 border-t-[1px] w-full h-96 md:h-40 border-blue-600 bg-lightBg dark:bg-darkAccBg text-darkText dark:text-lightText">
       <div className="grid w-full grid-cols-2 2xl:w-2/3 md:px-16 lg:px-24 ">
         {links.map((link, index) => (
           <FooterLink key={index} href={link.href} text={link.text} />
@@ -73,4 +73,4 @@ const Footer: React.FC = () => {
     </footer>
   );
 };
-export default Footer;
+export default Footer;
diff --git a/components/Home/TitleSection.tsx b/components/Home/TitleSection.tsx
@@ -26,7 +26,7 @@ export default function TitleSection() {
         </DiscordLink>
       </div>
 
-      <div className="absolute xl:w-[650px] top-0 left-0 w-full h-full -z-10 md:z-0 opacity-40 md:w-1/2 md:opacity-100 md:static">
+      <div className="absolute top-0 left-0 w-full h-full opacity-40 -z-10 2xl:h-[90%] xl:w-[650px] md:z-0 md:w-1/2 md:opacity-100 md:static">
         <div
           className={
             'bg-[url("/images/skeleton_loader.png")] dark:bg-[url("/images/skeleton_loader_dark.png")] w-full h-full bg-top bg-no-repeat bg-contain '

diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx
@@ -61,7 +61,7 @@ const FiltersBar: React.FC = () => {
   useFocusTrap(filterRef, toggleFiltersWindow);
 
   return (
-    <div className="px-4 md:px-14 flex flex-col justify-center items-center gap-[51px]">
+    <div className="w-full flex flex-col justify-center items-center gap-[51px]">
       <div className="flex flex-col items-center gap-[5px]">
         <h1 className="h1 font-bold">הפרויקטים</h1>
         <h2 className="h4-roman text-xl text-center">

diff --git a/components/Projects/ProjectCard/ProjectCard.tsx b/components/Projects/ProjectCard/ProjectCard.tsx
@@ -42,7 +42,7 @@ export default function ProjectCard({
 
   return (
     <article
-      className="flex p-4 sm:p-6 gap-7 rounded-lg bg-purple-100 dark:bg-darkAccBg
+      className="w-full flex p-4 sm:p-6 gap-7 rounded-lg bg-purple-100 dark:bg-darkAccBg
       hover:bg-purple-200 dark:hover:bg-[#253245] item-hover-transition"
     >
       <aside className="hidden sm:flex flex-col items-center gap-4">