feat: improve testimonials layout

fbuireu · May 13, 2024 · 38828be · 38828be
1 parent 19a4658
commit 38828be
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 129 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@fontsource/baskervville": "^5.0.20",
 		"@hookform/resolvers": "^3.3.4",
-		"astro": "^4.8.2",
+		"astro": "^4.8.3",
 		"firebase": "^10.11.1",
 		"firebase-admin": "^12.1.0",
 		"gsap": "^3.12.5",
@@ -64,7 +64,7 @@
 		"react-hook-form": "^7.51.4",
 		"react-router-dom": "^6.23.1",
 		"resend": "^3.2.0",
-		"swiper": "^11.1.1",
+		"swiper": "^11.1.2",
 		"three": "^0.164.1",
 		"zod": "^3.23.8"
 	},

diff --git a/src/assets/images/svg/logo.svg b/src/assets/images/svg/logo.svg
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,7 +5,7 @@ import Testimonials from "@components/organisms/testimonials/Testimonials.astro"
 import MyWork from "@components/organisms/myWork/MyWork.astro";
 import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro";
 
-// todo (current): home testimonial card
+// todo (current): fresh from the blog
 // todo: tags page
 // todo: add resume (PDF) in about?
 // todo: dynamic content

diff --git a/...nents/molecules/testimonial/components/testimonialDescription/testimonial-description.css b/...nents/molecules/testimonial/components/testimonialDescription/testimonial-description.css
@@ -3,6 +3,7 @@
     color: var(--neutral-light-2);
     grid-area: Testimonial-Description;
     isolation: isolate;
+    padding-bottom: 1rem;
     transition-duration: 350ms;
     transition-property: translate;
     transition-timing-function: ease-in;

diff --git a/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonial-quote.css b/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonial-quote.css
@@ -9,6 +9,10 @@
     grid-area: Testimonial-Quote;
     isolation: isolate;
     padding-inline-end: 2rem;
+
+    @media (max-width: 1024px) {
+      padding-inline-end: 1rem;
+    }
   }
 
   .testimonial__quote {

diff --git a/src/ui/components/molecules/testimonial/testimonial.css b/src/ui/components/molecules/testimonial/testimonial.css
@@ -18,12 +18,14 @@
     }
 
     @media (max-width: 575px) {
+      gap: 0.5rem 0;
       grid:
       'Testimonial-Image' auto
       'Testimonial-Quote' min-content
       'Testimonial-Author' 1.5rem
       'Testimonial-Description' min-content
       / 1fr;
+      padding-inline: 1rem;
     }
   }
 
@@ -36,15 +38,6 @@
         'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem
         'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content
         / 1fr 1fr calc(100% / 4) calc(100% / 4);
-
-      @media (max-width: 575px) {
-        grid:
-      'Testimonial-Image' auto
-      'Testimonial-Quote' min-content
-      'Testimonial-Author' 1.5rem
-      'Testimonial-Description' min-content
-      / 1fr;
-      }
     }
   }
 }
diff --git a/src/ui/components/organisms/testimonials/testimonials.css b/src/ui/components/organisms/testimonials/testimonials.css
@@ -18,7 +18,7 @@
         padding-top: 3rem;
 
         @media (max-width: 960px) {
-            padding-top: 0;
+            padding-top: 1.5rem;
         }
     }