Refactoring: Reworked some css elements and variables such as width and height for components.

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;

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;

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%;
 }
 

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>