From 800c99fac89dfe3d18c165366f23a160f5c67568 Mon Sep 17 00:00:00 2001 From: yousifpa98 Date: Tue, 21 Jan 2025 21:49:52 +0100 Subject: [PATCH] mobile -450px --- src/components/Switch.jsx | 13 +++++++++++-- src/components/mainViews/Contact.jsx | 2 +- src/css/ContactTile.css | 6 ++++++ src/css/GridContainer.css | 17 ++++++++++++++--- src/css/Hero.css | 2 +- src/css/LangSelect.css | 6 +++++- src/css/Mail.css | 6 +++++- src/css/ProjectCard.css | 13 +++++++++++-- src/css/ProjectsMain.css | 16 ++++++++++++++++ src/css/Specialties.css | 8 ++++++++ src/css/TallContent.css | 2 +- src/css/TallContentAbout.css | 7 +++++++ src/css/TechStack.css | 2 +- 13 files changed, 87 insertions(+), 13 deletions(-) diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index ffb2b25..ff4602f 100644 --- a/src/components/Switch.jsx +++ b/src/components/Switch.jsx @@ -21,7 +21,7 @@ const SwitchBtn = styled.button` `; const SwitchContainer = styled.div` - grid-area: 8 / 4 / 10 / 5; + grid-area: 8 / 4 / 10 / 5; /* Default grid-area */ transition: background-color 1s ease; background-color: ${(props) => props.colormode === "dark" ? "#131862" : "#69d0ff"}; @@ -32,12 +32,21 @@ const SwitchContainer = styled.div` ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")}; position: relative; + /* Media query for max-width: 450px */ @media (max-width: 450px) { - grid-area: 18 / 4 / 20 / 5; + grid-area: 14 / 4 / 16 / 5; + } + + /* Media query for max-width: 450px when parent has .gridContainer.contact */ + @media (max-width: 450px) { + .gridContainer.contact & { + grid-area: 8/4/10/4; /* Custom grid-area for this scenario */ + } } `; + const StyledSunIcon = styled(SunIcon)` fill: #fff145; `; diff --git a/src/components/mainViews/Contact.jsx b/src/components/mainViews/Contact.jsx index 5822bb8..380cdec 100644 --- a/src/components/mainViews/Contact.jsx +++ b/src/components/mainViews/Contact.jsx @@ -26,7 +26,7 @@ const Contact = () => { setAnimation(""); // Clear animation to prevent re-triggering }; return ( -
+
diff --git a/src/css/ContactTile.css b/src/css/ContactTile.css index 5b77262..f354cb7 100644 --- a/src/css/ContactTile.css +++ b/src/css/ContactTile.css @@ -161,3 +161,9 @@ transform: translate(-25%, -25%) rotate(30deg) scale(1.05); } } + +@media screen and (max-width: 450px) { + .contactTile { + grid-area: 2/1/6/5; + } +} diff --git a/src/css/GridContainer.css b/src/css/GridContainer.css index c8fa32d..d4cc1df 100644 --- a/src/css/GridContainer.css +++ b/src/css/GridContainer.css @@ -57,16 +57,27 @@ @media screen and (max-width: 450px) { .gridContainer { grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(19, 1fr); + grid-template-rows: repeat(15, 1fr); min-width: 350px; width: 100%; } + .gridContainer.contact { + grid-template-rows: repeat(9, 1fr); + } + + .gridContainer.contact .github { + grid-area: 6 / 3 / 8 / 5; + } + .gridContainer.contact .linkedIn { + grid-area: 6 / 1 / 8 / 3; + } + .gridContainer .github { - grid-area: 16 / 3 / 18 / 5; + grid-area: 12 / 3 / 14 / 5; } .gridContainer .linkedIn { - grid-area: 16 / 1 / 18 / 3; + grid-area: 12 / 1 / 14 / 3; } .gridContainer .linkedIn .linkedInIcon, diff --git a/src/css/Hero.css b/src/css/Hero.css index 5e3286b..4d5c34c 100644 --- a/src/css/Hero.css +++ b/src/css/Hero.css @@ -21,6 +21,6 @@ @media screen and (max-width: 450px) { .hero { - grid-area: 2 / 1 / 5 / 5; + grid-area: 2 / 1 / 4 / 5; } } diff --git a/src/css/LangSelect.css b/src/css/LangSelect.css index a32a676..9059305 100644 --- a/src/css/LangSelect.css +++ b/src/css/LangSelect.css @@ -15,6 +15,10 @@ @media (max-width: 450px) { .langSelect { - grid-area: 18/1/19/4; + grid-area: 14/1/15/4; + } + + .gridContainer.contact .langSelect { + grid-area: 8/1/9/4; } } \ No newline at end of file diff --git a/src/css/Mail.css b/src/css/Mail.css index 7ee9a9c..45b4036 100644 --- a/src/css/Mail.css +++ b/src/css/Mail.css @@ -30,6 +30,10 @@ @media (max-width: 450px) { .eMail { - grid-area: 19/1/20/4; + grid-area: 15/1/16/4; + } + + .gridContainer.contact .eMail { + grid-area: 9/1/10/4; } } \ No newline at end of file diff --git a/src/css/ProjectCard.css b/src/css/ProjectCard.css index f7dfb0b..140ab2c 100644 --- a/src/css/ProjectCard.css +++ b/src/css/ProjectCard.css @@ -67,7 +67,8 @@ gap: 0.5rem; } -.projectCard.light .projectInfo h3 span, .projectCard.light .projectJob{ +.projectCard.light .projectInfo h3 span, +.projectCard.light .projectJob { color: rgb(90, 90, 90); } @@ -77,4 +78,12 @@ .projectCard.light .socialIcon:hover { fill: #6e6e6e; -} \ No newline at end of file +} + +@media screen and (max-width: 450px) { + .projectCard { + width: 100%; + align-items: center; + justify-content: center; + } +} diff --git a/src/css/ProjectsMain.css b/src/css/ProjectsMain.css index fc69026..2ec3361 100644 --- a/src/css/ProjectsMain.css +++ b/src/css/ProjectsMain.css @@ -15,3 +15,19 @@ gap: 1rem; width: 100%; } + +@media screen and (max-width: 450px) { + .projectsMain { + grid-area: 2/1/12/5; + align-items: center; + justify-content: center; + } + + .projectsDiv { + flex-wrap: nowrap; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } +} diff --git a/src/css/Specialties.css b/src/css/Specialties.css index 5b74f10..2f775cd 100644 --- a/src/css/Specialties.css +++ b/src/css/Specialties.css @@ -11,3 +11,11 @@ .specialties.light .specialtyText { color: #333; } + +@media screen and (max-width: 450px) { + .specialties { + grid-area: 4 / 1 / 7 / 5; + } + +} + diff --git a/src/css/TallContent.css b/src/css/TallContent.css index 50e84f1..007e468 100644 --- a/src/css/TallContent.css +++ b/src/css/TallContent.css @@ -14,6 +14,6 @@ @media screen and (max-width: 450px) { .tallContent { - grid-area: 9 / 1 / 16 / 5; + grid-area: 7 / 1 / 12 / 5; } } \ No newline at end of file diff --git a/src/css/TallContentAbout.css b/src/css/TallContentAbout.css index e8cf0ae..93274f1 100644 --- a/src/css/TallContentAbout.css +++ b/src/css/TallContentAbout.css @@ -39,3 +39,10 @@ .tallContentAbout.light .funFactList li p { color: #333; } + +@media screen and (max-width: 450px) { + .tallContentAbout { + grid-area: 7 / 1 / 12 / 5; + /* height: fit-content; */ + } +} \ No newline at end of file diff --git a/src/css/TechStack.css b/src/css/TechStack.css index 23ea8c9..f5b5e22 100644 --- a/src/css/TechStack.css +++ b/src/css/TechStack.css @@ -115,7 +115,7 @@ @media screen and (max-width: 450px) { .techStackContainer { - grid-area: 5 / 1 / 9 / 5; + grid-area: 4 / 1 / 7 / 5; max-height: 1110px; }