fix home recipes background decoration (#114)

luz-ojeda · Jul 5, 2024 · d994123 · d994123
1 parent e480551
commit d994123
Showing 1 changed file with 37 additions and 29 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -68,7 +68,7 @@
 
 <!-- Recipe cards -->
 {#if data.data.length > 0}
-	<section class="recipes-section background curved">
+	<section class="recipes-section curved">
 		<div class="recipes-container recipes-container-home">
 			{#each data.data as { id, name, summary, pictures }}
 				<RecipeCard
@@ -82,24 +82,16 @@
 		<a href="/recetas">
 			<Button buttonType="tertiary" tabIndex={-1}>Ver más recetas</Button>
 		</a>
+		<div class="background"></div>
 	</section>
 {/if}
 
 <style lang="scss">
 	@import '../sass/variables.scss';
-	@import '../sass/colors.scss';
-
-	.background {
-		background-color: var(--body-bg-accent);
-	}
-
-	.recipes-section {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-	}
 
 	.hero {
+		margin-bottom: var(--space-lg);
+
 		@media (max-width: $tabletBreakpoint) {
 			flex-direction: column;
 			text-align: center;
@@ -120,34 +112,50 @@
 		}
 	}
 
-	.recipes-container-home {
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		grid-template-rows: auto;
-		grid-auto-rows: 0;
-
-		@media (max-width: $tabletBreakpoint) {
-			grid-auto-rows: auto;
-		}
-
-		@media (max-width: $tabletBreakpoint) {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
+	.recipes-section {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		position: relative;
 	}
 
-	.curved {
-		position: relative;
+	.background {
+		background-color: var(--body-bg-accent);
+		height: 120%;
+		width: 100vw;
+		position: absolute;
+		z-index: -1;
 	}
 
-	.curved::before {
+	.background::before {
 		background-color: var(--body-bg-accent);
 		border-top-left-radius: 50% 100%;
 		border-top-right-radius: 50% 100%;
 		content: '';
 		left: 0;
 		position: absolute;
-		top: -15%;
-		width: 100%;
+		transform: translateY(-70px);
+		width: 100vw;
 		height: 15%;
 		z-index: -1;
+
+		@media (max-width: $tabletBreakpoint) {
+			display: none;
+		}
+	}
+
+	.recipes-container-home {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		grid-template-rows: auto;
+		grid-auto-rows: 0;
+		padding: var(--component-padding) 0;
+
+		@media (max-width: $tabletBreakpoint) {
+			grid-auto-rows: auto;
+		}
+
+		@media (max-width: $tabletBreakpoint) {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
 	}
 </style>