From a77af8b50b5c8a00e1e3807501d992ecfd1f2b80 Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Tue, 24 Sep 2024 22:53:46 -0300
Subject: [PATCH] fix: small support for mobile devices

---
 src/routes/projects/[id]/+page.svelte | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index c226c8f..601d9e9 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -127,7 +127,7 @@
 		{#if browser}
 			<article
 				class="reader"
-				style={`--bg-color: rgba(${color.map((c) => c * 255).join(',')}, 0.7)`}
+				style={`--bg-color: rgba(${color.map((c) => c * 255).join(',')}, 0.8)`}
 				bind:this={reader}
 				on:scroll={() => {
 					scroll = reader.scrollTop;
@@ -184,20 +184,26 @@
 
 	.reader {
 		display: flex;
+
 		width: 80vw;
+		height: 100vh;
+
 		justify-content: center;
 		padding-top: 5rem;
 		padding-bottom: 5rem;
 		margin-bottom: 0;
 
 		background-color: var(--bg-color);
-		height: 100vh;
 		overflow-y: scroll;
 	}
 
 	.page {
-		width: calc(1080px / 2.5);
-		min-height: calc(1920px / 2.5);
+		width: calc(1080px / 3.5);
+		min-height: calc(1920px / 3.5);
+		@media (min-width: 1024px) {
+			width: calc(1080px / 2.5);
+			min-height: calc(1920px / 2.5);
+		}
 		background-color: #fff;
 
 		display: flex;
@@ -206,6 +212,8 @@
 
 		padding: 0;
 
+		box-shadow: 0rem 1rem 1rem 0rem rgba(0, 0, 0, 0.5);
+
 		& form {
 			margin: 1rem;
 			margin-bottom: 0;
@@ -230,5 +238,11 @@
 	aside {
 		padding: 1rem;
 		width: 20vw;
+		& * {
+			font-size: 0.8rem !important;
+			@media (min-width: 1024px) {
+				font-size: unset;
+			}
+		}
 	}
 </style>