Cleanup Carousel, MasonryGrid, and Wall of Love

directus · Nov 14, 2024 · 9ed79fc · 9ed79fc
1 parent 1c8b752
commit 9ed79fc
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 114 deletions.
diff --git a/components/Block/Carousel/Carousel.vue b/components/Block/Carousel/Carousel.vue
@@ -103,31 +103,13 @@ onMounted(async () => {
 		}
 	}
 	&__controls {
-		position: relative;
-		justify-content: center;
-		left: 0;
-		right: 0;
 		display: flex;
-		gap: 30%;
-		bottom: 80px;
-		top: auto;
-		@media (max-width: 1704px) {
-			bottom: 60px;
-			top: auto;
-		}
-		@media (max-width: 847px) {
-			bottom: 40px;
-			top: auto;
-		}
-		@media (max-width: 768px) {
-			top: auto;
-			bottom: 20px;
-			gap: 60%;
-		}
+		justify-content: center;
+		gap: 60px;
+		margin-top: 40px;
 	}
 
 	&__button {
-		z-index: 10;
 		color: #333;
 		padding: 8px;
 		&__svg {

diff --git a/components/Block/MasonryGrid/MasonryGrid.vue b/components/Block/MasonryGrid/MasonryGrid.vue
@@ -38,43 +38,9 @@ const limitedCards = computed(() => {
 
 <style lang="scss" scoped>
 .masonry-grid {
-	display: grid;
-	margin: 0 auto;
-	gap: 1rem;
-
-	&.six_cards {
-		grid-template-columns: repeat(3, 1fr);
-		grid-auto-rows: auto;
-	}
-
-	&.four_cards {
-		grid-template-columns: repeat(2, 1fr);
-		grid-auto-rows: auto;
-	}
-
-	&.two_cards {
-		grid-template-columns: repeat(2, 1fr);
-		grid-auto-rows: auto;
-	}
-	@media (max-width: 1456px) {
-		&.six_cards,
-		&.four_cards,
-		&.two_cards {
-			grid-template-columns: repeat(2, 1fr);
-		}
-	}
-	@media (max-width: 911px) {
-		grid-auto-rows: auto;
-		&.six_cards,
-		&.four_cards,
-		&.two_cards {
-			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		}
-	}
-
-	@media (max-width: 819px) {
-		grid-template-columns: 1fr;
-		gap: 0.5rem;
-	}
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1%;
+	justify-content: space-between;
 }
 </style>
diff --git a/components/Block/MasonryGrid/MasonryGridCard.vue b/components/Block/MasonryGrid/MasonryGridCard.vue
@@ -32,23 +32,19 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () =>
 	overflow: hidden;
 	position: relative;
 	height: 290px;
-	width: 100%;
 	transition: transform 0.3s ease;
 
 	&.single-card {
-		min-width: 290px;
-		flex-grow: 1;
+		flex: 1 1 290px;
+		margin: 0 1% 1% 0;
 	}
 
 	&.double-card {
-		min-width: 500px;
-		flex-grow: 2;
+		flex: 2 1 500px;
+		margin: 0 1% 1% 0;
 	}
 
 	img {
-		position: absolute;
-		top: 0;
-		left: 0;
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
@@ -64,48 +60,13 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () =>
 		position: absolute;
 		top: 0;
 		left: 0;
-		z-index: 2;
-		background-color: rgba(255, 255, 255, 0.8);
-		padding: 8px;
-		border-radius: 4px;
-		margin: 8px;
-		font-size: 16px;
-		font-weight: bold;
-	}
-}
-
-@media (max-width: 911px) {
-	.masonry-card-content {
-		&.double-card {
-			grid-column: span 2;
-			width: 100%;
-		}
-	}
-}
-
-@media (max-width: 819px) {
-	.masonry-card-content {
-		&.double-card {
-			grid-column: span 1;
-		}
-
-		&.single-card {
-			min-width: 250px;
-		}
-	}
-}
-
-@media (max-width: 768px) {
-	.masonry-card-content {
-		height: 180px;
-		min-width: 100%;
-		&.single-card {
-			min-width: 100px;
-		}
-
-		&.double-card {
-			min-width: 250px;
-		}
+		padding: 28px;
+		color: var(--Foreground-Normal, #455466);
+		font-family: Poppins;
+		font-size: 24px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 32px;
 	}
 }
 </style>
diff --git a/components/Block/WallOfLove/Testimonials.vue b/components/Block/WallOfLove/Testimonials.vue
@@ -79,6 +79,14 @@ const logoImageUrl = computed(() => {
 	flex-direction: column;
 	gap: 32px;
 
+	@media (max-width: 768px) {
+		padding: 24px;
+	}
+
+	@media (max-width: 480px) {
+		padding: 16px;
+	}
+
 	.header {
 		display: flex;
 		align-items: center;
@@ -90,6 +98,11 @@ const logoImageUrl = computed(() => {
 			height: 50px;
 			border-radius: 50%;
 			margin-right: 12px;
+
+			@media (max-width: 480px) {
+				width: 40px;
+				height: 40px;
+			}
 		}
 
 		.info {
@@ -98,18 +111,28 @@ const logoImageUrl = computed(() => {
 
 			strong {
 				font-size: 1.1em;
+
+				@media (max-width: 480px) {
+					font-size: 1em;
+				}
 			}
 
 			.role {
 				font-size: 0.9em;
 				color: #666;
+
+				@media (max-width: 480px) {
+					font-size: 0.8em;
+				}
 			}
 		}
 	}
+
 	.quote {
 		margin-bottom: 12px;
 		font-style: italic;
 		flex-grow: 1;
+
 		:deep(> *) {
 			quotes: auto;
 
@@ -134,8 +157,16 @@ const logoImageUrl = computed(() => {
 
 		.company-logo {
 			max-height: 40px;
-			max-width: 200px;
+			max-width: 150px;
 			width: auto;
+
+			@media (max-width: 768px) {
+				max-width: 150px;
+			}
+
+			@media (max-width: 480px) {
+				max-width: 100px;
+			}
 		}
 
 		.logo-placeholder {
@@ -151,6 +182,11 @@ const logoImageUrl = computed(() => {
 			.star-icon {
 				width: 16px;
 				height: 16px;
+
+				@media (max-width: 480px) {
+					width: 14px;
+					height: 14px;
+				}
 			}
 		}
 	}

diff --git a/components/Block/WallOfLove/WallOfLove.vue b/components/Block/WallOfLove/WallOfLove.vue
@@ -62,10 +62,12 @@ const toggleShowAll = () => {
 	align-items: center;
 
 	.wall-heading {
-		margin-bottom: 16px;
-		text-align: center;
-		font-size: 1.5em;
-		font-weight: bold;
+		color: var(--Foreground-Normal, #455466);
+		font-family: Poppins;
+		font-size: 24px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 32px;
 	}
 
 	.testimonial-container {