feat: add responsiveness to about page

fbuireu · Apr 30, 2024 · dec55f2 · dec55f2
1 parent c71a1bb
commit dec55f2
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 10 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
 		"resend": "^3.2.0",
 		"swiper": "^11.1.1",
 		"three": "^0.164.1",
-		"zod": "^3.23.4"
+		"zod": "^3.23.5"
 	},
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.6.1",

diff --git a/src/ui/components/molecules/aboutIntro/AboutIntro.astro b/src/ui/components/molecules/aboutIntro/AboutIntro.astro
@@ -25,7 +25,7 @@ import EmailButton from "@components/atoms/emailButton/EmailButton.astro";
   </div>
   <div class="about-me-intro__section --right flex row-wrap">
     <Image src={bianca} alt="Bianca Fiore" class="about-me-intro__image" />
-    <ul class="about-me-intro__section__social__networks__list flex row-wrap">
+    <ul class="about-me-intro__section__social__networks__list flex row-nowrap">
       <li class="about-me-intro__section__social__networks__list__item">
         <a
           href="https://linkedin.com"

diff --git a/src/ui/components/molecules/aboutIntro/about-intro.css b/src/ui/components/molecules/aboutIntro/about-intro.css
@@ -1,8 +1,14 @@
 @layer about.intro {
   .about-me-intro__wrapper {
     display: grid;
-    gap: 0 8rem;
+    gap: 0 10%;
     grid: 'AboutMe-Text AboutMe-Image' 1fr / 1fr 1fr;
+
+    @media (max-width: 960px) {
+      gap: 0;
+      grid: 'AboutMe-Text AboutMe-Text' min-content
+      'AboutMe-Image AboutMe-Image' 1fr / 1fr;
+    }
   }
 
   .about-me-intro__section.--left {
@@ -13,28 +19,39 @@
   .about-me-intro__section.--right {
     gap: 2rem 0;
     grid-area: AboutMe-Image;
+
+    @media (max-width: 960px) {
+     padding: 0 1rem;
+    }
   }
 
   .about-me-intro__title {
     text-transform: uppercase;
+
+    @media (max-width: 1440px) {
+      padding-inline-start: 3rem;
+    }
+    @media (max-width: 960px) {
+      padding-inline-start: 1rem;
+    }
   }
 
   .about-me-intro__body {
     gap: 2rem 0;
     padding-inline-start: 3rem;
+
+    @media (max-width: 960px) {
+      padding-inline-start: 1rem;
+    }
   }
 
   .about-me-intro__section__social__networks__list {
+    gap: 0 1rem;
     width: 100%;
   }
 
   .about-me-intro__section__social__networks__list__item {
-    max-width: calc(100% / 4);
-    width: 100%;
-
     &:nth-child(2) {
-      display: contents;
-
       & > button::after {
         content: '';
         inset: auto auto -2px 0;

diff --git a/src/ui/styles/global/global.css b/src/ui/styles/global/global.css
@@ -18,6 +18,12 @@
         text-transform: uppercase;
         text-align: center;
         font-size: clamp(2rem, 2.5vw, 5rem);
+        font-variation-settings: "wght" 200;
+        transition: font-variation-settings .5s;
+
+        &:hover{
+            font-variation-settings: "wght" 600;
+        }
     }
 
     .inner-section-title {

diff --git a/yarn.lock b/yarn.lock
@@ -3848,7 +3848,7 @@ __metadata:
     three: "npm:^0.164.1"
     typescript: "npm:^5.4.5"
     vitest: "npm:^1.5.2"
-    zod: "npm:^3.23.4"
+    zod: "npm:^3.23.5"
   languageName: unknown
   linkType: soft
 
@@ -11899,13 +11899,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:^3.23.0, zod@npm:^3.23.4":
+"zod@npm:^3.23.0":
   version: 3.23.4
   resolution: "zod@npm:3.23.4"
   checksum: 10c0/7fb99f05bd5b86dcde06e202285a5d102b2e26d46f5119403a17618d0048e488e074cdcdf3fbba2bdcb77ff8141ddd85112b6d86d7a2fbefc9ffc983997b970e
   languageName: node
   linkType: hard
 
+"zod@npm:^3.23.5":
+  version: 3.23.5
+  resolution: "zod@npm:3.23.5"
+  checksum: 10c0/5c74aefe2c0bc2f00d79c5a8724dae863054653bbad640964fdb009c52573349366fa70533f0dfcb912b007421294d437f063d466f9692eb77a2b620640c2794
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.0, zwitch@npm:^2.0.4":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"