From 11bbe8da2c572a54471d9cdca252862a56ae8ed0 Mon Sep 17 00:00:00 2001
From: Vitor Hideyoshi Nakazone Batista <vitor.h.n.batista@gmail.com>
Date: Sat, 30 Dec 2023 06:08:45 -0300
Subject: [PATCH] Better Project Card Sizing and Padding

---
 src/app/projects/project-card/project-card.component.css | 6 +++++-
 src/app/projects/project-card/project-card.component.ts  | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/projects/project-card/project-card.component.css b/src/app/projects/project-card/project-card.component.css
index cd5ac00..912878c 100644
--- a/src/app/projects/project-card/project-card.component.css
+++ b/src/app/projects/project-card/project-card.component.css
@@ -1,10 +1,14 @@
+.card {
+    width: 90%;
+}
+
 .card .inverse-card-image {
     flex-direction: row-reverse;
 }
 
 .card .card-content {
     width: 100%;
-    padding: 40px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
diff --git a/src/app/projects/project-card/project-card.component.ts b/src/app/projects/project-card/project-card.component.ts
index 84946dc..747f421 100644
--- a/src/app/projects/project-card/project-card.component.ts
+++ b/src/app/projects/project-card/project-card.component.ts
@@ -77,8 +77,11 @@ export class ProjectCardComponent implements OnInit {
     }
 
     private generateChart(languages: Language[], windowWidth: number): ChartOptions {
+        const WIDTH_PROPORTION = .9*.8;
+        const DOUBLE_PADDING_WIDTH = 40;
+
         const responsiveWindowWidth = windowWidth >= 530 ?
-            300 : (windowWidth*.8 - 80);
+            300 : (windowWidth*WIDTH_PROPORTION - DOUBLE_PADDING_WIDTH);
 
         return {
             series: languages.map(value => value.percentage),