From edecb337541eaee7a9beb6739f65529496a972a5 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sun, 6 Apr 2025 22:34:12 +0200
Subject: [PATCH] Refactoring: Reworked some css elements and variables such as
 width and height for components.

---
 src/lib/css/base.css    |  5 +++--
 src/lib/css/git.css     |  2 +-
 src/lib/css/project.css | 14 +++++++-------
 src/routes/+page.svelte | 20 +++++++++-----------
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/lib/css/base.css b/src/lib/css/base.css
index 99f0f48..11e339d 100644
--- a/src/lib/css/base.css
+++ b/src/lib/css/base.css
@@ -53,8 +53,9 @@ h2 {
     --border-max: 2rem;
     --profile-content-width-max: 40rem;
     --profile-content-width-min: 36rem;
-    --content-width: 60rem;
-    --content-height: 55rem;
+    --content-width: 55rem;
+    --content-height: 29rem;
+    --content-3-width: calc((var(--content-width) - 2rem)/3);
 
     --width-min-desktop: 1275px;
     --width-mobile: 875px;
diff --git a/src/lib/css/git.css b/src/lib/css/git.css
index bda5861..f2819cb 100644
--- a/src/lib/css/git.css
+++ b/src/lib/css/git.css
@@ -1,7 +1,7 @@
 .git-container {
     background-color: #00000000;
     border-radius: 1rem;
-    width: calc(var(--content-width)/3 - 2rem);
+    width: var(--content-3-width);
     height: 10rem;
     cursor: pointer;
     overflow: hidden;
diff --git a/src/lib/css/project.css b/src/lib/css/project.css
index 41d47d8..6051850 100644
--- a/src/lib/css/project.css
+++ b/src/lib/css/project.css
@@ -2,28 +2,28 @@
 
 @media screen and (max-width: 1275px) {
     .project-container {
-        height: calc(var(--content-height)/2);
-        width: calc((var(--content-width) + 6rem - 4rem)/3);
+        height: var(--content-height);
+        width: var(--content-3-width);
     }
 
     .project {
-        height: calc(var(--content-height)/2);
+        height: var(--content-height);
     }
 }
 
 @media screen and (min-width: 1276px) {
     .project-container {
-        height: calc(var(--content-height)/2);
-        width: calc((var(--content-width) + 6rem - 4rem)/3);
+        height: var(--content-height);
+        width: var(--content-3-width);
     }
 
     .project {
-        height: calc(var(--content-height)/2);
+        height: var(--content-height);
     }
 }
 
 .project img {
-    height: calc((var(--content-width)+ 6rem - 4rem)/3*3/4);
+    height: calc(var(--content-3-width)*3/4);
     width: 100%;
 }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3919c35..04d6c75 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -44,17 +44,15 @@
 		<p>{hubjson.project.description}</p>
 	</div>
 	<div class="flex w-100 justify-center">
-		<div class="content flex-row center">
-			{#each hubjson.projects as project, index}
-				<Project
-					cover={hubjson.projects[index].cover}
-					title={hubjson.projects[index].title}
-					url={hubjson.projects[index].url}
-					description={hubjson.projects[index].description}
-					topic={topics[hubjson.projects[index].topic]}
-				/>
-			{/each}
-		</div>
+		{#each hubjson.projects as project, index}
+			<Project
+				cover={hubjson.projects[index].cover}
+				title={hubjson.projects[index].title}
+				url={hubjson.projects[index].url}
+				description={hubjson.projects[index].description}
+				topic={topics[hubjson.projects[index].topic]}
+			/>
+		{/each}
 	</div>
 	<div class="section">
 		<h1>{hubjson.lab.title}</h1>